之前做了一个横向的滑块效果,《WPF:CheckBox滑块效果》,其实我觉得那个不好看,今天又做了一个竖向的玩。
1 <Style TargetType="{x:Type CheckBox}">
2 <Setter Property="Foreground" Value="White"/>
3 <Setter Property="Padding" Value="2"/>
4 <Setter Property="Template">
5 <Setter.Value>
6 <ControlTemplate TargetType="{x:Type CheckBox}">
7 <Border BorderThickness="1" Height="Auto" Width="Auto" CornerRadius="2" Margin="0" BorderBrush="Black">
8 <StackPanel>
9 <!-- 上半部分的文字 -->
10 <Border x:Name="PART_UPC" Height="Auto" Width="Auto" CornerRadius="2" Margin="1.3" Padding="5,2">
11 <TextBlock Text="上部分" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
12 </Border>
13 <!--end:上半部分的文字-->
14 <!-- 下半部分的文字 -->
15 <Border x:Name="PART_DWC" Height="Auto" Width="Auto" CornerRadius="2" Margin="1.3" Padding="5,2">
16 <TextBlock Text="下部分" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
17 </Border>
18 <!--end:下半部分的文字-->
19 </StackPanel>
20 </Border>
21 <ControlTemplate.Triggers>
22 <Trigger Property="IsChecked" Value="True">
23 <Setter TargetName="PART_UPC" Property="Background" Value="#997CFC00"/>
24 </Trigger>
25 <Trigger Property="IsChecked" Value="False">
26 <Setter TargetName="PART_DWC" Property="Background" Value="#997CFC00"/>
27 </Trigger>
28 </ControlTemplate.Triggers>
29 </ControlTemplate>
30 </Setter.Value>
31 </Setter>
32 </Style>