1

I have a Grid and in it two Paths. When one style is applied on the Grid, the first Path should have some Data, and the second some other data. When the seconds style is applied, the first Path should have another Data, and the second Path should have another different Data. I wish to be able to set the Setter's target element name.

I tried the code below. I get two crosses instead of one triangle in the left and one cross in the right.

<Window x:Class="cs_wpf_test_2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:cs_wpf_test_2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="styleWithPlusSign" TargetType="Path">
            <Setter Property="Path.Data" Value="M 5,95 L 95,95 50,5 5,95"></Setter>
            <Setter Property="Path.Data" Value="M 50,10 L 50,10 L 50,90 M 10,50 L 90,50"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Path Stroke="Blue"
                Stretch="Fill"
                x:Name="MyFirstPath"
              Style="{StaticResource styleWithPlusSign}"
              />
        <Path Grid.Column="1" Stroke="Black"
                StrokeThickness="4"
                Stretch="Uniform"
                x:Name="MySecondPath"
              Style="{StaticResource styleWithPlusSign}"/>
    </Grid>
</Window>

actual result

I get the wished result using this inflexible code:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Path Stroke="Blue"
        Stretch="Fill"
        x:Name="MyFirstPath"
        Data="M 5,95 L 95,95 50,5 5,95"
        />
    <Path Grid.Column="1" Stroke="Black"
        StrokeThickness="4"
        Stretch="Uniform"
        x:Name="MySecondPath"
        Data="M 50,10 L 50,10 L 50,90 M 10,50 L 90,50"/>
</Grid>

Screenshot:

wished result

If I try to use TargetName attribute of the Setters I get errors:

XDG0029 | The name "MyFirstPath" is not recognized.

XDG0029 | The name "MySecondPath" is not recognized.

Update

I am sorry for the unclarity. I want 2 styles, e.g. styleWithPlusSign and styleWithMinusSign.

  • The styleWithPlusSign should set a triangle with a corner oriented up and a cross in the right.
  • The styleWithMinusSign should set a triangle with a corner oriented down and a minus sign (a line) in the right.
Community
  • 1
  • 1
silviubogan
  • 3,343
  • 3
  • 31
  • 57

1 Answers1

2

here is the solution with trigger: i just test if column number is 0, in this case i display a triangle, either a cross.

<Window.Resources>
    <Style x:Key="styleWithPlusSign" TargetType="Path">
        <Style.Triggers>
            <Trigger Property="Grid.Column" Value="0">
                <Setter  Property="Path.Data" Value="M 5,95 L 95,95 50,5 5,95"></Setter>
            </Trigger>
        </Style.Triggers>
        <Setter Property="Path.Data" Value="M 50,10 L 50,10 L 50,90 M 10,50 L 90,50"></Setter>
    </Style>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Path Grid.Column="0" Stroke="Blue"
          Stretch="Fill"
          x:Name="MyFirstPath"
          Style="{StaticResource styleWithPlusSign}"
    />
    <Path Grid.Column="1" Stroke="Black"
          StrokeThickness="4"
          Stretch="Uniform"
          x:Name="MySecondPath"
          Style="{StaticResource styleWithPlusSign}"/>
</Grid>


if you need to precise the column number for each path:

<Window.Resources>
    <Style x:Key="styleWithPlusSign" TargetType="Path">
        <Style.Triggers>
            <Trigger Property="Grid.Column" Value="0">
                <Setter  Property="Path.Data" Value="M 5,95 L 95,95 50,5 5,95"></Setter>
            </Trigger>
            <Trigger Property="Grid.Column" Value="1">
                <Setter Property="Path.Data" Value="M 50,10 L 50,10 L 50,90 M 10,50 L 90,50"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

enter image description here

Frenchy
  • 16,386
  • 3
  • 16
  • 39
  • I currently use a Binding in the MySecondPath element (`Style="{Binding ElementName=MyFirstPath, Path=Style}"` to set the style only once and achieve the same effects. Is there a more correct way? – silviubogan Apr 02 '19 at 15:41
  • if you have static resource its better to use it, less overhead than binding. but if you have not big amount of data in your view its not a problem. – Frenchy Apr 02 '19 at 15:46