conditional binding in wpf?

Question

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?

Mike Strobel · Accepted Answer · 2018-01-11 18:32:52Z

7

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.

answered Jan 11, 2018 at 18:32

Mike Strobel

25.7k61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mit Over a year ago

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

Mike Strobel Over a year ago

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.

MaSiMan Over a year ago

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.

Ehsan Ullah Nazir · Accepted Answer · 2018-01-11 18:45:04Z

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.

edited Jan 11, 2018 at 18:45

answered Jan 11, 2018 at 18:25

Ehsan Ullah Nazir

1,9371 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

conditional binding in wpf?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related