快捷導(dǎo)航

c# WPF中CheckBox樣式的使用總結(jié)

更新時(shí)間：2021年03月05日 11:09:56 作者：Hello 尋夢(mèng)者！

這篇文章主要介紹了c# WPF中CheckBox樣式的使用總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用c#，感興趣的朋友可以了解下

背景

　　很多時(shí)候我們使用WPF開(kāi)發(fā)界面的時(shí)候經(jīng)常會(huì)用到各種空間，很多時(shí)候我們需要去自定義控件的樣式來(lái)替換默認(rèn)的樣式，今天通過(guò)兩個(gè)方法來(lái)替換WPF中的CheckBox樣式，透過(guò)這兩個(gè)例子我們可以掌握基本的WPF樣式的開(kāi)發(fā)如何定義ControlTemplate以及使用附加屬性來(lái)為我們的控件增加新的樣式。

常規(guī)使用

　　我們?cè)谑褂肅heckBox的時(shí)候，原始的樣式有時(shí)不能滿足我們的需求，這是我們就需要更改其模板，比如我們常用的一種，在播放器中“播放”、“暫?！卑粹o，其實(shí)這也是一種CheckBox,只不過(guò)我們只是修改了其相關(guān)的模板罷了，下面貼出相關(guān)代碼：

<CheckBox.Style>
  <Style TargetType="{x:Type CheckBox}">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="IsTabStop" Value="False" />
    <!--把OverridesDefaultStyle設(shè)置為True，表示這個(gè)控件不使用當(dāng)前Themes的任何屬性。-->
    <Setter Property="OverridesDefaultStyle" Value="True" />
      <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
       <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
              <Grid Background="Transparent">
                   <Image Source="/EarthSimulation;component/Images/按鈕-播放.png"/>
              </Grid>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
      </Trigger>
      <Trigger Property="IsChecked" Value="False">
       <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid Background="Transparent">
                        <Image Source="/EarthSimulation;component/Images/按鈕-暫停.png"/>
                 </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </CheckBox.Style>
</CheckBox>

進(jìn)階用法

　　上面的使用較為簡(jiǎn)單，下面我們通過(guò)一個(gè)更加復(fù)雜一些的例子來(lái)增加對(duì)自定義控件模板的理解，我們先來(lái)看看我們定義的樣式。

<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
               <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
               <Setter Property="Background" Value="Transparent"/>
               <Setter Property="BorderBrush" Value="Transparent"/>
               <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="{x:Type CheckBox}">
                           <Border x:Name="templateRoot" Background="{TemplateBinding Background}" >
                               <Grid SnapsToDevicePixels="True">
                                   <Grid.Resources>
                                       <PathGeometry x:Key="geometryCheck" Figures="M540.5696 102.4c-225.83296 0-409.6 183.74656-409.6 409.6s183.76704 409.6 409.6 409.6c225.87392 0 409.6-183.74656 409.6-409.6S766.44352 102.4 540.5696 102.4zM721.16224 468.48l-175.37024 175.39072c-12.20608 12.1856-28.20096 18.28864-44.19584 18.28864-15.95392 0-31.96928-6.10304-44.15488-18.28864l-97.44384-97.44384c-24.39168-24.39168-24.39168-63.93856 0-88.33024 24.39168-24.41216 63.91808-24.41216 88.35072 0l53.248 53.248 131.23584-131.21536c24.35072-24.3712 63.95904-24.3712 88.33024 0C745.55392 404.52096 745.55392 444.08832 721.16224 468.48z"/>
                                   </Grid.Resources>
                                   <Grid.ColumnDefinitions>
                                       <ColumnDefinition Width="20"/>
                                       <ColumnDefinition Width="*"/>
                                       <ColumnDefinition Width="30"/>
                                   </Grid.ColumnDefinitions>
 
                                   <Border>
                                       <Path Width="18" Height="18" Stretch="Uniform"
                                             Data="{Binding (local_ctrl:GeometryAP.IconGeometry), RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type CheckBox}}}"
                                             Fill="{Binding (local_ctrl:GeometryAP.IconFill), RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type CheckBox}}}"/>
                                   </Border>
                                   <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False"
                                                 Margin="{TemplateBinding Padding}"
                                                 RecognizesAccessKey="True"
                                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                 HorizontalAlignment="Left"
                                                 VerticalAlignment="Center"/>
 
                                   <Border x:Name="checkBoxBorder"
                                       Grid.Column="2"
                                       Margin="1"
                                       BorderBrush="Transparent"
                                       BorderThickness="1"
                                       Background="Transparent"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Center">
 
                                       <Grid x:Name="markGrid">
                                           <Path x:Name="optionMark" Width="20" Height="20"
                                                 Stretch="Uniform"
                                                 Data="{StaticResource geometryCheck}"
                                                 Fill="LightSeaGreen" Margin="1" Opacity="0"/>
                                       </Grid>
                                   </Border>
                               </Grid>
                           </Border>
                           <ControlTemplate.Triggers>
                               <Trigger Property="HasContent" Value="true">
                                   <Setter Property="Padding" Value="4,-1,0,0"/>
                               </Trigger>
                               <Trigger Property="IsMouseOver" Value="true">
                                   <Setter Property="Cursor" Value="Hand"/>
                                   <Setter Property="Background" Value="#22222222"/>
                               </Trigger>
                               <Trigger Property="IsEnabled" Value="false">
                                   <Setter Property="Opacity" Value=".3"/>
                               </Trigger>
                               <Trigger Property="IsPressed" Value="true">
                                   <Setter Property="Cursor" Value="Hand"/>
                                   <Setter Property="Background" Value="#22333333"/>
                               </Trigger>
                               <Trigger Property="IsChecked" Value="true">
                                   <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                               </Trigger>                               
                           </ControlTemplate.Triggers>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
           </Style>

　　后面我們?cè)賮?lái)看看，我們使用CheckBox的地方。

<CheckBox Grid.Row="1" Grid.Column="1"
                                      IsChecked="{Binding VM.IsHorizontal,ElementName=_this}" Content="Horizontal"
                                      Style="{StaticResource CheckBoxStyle}"
                                      local_ctrl:GeometryAP.IconGeometry="{StaticResource geometryDirection}"
                                      local_ctrl:GeometryAP.IconFill="LightSeaGreen"/>

　　這個(gè)地方我們?yōu)镃heckBox增加了兩個(gè)附加屬性IconGeometry、IconFill這樣我們就能夠?qū)⑦@兩個(gè)附加屬性綁定到CheckBox樣式中的Path里面的Data和Fill依賴項(xiàng)屬性上面，通過(guò)上面的過(guò)程我們就能夠定義各種各樣的CheckBox樣式了，下面我們看看我們定義的這兩個(gè)附加屬性具體的代碼。

public class GeometryAP : DependencyObject
{
    public static PathGeometry GetIconGeometry(DependencyObject obj)
    {
        return (PathGeometry)obj.GetValue(IconGeometryProperty);
    }
    public static void SetIconGeometry(DependencyObject obj, PathGeometry value)
    {
        obj.SetValue(IconGeometryProperty, value);
    }
 
    public static Brush GetIconFill(DependencyObject obj)
    {
        return (Brush)obj.GetValue(IconFillProperty);
    }
    public static void SetIconFill(DependencyObject obj, Brush brush)
    {
        obj.SetValue(IconFillProperty, brush);
    }
 
    public static readonly DependencyProperty IconGeometryProperty = DependencyProperty.RegisterAttached("IconGeometry", typeof(PathGeometry), typeof(GeometryAP));
    public static readonly DependencyProperty IconFillProperty = DependencyProperty.RegisterAttached("IconFill", typeof(Brush), typeof(GeometryAP), new PropertyMetadata(Brushes.Transparent));
}

　　樣式欣賞