visualmaster 发表于 2015-9-15 17:07:00

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">
                              <!--<Border BorderBrush="#FFA59F93" BorderThickness="2">-->
                              <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>
                              <!--</Border>-->
                              <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 发表于 2015-9-15 17:48:00

回复 1楼visualmaster的帖子

谢谢反馈。
给以后使用的用户提供相关思路。
奖励金币。
页: [1]
查看完整版本: 2种Switch样式