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:
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!