I am trying to use DataTriggers to control the colour of a checkbox in WPF. So that depending upon the state of a field in my ViewModel the tick will render as different colours.
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10, 0"
Text="{Binding ElementName=Window, Path=Test}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Window, Path=Test }" Value="1">
<Setter Property="Foreground" Value="DarkRed"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=Window, Path=Test }" Value="2">
<Setter Property="Foreground" Value="DarkGreen"></Setter>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=Window, Path=Test }" Value="3"></Condition>
<Condition Binding="{Binding ElementName=Window, Path=Test }" Value="4"></Condition>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Foreground" Value="DarkGray"></Setter>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
The code I am currently using to change the style on a TextBox and I am looking to apply similar logic to the checkbox. I know you can edit the underlying control template, but that only allows you to set the colour once⦠if I am understanding it correctly:
<CheckBox>
<CheckBox.Style>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Background" Value="White" />
<Setter Property="BorderBrush" Value="#FF262E34"/>
<Setter Property="Foreground" Value="#FF262E34"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
<Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Width="15" Height="15">
<!-- your color here -->
<Path Stretch="Uniform" Width="15" Height="10" Fill="HotPink" Name="eliCheck" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Visibility="Collapsed"/>
</Border>
<TextBlock Margin="5,0,0,0" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}"></TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#FF9C9E9F" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="LightGray" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray"/>
<Setter TargetName="eliCheck" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="eliCheck" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CheckBox.Style>
</CheckBox>
At the moment, I can't even tell if what I am trying to achieve is possible without the use of "smoke and mirrors".
The only other thing I can think of is building the control manually in the view model and passing it because they are "readonly" items at the moment. So being able to respond to "onClick" event's etc is a moot point.