1

I am really new to WPF and i was working on making a legend which has rectangles and information. Here is an example of the Legend

here is the xmal

        <ItemsControl Name="icColorInfo" ItemsSource="{Binding m_legendInfo}" 
                  BorderBrush="DarkBlue" BorderThickness="2">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Margin="2,2,2,2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="0" Height="25" Width="30" Fill="{Binding Color}"></Rectangle>
                    <TextBlock Grid.Column="1" Text="{Binding Info}"></TextBlock>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

The rectangle Fill binds to the color property of my legend class and the textblock binds to the info property

Now what i want to do is, if the legend "Info" entry equals "Empty", i want the rectangle to have a dashed border (maybe set the Stroke property or something)

How can i bind to a specific item without affecting other items?

mit
  • 99
  • 2
  • 8

2 Answers2

6

A simple DataTrigger in the ItemTemplate can do that for you:

<ItemsControl.ItemTemplate>
  <DataTemplate>
    <Grid Margin="2,2,2,2">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Rectangle x:Name="rect" Height="25" Width="30" Fill="{Binding Color}" />
      <TextBlock Grid.Column="1" Text="{Binding Info}" />
    </Grid>
    <DataTemplate.Triggers>
      <DataTrigger Binding="{Binding Info}" Value="">
        <Setter TargetName="rect" Property="StrokeThickness" Value="1" />
        <Setter TargetName="rect" Property="Stroke" Value="Black" />
        <Setter TargetName="rect" Property="StrokeDashArray" Value="2 2" />
      </DataTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>
</ItemsControl.ItemTemplate>

You can adjust the stroke brush, thickness, and dash array until it looks right to you. The stroke dash array is encoded as a sequence of pairs: the length of dash followed by the length of the space. You can include as many as you like, but a single pair is all you need for a simple dashed or dotted pattern.

Note that you should generally not hard-code colors and brushes. For Stroke, I'd recommend you use {DynamicResource {x:Static SystemColors.WindowTextBrushKey}} or something similar.

Mike Strobel
  • 25,075
  • 57
  • 69
  • Thanks Mike, I was trying to do something like that but i couldnt figure out how. Still new to this. The solution u provided works for my needs. Thanks – mit Jan 11 '18 at 18:47
  • Glad I was able to help :). FYI, if you are satisfied with an answer on Stack Overflow, it is customary mark it as accepted (and upvote it, if you like) so that the responder is awarded reputation points. – Mike Strobel Jan 11 '18 at 20:05
  • 1
    Some nitpicking: The question asks for changing the Border if `Info` equals `"Empty"`, not an empty string `""`... although this may as well be what was actually meant. – MaSiMan Jan 11 '18 at 20:34
0

You basically need Style.Triggers

 <Style x:Key="RectangleStyle">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Info}" Value="empty">
                <Setter Property="Foreground" Value="Blue" />                  
            </DataTrigger>
            <DataTrigger Binding="{Binding Info}" Value="full">
                  <Setter Property="Foreground" Value="Red" /> 
            </DataTrigger>
        </Style.Triggers>
    </Style>

And use above Style Trigger as follows

<Rectangle Grid.Column="0" Height="25" Width="30" Style="{StaticResource RectangleStyle}"></Rectangle>

This will check value of info and sets Color accordingly.You might need to update a bit as above code is not tested. Hopefully this will be helpful.

Ehsan Ullah Nazir
  • 1,827
  • 1
  • 14
  • 20