WPF-slider switch CheckBox (horizontal solid example)

Vertical slider effect of CheckBox

The code is as follows:

Copy code

<Style TargetType = "{x: Type CheckBox}"> <Setter Property = "Foreground" Value = "White"/> <Setter Property = "Padding" Value = "2"/> <Setter Property = "Template"> <Setter. Value> <ControlTemplate TargetType = "{x: Type CheckBox}"> <Border BorderThickness = "1" Height = "Auto" Width = "Auto" CornerRadius = "2" Margin = "0" BorderBrush = "Black"> <StackPanel> <! -- Text in the upper part --> <Border x: Name = "PART_UPC" Height = "Auto" Width = "Auto" CornerRadius = "2" Margin = "1.3" Padding = ""> <TextBlock Text = "part 1" FontSize = "12" HorizontalAlignment = "Center" verticalignment = "Center"/> </Border> <! -- End: the upper part of the text --> <! -- Text in the lower half --> <Border x: Name = "PART_DWC" Height = "Auto" Width = "Auto" CornerRadius = "2" Margin = "1.3" Padding = ""> <TextBlock Text = "part 2" FontSize = "12" HorizontalAlignment = "Center" verticalignment = "Center"/> </Border> <! -- End: text in the lower half --> </StackPanel> </Border> <ControlTemplate. Triggers> <Trigger Property = "IsChecked" Value = "True"> <Setter TargetName = "PART_UPC" Property = "Background" Value = "#997CFC00"/> </Trigger> <Trigger Property = "IsChecked" Value = "False"> <Setter TargetName = "PART_DWC" Property = "Background" Value = "#997CFC00"/> </Trigger> </ControlTemplate. Triggers> </ControlTemplate> </Setter. Value> </Setter> </Style>

Instance 2 slider-based CheckBox

 

The code is as follows:

Copy code

<Style x: Key = "CheckStyle" TargetType = "{x: Type CheckBox}"> <Setter Property = "Height" Value = "18"/> <Setter Property = "Foreground" Value = "White"/> <Setter Property = "FontWeight" Value = "Bold"/> <Setter Property = "Template"> <Setter. Value> <ControlTemplate TargetType = "{x: Type CheckBox}"> <Border x: Name = "ForegroundPanel" CornerRadius = "2" BorderBrush = "Black" BorderThickness = "1" Padding = "0"> <DockPanel> <TextBlock x: Name = "Content" HorizontalAlignment = "Left" verticalignment = "Center" Margin = "2,0"/> <Border x: name = "CheckFlag" HorizontalAlignment = "Right" VerticalAlignment = "Center" CornerRadius = "2" BorderThickness = "0" Width = "18" Height = "16"/> </DockPanel> </Border> <ControlTemplate. Triggers> <Trigger Property = "IsChecked" Value = "True"> <Setter TargetName = "Content" Property = "Text" Value = "Open"/> <Setter TargetName = "ForegroundPanel" Property = "Background"> <Setter. Value> <LinearGradientBrush StartPoint = "0, 0" EndPoint = "0, 1"> <GradientStop Color = "Gray" Offset = "0.0"/> <GradientStop Color = "Green" Offset = "0.5"/> <GradientStop Color = "Gray" Offset = "1"/> </LinearGradientBrush> </Setter. Value> </Setter> <Setter TargetName = "CheckFlag" Property = "Background"> <Setter. Value> <LinearGradientBrush StartPoint = "0, 0" EndPoint = "0, 1"> <GradientStop Color = "WhiteSmoke" Offset = "0.0"/> <GradientStop Color = "Green" Offset = "0.5"/> <GradientStop Color = "WhiteSmoke" Offset = "1"/> </LinearGradientBrush> </Setter. Value> </Setter> <Setter TargetName = "Content" Property = "DockPanel. Dock" Value = "Left"/> <Setter TargetName = "CheckFlag" Property = "DockPanel. Dock" Value = "Right"/> </Trigger> <Trigger Property = "IsChecked" Value = "False"> <Setter TargetName = "Content" Property = "Text" Value = ""/> <Setter TargetName = "ForegroundPanel" Property = "Background"> <Setter. Value> <LinearGradientBrush StartPoint = "0, 0" EndPoint = "0, 1"> <GradientStop Color = "Gray" Offset = "0.0"/> <GradientStop Color = "Silver" Offset = "0.5"/> <GradientStop Color = "Gray" Offset = "1"/> </LinearGradientBrush> </Setter. Value> </Setter> <Setter TargetName = "CheckFlag" Property = "Background"> <Setter. Value> <LinearGradientBrush StartPoint = "0, 0" EndPoint = "0, 1"> <GradientStop Color = "WhiteSmoke" Offset = "0.0"/> <GradientStop Color = "Silver" Offset = "0.5"/> <GradientStop Color = "WhiteSmoke" Offset = "1"/> </LinearGradientBrush> </Setter. Value> </Setter> <Setter TargetName = "Content" Property = "DockPanel. Dock" Value = "Right"/> <Setter TargetName = "CheckFlag" Property = "DockPanel. Dock" Value = "Left"/> </Trigger> </ControlTemplate. Triggers> </ControlTemplate> </Setter. Value> </Setter> </Style>

Call

The code is as follows:	Copy code
<CheckBox Style = "{StaticResource CheckStyle}"/>