Resources/XAML/ResourceDictionaries/CustomCheckBoxTemplate.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Begin Check box styles --> <ControlTemplate x:Key="CustomCheckBoxTemplate" TargetType="{x:Type CheckBox}"> <StackPanel Orientation="Horizontal" Margin="0,2.5,0,2.5"> <!-- Grid to contain the ellipses --> <Grid Width="20" Height="20"> <!-- Outer Ellipse (Border) with pink stroke and white fill --> <Ellipse x:Name="BorderEllipse" Stroke="#FFF485F0" StrokeThickness="1" Fill="White" Width="20" Height="20"> <Ellipse.Effect> <DropShadowEffect ShadowDepth="0" Direction="0" Color="#FFF485F0" Opacity="1" BlurRadius="6" RenderingBias="Quality"/> </Ellipse.Effect> </Ellipse> <!-- Inner Ellipse (Indicator) --> <Ellipse x:Name="IndicatorEllipse" Fill="#FFA91BEF" Width="15" Height="15" Visibility="Collapsed"/> </Grid> <!-- ContentPresenter for the text --> <ContentPresenter Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left"> <!-- Apply a style trigger for IsEnabled --> <ContentPresenter.Style> <Style TargetType="{x:Type ContentPresenter}"> <Style.Triggers> <Trigger Property="IsEnabled" Value="False"> <!-- Set the text color to gray when not enabled --> <Setter Property="TextElement.Foreground" Value="Gray"/> <!-- apply a blur effect to the text --> <Setter Property="Effect"> <Setter.Value> <BlurEffect Radius="2"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </ContentPresenter.Style> </ContentPresenter> </StackPanel> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="true"> <!-- Show the inner ellipse when checked --> <Setter TargetName="IndicatorEllipse" Property="Visibility" Value="Visible"/> </Trigger> <Trigger Property="IsChecked" Value="false"> <!-- Hide the inner ellipse when unchecked --> <Setter TargetName="IndicatorEllipse" Property="Visibility" Value="Collapsed"/> </Trigger> <!-- New trigger for IsEnabled --> <Trigger Property="IsEnabled" Value="False"> <!-- Change the color of the BorderEllipse when not enabled --> <Setter TargetName="BorderEllipse" Property="Fill" Value="Gray"/> <!-- Hide the IndicatorEllipse when not enabled --> <Setter TargetName="IndicatorEllipse" Property="Visibility" Value="Collapsed"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <!-- End Check box styles --> </ResourceDictionary> |