Let's see the effect first:
Effect when isChecked = false
Effect when isChecked = true
Then let's realize the effect
Step 1: Create an empty wpf project;
Step 2: Add a checkbox inside the project
<Grid>
<CheckBox HorizontalAlignment="Center" IsChecked="True"
BorderBrush="Black" VerticalAlignment="Center"
Content="switch" Background="#FF00ADFF"/>
</Grid>
At this point the checkbox looks like this
Step 3: Right click on the checkbox in the page and selectEdit Template once againEdit Copy, then OK
vsIt will then automatically generate a file for us called”CheckBoxStyle1” (used form a nominal expression)CheckboxThe code for the default style of the,We changed the default style code by modifying the normalCheckboxTurn it into a switch.
Step 4: Modify the default style
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True"> <> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </> <Border x:Name="PART_Border" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="1" Height="14" Width="25" CornerRadius="5"> <Border x:Name="SwitchBorder" BorderThickness="1" BorderBrush="Gray" Background="White" Width="10" Margin="1" CornerRadius="5" HorizontalAlignment="Right"/> </Border> <ContentPresenter x:Name="contentPresenter" ="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid>
Change the previous style code to the above code, the trigger part, and delete all the parts that report errors.
At this point, our switch style is complete
We now need to add some triggers and animations to achieve the switching effect
Step 5: Add animation and trigger
<Storyboard x:Key="SwitchChecked"> <DoubleAnimationUsingKeyFrames ="SwitchBorder" ="()"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/> <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="20"/> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="10"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames ="SwitchBorder" ="()"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static }"/> <DiscreteObjectKeyFrame KeyTime="00:00:00.2500000" Value="{x:Static }"/> <DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static }"/> </ObjectAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SwitchUnchecked"> <DoubleAnimationUsingKeyFrames ="SwitchBorder" ="()"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/> <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="20"/> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="10"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames ="SwitchBorder" ="()"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static }"/> <DiscreteObjectKeyFrame KeyTime="00:00:00.2500000" Value="{x:Static }"/> <DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static }"/> </ObjectAnimationUsingKeyFrames> </Storyboard>
This code above is to represent different animation effects in different states, which can be realized by changing the width and alignment of the SwitchBoder
Then we apply this animation effect to the template, and then add three triggers, and you're done!
<>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<EventTrigger RoutedEvent="{x:Static }">
<BeginStoryboard Storyboard="{StaticResource SwitchChecked}"/>
</EventTrigger>
<EventTrigger RoutedEvent="{x:Static }">
<BeginStoryboard Storyboard="{StaticResource SwitchUnchecked}"/>
</EventTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="PART_Border" Value="{StaticResource }"/>
<Setter Property="BorderBrush" TargetName="PART_Border" Value="{StaticResource }"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="White" TargetName="PART_Border"/>
<Setter Property="HorizontalAlignment" Value="Left" TargetName="SwitchBorder"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="PART_Border" Value="{StaticResource }"/>
</Trigger>
</>
By now, the style and animation has been completed, we then cut all the code to the project resource file below.And then delete it.stylegiven name,x:Key="CheckBoxStyle1"Delete.
This way our project inside thecheckboxIt'll all be switch style.Run the project will not report errors, the final code is as follows
<>
<Storyboard x:Key="SwitchChecked">
<DoubleAnimationUsingKeyFrames ="SwitchBorder" ="()">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="20"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="10"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames ="SwitchBorder" ="()">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static }"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2500000" Value="{x:Static }"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static }"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SwitchUnchecked">
<DoubleAnimationUsingKeyFrames ="SwitchBorder" ="()">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="20"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="10"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames ="SwitchBorder" ="()">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static }"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2500000" Value="{x:Static }"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static }"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="FocusVisual">
<Setter Property="">
<>
<ControlTemplate>
<Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static }}" SnapsToDevicePixels="true" StrokeThickness="1"/>
</ControlTemplate>
</>
</Setter>
</Style>
<Style x:Key="OptionMarkFocusVisual">
<Setter Property="">
<>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static }}" SnapsToDevicePixels="true" StrokeThickness="1"/>
</ControlTemplate>
</>
</Setter>
</Style>
<SolidColorBrush x:Key="" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="" Color="#FF707070"/>
<SolidColorBrush x:Key="" Color="#FF212121"/>
<SolidColorBrush x:Key="" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="" Color="#FF5593FF"/>
<SolidColorBrush x:Key="" Color="#FF212121"/>
<SolidColorBrush x:Key="" Color="#FFD9ECFF"/>
<SolidColorBrush x:Key="" Color="#FF3C77DD"/>
<SolidColorBrush x:Key="" Color="#FF212121"/>
<SolidColorBrush x:Key="" Color="#FFE6E6E6"/>
<SolidColorBrush x:Key="" Color="#FFBCBCBC"/>
<SolidColorBrush x:Key="" Color="#FF707070"/>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource }"/>
<Setter Property="BorderBrush" Value="{StaticResource }"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static }}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</>
<Border x:Name="PART_Border" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"
BorderThickness="1" Height="14" Width="25" CornerRadius="5">
<Border x:Name="SwitchBorder" BorderThickness="1" BorderBrush="Gray" Background="White" Width="10"
Margin="1" CornerRadius="5" HorizontalAlignment="Right"/>
</Border>
<ContentPresenter x:Name="contentPresenter" ="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<EventTrigger RoutedEvent="{x:Static }">
<BeginStoryboard Storyboard="{StaticResource SwitchChecked}"/>
</EventTrigger>
<EventTrigger RoutedEvent="{x:Static }">
<BeginStoryboard Storyboard="{StaticResource SwitchUnchecked}"/>
</EventTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="PART_Border" Value="{StaticResource }"/>
<Setter Property="BorderBrush" TargetName="PART_Border" Value="{StaticResource }"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="White" TargetName="PART_Border"/>
<Setter Property="HorizontalAlignment" Value="Left" TargetName="SwitchBorder"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="PART_Border" Value="{StaticResource }"/>
</Trigger>
</>
</ControlTemplate>
</>
</Setter>
</Style>
</>
Here's the ad.
Project github address:bearhanQ/WPFFramework: Share some experience ()
QQ technical exchange group: 332035933;