Skip to content

Instantly share code, notes, and snippets.

@Platonenkov
Created May 8, 2021 16:29
Show Gist options
  • Save Platonenkov/d6aa5e7aa93a97f548423edc21abbbdb to your computer and use it in GitHub Desktop.
Save Platonenkov/d6aa5e7aa93a97f548423edc21abbbdb to your computer and use it in GitHub Desktop.
Toggle Button CheckBox style
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="WhiteBrush" Color="White" p:Freeze="True"/>
<!--форма переключателя-->
<ControlTemplate x:Key="ToggleButtonCheckBoxTemplate" TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<SolidColorBrush x:Key="ToggleButton.CheckedBackgroundBrush" p:Freeze="true">DarkBlue</SolidColorBrush>
<SolidColorBrush x:Key="ToggleButton.UnCheckedBackgroundBrush" p:Freeze="true">DarkGray</SolidColorBrush>
</ControlTemplate.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid x:Name="Conteiner"
Height="18"
Width="33.3"
Margin="0"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<Border x:Name="Back"
ClipToBounds="True"
Height="17.5"
Width="32"
HorizontalAlignment="Left"
VerticalAlignment="Top"
CornerRadius="9">
<Ellipse x:Name="Dot"
Fill="{StaticResource WhiteBrush}"
Height="16"
Width="16"
HorizontalAlignment="Center"
VerticalAlignment="Center">
</Ellipse>
</Border>
</Grid>
<ContentPresenter x:Name="content"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Dot" Property="IsMouseOver" Value="True">
<Setter TargetName="Dot" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="1" BlurRadius="2"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Dot" Property="Margin" Value="0, 0, -14, 0"/>
<Setter TargetName="Back" Property="Background" Value="{StaticResource ToggleButton.CheckedBackgroundBrush}"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="Dot" Property="Margin" Value="-14, 0, 0, 0"/>
<Setter TargetName="Back" Property="Background" Value="{StaticResource ToggleButton.UnCheckedBackgroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ToggleButtonCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Padding" Value="5,0,0,0"/>
<Setter Property="Template" Value="{StaticResource ToggleButtonCheckBoxTemplate}"/>
</Style>
<!--конец стиля переключателя-->
</ResourceDictionary>
@Platonenkov
Copy link
Author

Toggle checkbox

@dfgs
Copy link

dfgs commented Jan 17, 2023

Nice template, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment