I'm implementing a template for ListBox's ItemTemplate and I have a quite simple compilation error, but I can't figure out what is the reason behind it. I'd like to know why there's this difference between Property="Panel.Background"
and Property="Background"
. The first variant gives no error and compiles well, while the latter produces compilation error:
Error MC4111 Cannot find the Trigger target 'ContentBorder'. (The target must appear before any Setters, Triggers, or Conditions that use it.)
Why DataTemplate's Trigger's Setter.TargetName property cannot find target with Property="Background"
, but can with Property="Panel.Background"
? I did not change the position of the trigger in the VisualTree (as in: I did not move the trigger further down the tree).
Sorry if this question was already answered elsewhere; I did my reasearch, but failed finding any answer related specifically to this question and result that I came up with.
Below is the complete XAML to reproduce this case.
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="ContentBorder" Value="DarkTurquoise" />
</Trigger>
</DataTemplate.Triggers>
<Border BorderThickness="1" CornerRadius="10" x:Name="ContentBorder">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Gray"/>
<GradientStop Offset="1" Color="Black"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="1" Color="Gray"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid>
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3" />
<Setter Property="Foreground" Value="White"/>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="Items" />
<ColumnDefinition Width="*" SharedSizeGroup="Items" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding StartTime, StringFormat={}Start time: {0:dd.MM.yyyy hh:mm:ss}}" />
<TextBlock
Grid.Row="0" Grid.Column="1" Text="{Binding SportTypeId, Converter={x:Static Converters:SportTypeCodeToTextConverter.Instance}}"
FontWeight="Bold" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Distance, StringFormat={}Distance: {0}}" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Duration, StringFormat={}Duration: {0:hh\\:mm\\:ss}}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>```
As far as I remember, the order of specifying the template and its triggers matters. Try this:
<DataTemplate>
<Border BorderThickness="1" CornerRadius="10" x:Name="ContentBorder">
<!--Filling in the template-->
</Border>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkTurquoise" TargetName="ContentBorder"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
And to clarify, just in case, Border inherits Background from Control.
Therefore, the full name of the property is Control.Background, but not Panel.Background.