现在位置首页 / 项目实战 /正文

wpf控件--自定义Checkbox样式:开关样式

作者: IT小兵 | 2014年10月31日| 热度:℃ | 评论: |参与:

在[wpf教程-自定义样式的checkbox开关控件]中分享了一个比较简单的checkbox自定义样式。今天继续分享一个自定义Checkbox样式:开关样式。

先上效果图:  

 

WPF提供了样式、模板、触发器、状态管理、矢量形状等方式,让我们不需要背景图片,也可以轻松定制控件的风格样式。下面是笔者针对Checkbox进行的样式定制,让“正确”绿得好看,让“错误”红的显眼。

    本文提供了两种风格,如果不是很适应自己系统的整体风格,可以对样式代码进行修改。

    源代码:http://download.csdn.net/download/wadexmy/8099685

(1)普通风格

 

样式资源代码:

<Style x:Key="CheckStyle1" TargetType="{x:Type CheckBox}">
              <Setter Property="Height" Value="40"/>
              <Setter Property="Width" Value="70"/>
              <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="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
                              <DockPanel>
                                  <Border x:Name="CheckFlag"  HorizontalAlignment="Left" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
                                      <Grid>
                                          <Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False"  StrokeThickness="2"
                                                Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
                                          </Path>
                                          <Path Visibility="Collapsed"  Width="20"  Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
                                                Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
                                          </Path>
                                      </Grid>
                                  </Border>
 
                                  <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                              </DockPanel>
                              <VisualStateManager.VisualStateGroups>
                                  <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Normal" />
                                      <VisualState x:Name="MouseOver"></VisualState>
                                      <VisualState x:Name="Pressed"></VisualState>
                                      <VisualState x:Name="Disabled" />
                                  </VisualStateGroup>
                                  <VisualStateGroup x:Name="CheckStates">
                                      <VisualState x:Name="Checked">
                                          <Storyboard>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Unchecked">
                                          <Storyboard>
                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                              </ObjectAnimationUsingKeyFrames>
                                          </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Indeterminate"></VisualState>
                                  </VisualStateGroup>
                              </VisualStateManager.VisualStateGroups>
                          </Border>
 
                          <ControlTemplate.Triggers>
                              <Trigger Property="IsChecked" Value="True">
                                  <Setter TargetName="ForegroundPanel" Property="Background">
                                      <Setter.Value>
                                          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                              <GradientStop Color="#89b601" Offset="0.0"/>
                                              <GradientStop Color="#73a80c" Offset="1"/>
                                          </LinearGradientBrush>
                                      </Setter.Value>
                                  </Setter>
                                  <Setter TargetName="Content" Property="Text" Value="正确"/>
                                  <Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
                                  <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                  <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                              </Trigger>
 
                              <Trigger Property="IsChecked" Value="False">
                                  <Setter TargetName="ForegroundPanel" Property="Background">
                                      <Setter.Value>
                                          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                              <GradientStop Color="#edb200" Offset="0.0"/>
                                              <GradientStop Color="#ed9e00" Offset="1"/>
                                          </LinearGradientBrush>
                                      </Setter.Value>
                                  </Setter>
                                  <Setter TargetName="Content" Property="Text" Value="错误"/>
                                  <Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></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>

xaml中调用:

<CheckBox Style="{StaticResource CheckStyle1}"/>

(2)左右滑动风格

   

样式资源代码:

<Style x:Key="CheckStyle2" TargetType="{x:Type CheckBox}">
               <Setter Property="Height" Value="40"/>
               <Setter Property="Width" Value="120"/>
               <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="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
                               <DockPanel>
                                   <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                                   <Border x:Name="CheckFlag" HorizontalAlignment="Right" VerticalAlignment="Center" CornerRadius="10" BorderThickness="0" Width="20" Height="20">
                                       <Grid>
                                           <Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False"  StrokeThickness="2"
                                                 Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
                                           </Path>
                                           <Path Visibility="Collapsed"  Width="20"  Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
                                                 Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
                                           </Path>
                                       </Grid>
                                   </Border>
                               </DockPanel>
                               <VisualStateManager.VisualStateGroups>
                                   <VisualStateGroup x:Name="CommonStates">
                                       <VisualState x:Name="Normal" />
                                       <VisualState x:Name="MouseOver"></VisualState>
                                       <VisualState x:Name="Pressed"></VisualState>
                                       <VisualState x:Name="Disabled" />
                                   </VisualStateGroup>
                                   <VisualStateGroup x:Name="CheckStates">
                                       <VisualState x:Name="Checked">
                                           <Storyboard>
                                               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
                                                   <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                               </ObjectAnimationUsingKeyFrames>
                                           </Storyboard>
                                       </VisualState>
                                       <VisualState x:Name="Unchecked">
                                           <Storyboard>
                                               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
                                                   <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                               </ObjectAnimationUsingKeyFrames>
                                           </Storyboard>
                                       </VisualState>
                                       <VisualState x:Name="Indeterminate"></VisualState>
                                   </VisualStateGroup>
                               </VisualStateManager.VisualStateGroups>
                           </Border>
                            
                           <ControlTemplate.Triggers>
                               <Trigger Property="IsChecked" Value="True">
                                   <Setter TargetName="ForegroundPanel" Property="Background">
                                       <Setter.Value>
                                           <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                               <GradientStop Color="#89b601" Offset="0.0"/>
                                               <GradientStop Color="#73a80c" Offset="1"/>
                                           </LinearGradientBrush>
                                       </Setter.Value>
                                   </Setter>
                                   <Setter TargetName="Content" Property="Text" Value="正确"/>
                                   <Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
                                   <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                   <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                               </Trigger>
                                
                               <Trigger Property="IsChecked" Value="False">
                                   <Setter TargetName="ForegroundPanel" Property="Background">
                                       <Setter.Value>
                                           <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                               <GradientStop Color="#edb200" Offset="0.0"/>
                                               <GradientStop Color="#ed9e00" Offset="1"/>
                                           </LinearGradientBrush>
                                       </Setter.Value>
                                   </Setter>
                                   <Setter TargetName="Content" Property="Text" Value="错误"/>
                                   <Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
                                   <Setter TargetName="Content" Property="DockPanel.Dock" Value="Left"/>
                                   <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Right"/>
                               </Trigger>
                           </ControlTemplate.Triggers>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
           </Style>


主界面Checkbox控件对样式引用代码:

<CheckBox Style="{StaticResource CheckStyle2}"/>


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询