I want a checkbox that is invisible in its unchecked state. While unchecked, hovering the mouse over it will cause it to animate to 0.3 transparency.
When the mouse pointer leaves the checkbox and if it is still unchecked, it animates back to 0 transparency.
When checked, it will be at fully visible, ie. transparency = 1.
All my attempts so far have been unsuccessful, I think due to the mouse-over rule. When my checkbox becomes checked, the mouse-over still causes a fade to 0.3 and on mouse-leave, it becomes invisible.
I tried using triggers, multitriggers, the VSM, but I can’t figure out how to code the behaviour I want without conflicts.
Code:
Here is the Triggers approach. It’s gone through so many iterations, I can’t even remember if this was my initial approach.
I also have a VSM approach, just say if you want the code for that one too.
Control Template (I took the sample provided in MSDN and just modified it)
<Style x:Key="{x:Type CheckBox}"
TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="FocusVisualStyle"
Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Border x:Name="Border"
Width="80"
Height="80"
CornerRadius="0"
BorderThickness="1">
<Grid>
<Path Visibility="Visible"
Width="100"
Height="100"
x:Name="CheckBorder"
SnapsToDevicePixels="False"
StrokeThickness="9"
Opacity="0"
Data="M 0 30 C 2,29 10,30 14,39 M 15,40 C 5,31 55,10 45,20 ">
<Path.Stroke>
<SolidColorBrush Color="Black" />
</Path.Stroke>
</Path>
<Path Visibility="Visible"
Width="100"
Height="100"
x:Name="CheckMark"
Opacity="0"
SnapsToDevicePixels="False"
StrokeThickness="6"
Data="M 1 30 C 2,29 10,30 14,39 M 15,39 C 5,31 55,10 45,20 ">
<Path.Stroke>
<SolidColorBrush Color="#FF0C9D0C" />
</Path.Stroke>
</Path>
<Path Visibility="Collapsed"
Width="100"
Height="100"
x:Name="InderminateMark"
SnapsToDevicePixels="False"
StrokeThickness="5"
Data="M 0 0 L 50 50">
<Path.Stroke>
<SolidColorBrush Color="{DynamicResource GlyphColor}" />
</Path.Stroke>
</Path>
</Grid>
</Border>
</BulletDecorator.Bullet>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckBorder" To="0.3" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" To="0.3" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckBorder" To="0" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" To="0" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="CheckBorder" Value="1"/>
<Setter Property="Opacity" TargetName="CheckMark" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Declaration
<CheckBox Width="100" Height="100">Hello</CheckBox>
Well, I just went with a somewhat diabolical workaround. The mouse-over stuff works with a dummy background Path/image, while the check & uncheck work with the main Path/image.
Kaxaml Code dump: