Trigger BorderBrush based on boolean value in ItemSource

Viewed 28

I have a ItemsControl grid with a set of images. ItemSource is bound to a ObservableCollection that look like this:

public class Card
    {
        (...)
        public string Image_url_small { get; set; }
        public bool IsStarter = false;
        (...)
    }

On double click I have an event that changes IsStarter to true/false for every item with the same ID value - it works fine. Now from the UI side I would like to highlight each of the items with IsStarter = true using a red border. Something like this: enter image description here So I wrote it like this:

<ItemsControl Name="DeckBox" ItemsSource="{Binding Lst}">
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <StackPanel>
            <Border BorderThickness="2">
                <Border.Style>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsStarter}" Value="true">
                                <Setter Property="BorderBrush" Value="Red"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Image Source="{Binding Image_url_small}"
                       MouseRightButtonUp="Image_MouseRightButtonUp"
                       MouseLeftButtonDown="Image_MouseLeftButtonDown"
                       Stretch="Fill"/>
             </Border>
        </StackPanel>
    </DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="10"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

My plan was to set a transparent border for all IsStarter = false and a red one for all with value = true but unfortunately it does not work as intended and they stay transparent all the time. Any idea how to fix that? :)

Thx for help!

0 Answers
Related