I am currently working on my own Themes for all the wpf controls. I can't really get the Checkbox Usercontrol working. I'm trying to get a smooth color fade in / fade out when checking the checkbox. This is the relevant part of my code in my ressource dictionary:
<Border x:Name="checkbox" CornerRadius="5" Width="18" Height="18" BorderThickness="1" BorderBrush="Black">
<!-- Checkmark -->
<TextBlock Text="" ClipToBounds="True" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Left"
Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
<Border.Style>
<Style TargetType="Border">
<!-- Animations (Color fade in and out) -->
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
The fade out works (Value=false), but the fade in never triggers. I added a "From" value to confirm / test this, it doesn't trigger at all. All help would be much appreciated!
Kind Regards
The proper way is to use the EnterAction
and ExitAction
of the Trigger
and to move the trigger from the Style
to the ControlTemplate
. Also note how the Border
properties are wired to the templated parent to allow local values having an effect.
<CheckBox IsChecked="True" BorderThickness="1" BorderBrush="Black">
<CheckBox.Template>
<ControlTemplate TargetType="CheckBox">
<Border x:Name="checkbox"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="5"
Width="18" Height="18" >
<!-- Checkmark -->
<TextBlock Text="" ClipToBounds="True" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Left"
Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>