Question

I have many PathGeometry instances that draw a variety of graphics for different buttons. So I have created a button type for showing a Path which then updates the Path.Stroke depending on the button state. So show it grayed when disabled and different colours when the mouse is over. Standard stuff…

<Style x:Key="BasePathButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="Border"
                    <Path x:Name="Path" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Path" Property="Stroke" Value="Gray"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Path" Property="Stroke" Value="Green"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Path" Property="Stroke" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But obviously I need different Path.Data for each button instance. So I create a BasedOn style for setting the Path.Data like this…

<Style x:Key="NLB" TargetType="{x:Type Button}" BasedOn="{StaticResource BasePathButton}">
    <Setter TargetName="Path" Property="Data" Value="{StaticResource LeftPathGeometry}"/>
</Style>

…but this fails with an error that TargetName=”Path” cannot be found. Any ideas how to fix this? Or maybe a better way to create a button that has a Path which is parameterized with the geometry to use?

Answer 1

You cannot target elements in the template via name, it’s a different namescope, also i think TargetName only works in ControlTemplate.Triggers. You could reference the data as DynamicResource and then add the resource to your individual styles.

e.g.

<Path Data="{DynamicResource PathData}" .../>

<Style x:Key="..." BasedOn="...">
    <Style.Resources>
        <!-- not sure if this actually works, you could also try DynamicResource here -->
        <StaticResource x:Key="PathData" ResourceKey="LeftPathGeometry"/>
    </Style.Resources>
</Style>

---

Here is a full standalone example showing this technique (only appears to work with dynamically compiled XAML!):

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <SolidColorBrush x:Key="RedBrush" Color="Red"/>
    <SolidColorBrush x:Key="BlueBrush" Color="Blue"/>

    <Style x:Key="BaseStyle" TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Border BorderBrush="{DynamicResource StyleBrush}" BorderThickness="3" Padding="5">
              <ContentPresenter TextElement.Foreground="{DynamicResource StyleBrush}"/>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    <Style x:Key="RedStyle" BasedOn="{StaticResource BaseStyle}" TargetType="Button">
      <Style.Resources>
        <StaticResource x:Key="StyleBrush" ResourceKey="RedBrush"/>
      </Style.Resources>
    </Style>
    <Style x:Key="BlueStyle" BasedOn="{StaticResource BaseStyle}" TargetType="Button">
      <Style.Resources>
        <StaticResource x:Key="StyleBrush" ResourceKey="BlueBrush"/>
      </Style.Resources>
    </Style>
  </Page.Resources>
  <StackPanel>
    <Button Content="Test" Style="{StaticResource RedStyle}"/>
    <Button Content="Test" Style="{StaticResource BlueStyle}"/>
  </StackPanel>
</Page>