2种Switch样式

登录

Switch 的控件其实有很多现成的，但是这次遇到了要把字体放里边，而后又要求改成圆角的，分享出来大家拿来直接用吧，基于CheckBox 改的样式

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnChecking" />
<Storyboard x:Key="OnUnchecking" />
</ControlTemplate.Resources>
<DockPanel x:Name="dockPanel">
<ContentPresenter x:Name="contentPresenter"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Grid Width="70" Height="30">
<Grid Margin="5">
<Grid>
<TextBlock x:Name="OnTextBlock"
Margin="0,0,8,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Panel.ZIndex="1"
Foreground="White"
Text="已开启"
Visibility="Collapsed" />
<TextBlock x:Name="OffTextBlock"
Margin="8,0,0,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Panel.ZIndex="1"
Foreground="White"
Text="已关闭"
Visibility="Visible" />
<Path x:Name="OffRectangle"
Data="M9.99953079223633,0L10,1.2516975402832E-05 49.9995307922363,0 50,0 50.5132293701172,0.0130373239517212C55.7882423400879,0.281379029154778 60,4.65831650793552 60,10.0004428774118 60,15.3416608721018 55.7882423400879,19.7186187654734 50.5132293701172,19.9869636446238L50,19.9999889284372 49.9995307922363,20.000000372529 10,20.000000372529 9.99953079223633,20.000000372529C4.48505210876465,20.000000372529 -1.04166664589195E-07,15.5139593034983 1.81447628664201E-15,10.0004428774118 -1.04166664589195E-07,4.48598946630955 4.48505210876465,3.20445696644356E-07 9.99953079223633,0z"
Fill="#FFA59F93" />
<Path x:Name="OnRectangle"
Data="M9.99953079223633,0L10,1.2516975402832E-05 49.9995307922363,0 50,0 50.5132293701172,0.0130373239517212C55.7882423400879,0.281379029154778 60,4.65831650793552 60,10.0004428774118 60,15.3416608721018 55.7882423400879,19.7186187654734 50.5132293701172,19.9869636446238L50,19.9999889284372 49.9995307922363,20.000000372529 10,20.000000372529 9.99953079223633,20.000000372529C4.48505210876465,20.000000372529 -1.04166664589195E-07,15.5139593034983 1.81447628664201E-15,10.0004428774118 -1.04166664589195E-07,4.48598946630955 4.48505210876465,3.20445696644356E-07 9.99953079223633,0z"
Fill="#FF69C112"
Visibility="Collapsed" />
</Grid>
<Ellipse x:Name="slider"
Width="20"
Height="20"
HorizontalAlignment="Left"
Fill="#F6F7F6" />
</Grid>
</Grid>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="OnUnchecking_BeginStoryboard" Storyboard="{StaticResource OnUnchecking}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="OnChecking_BeginStoryboard" Storyboard="{StaticResource OnChecking}" />
</Trigger.EnterActions>
<Setter TargetName="OffTextBlock" Property="Visibility" Value="Collapsed" />
<Setter TargetName="OnRectangle" Property="Visibility" Value="Visible" />
<Setter TargetName="slider" Property="HorizontalAlignment" Value="Right" />
<Setter TargetName="OnTextBlock" Property="Panel.ZIndex" Value="1" />
<Setter TargetName="OnTextBlock" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

复制代码

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnChecking"/>
<Storyboard x:Key="OnUnchecking"/>
</ControlTemplate.Resources>
<DockPanel x:Name="dockPanel">
<ContentPresenter VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" x:Name="contentPresenter" ContentStringFormat="{TemplateBinding ContentStringFormat}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Grid Height="35" Width="70">
<Grid Margin="5">
<Border BorderBrush="#FFA59F93" BorderThickness="2">
<Grid Margin="2">
<TextBlock Panel.ZIndex="1" VerticalAlignment="Center" Visibility="Collapsed" Text="On" x:Name="OnTextBlock" Margin="0,0,3,0" HorizontalAlignment="Left"/>
<TextBlock Panel.ZIndex="1" VerticalAlignment="Center" Visibility="Visible" Text="Off" x:Name="OffTextBlock" Margin="3,0,0,0" HorizontalAlignment="Right"/>
<Rectangle Fill="#FFA59F93" x:Name="OffRectangle"/>
<Rectangle Fill="#CC119EDA" x:Name="OnRectangle" Visibility="Collapsed"/>
</Grid>
</Border>
<Rectangle Width="13" x:Name="slider" HorizontalAlignment="Left" Fill="Black"/>
</Grid>
</Grid>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Value="True" Property="IsChecked">
<Trigger.ExitActions>
<BeginStoryboard x:Name="OnUnchecking_BeginStoryboard" Storyboard="{StaticResource OnUnchecking}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="OnChecking_BeginStoryboard" Storyboard="{StaticResource OnChecking}"/>
</Trigger.EnterActions>
<Setter Property="Visibility" TargetName="OffTextBlock" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="OnRectangle" Value="Visible"/>
<Setter Property="HorizontalAlignment" TargetName="slider" Value="Right"/>
<Setter Property="Panel.ZIndex" TargetName="OnTextBlock" Value="1"/>
<Setter Property="Visibility" TargetName="OnTextBlock" Value="Visible"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

复制代码

Alice · Alice

回复 1楼visualmaster的帖子

谢谢反馈。
给以后使用的用户提供相关思路。
奖励金币。

		自动登录	找回密码
密码			立即注册

[WPF] 2种Switch样式

本帖子中包含更多资源

评分

1 个回复

活字格认证

微信认证勋章

元老葡萄