Databases
StackOverflow2013
Postsdbo
POHow do I create a WPF CheckBox control template in XAML with the following requirements?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I create a WPF CheckBox control template in XAML with the following requirements?
    text
    copied!<p>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. </p> <p>When the mouse pointer leaves the checkbox and if it is still unchecked, it animates back to 0 transparency.</p> <p>When checked, it will be at fully visible, ie. transparency = 1.</p> <p>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.</p> <p>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.</p> <p><strong>Control Template</strong> (I took the sample provided in MSDN and just modified it)</p> <pre><code> &lt;Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt; &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt; &lt;Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type CheckBox}"&gt; &lt;BulletDecorator Background="Transparent"&gt; &lt;BulletDecorator.Bullet&gt; &lt;Border x:Name="Border" Width="80" Height="80" CornerRadius="0" BorderThickness="1"&gt; &lt;Grid&gt; &lt;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 "&gt; &lt;Path.Stroke&gt; &lt;SolidColorBrush Color="Black" /&gt; &lt;/Path.Stroke&gt; &lt;/Path&gt; &lt;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 "&gt; &lt;Path.Stroke&gt; &lt;SolidColorBrush Color="#FF0C9D0C" /&gt; &lt;/Path.Stroke&gt; &lt;/Path&gt; &lt;Path Visibility="Collapsed" Width="100" Height="100" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="5" Data="M 0 0 L 50 50"&gt; &lt;Path.Stroke&gt; &lt;SolidColorBrush Color="{DynamicResource GlyphColor}" /&gt; &lt;/Path.Stroke&gt; &lt;/Path&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/BulletDecorator.Bullet&gt; &lt;/BulletDecorator&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsMouseOver" Value="True"&gt; &lt;Trigger.EnterActions&gt; &lt;BeginStoryboard&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckBorder" To="0.3" Duration="0:0:0.1"/&gt; &lt;DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" To="0.3" Duration="0:0:0.1"/&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/Trigger.EnterActions&gt; &lt;Trigger.ExitActions&gt; &lt;BeginStoryboard&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckBorder" To="0" Duration="0:0:0.1"/&gt; &lt;DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" To="0" Duration="0:0:0.1"/&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/Trigger.ExitActions&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsChecked" Value="True"&gt; &lt;Setter Property="Opacity" TargetName="CheckBorder" Value="1"/&gt; &lt;Setter Property="Opacity" TargetName="CheckMark" Value="1"/&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p><strong>Declaration</strong></p> <pre><code>&lt;CheckBox Width="100" Height="100"&gt;Hello&lt;/CheckBox&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload