c# WPF中CheckBox樣式的使用方法

本篇內(nèi)容主要講解“c# WPF中CheckBox樣式的使用方法 ”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“c# WPF中CheckBox樣式的使用方法 ”吧!

背景

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

常規(guī)使用

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

<CheckBox.Style>
  <Style TargetType="{x:Type CheckBox}">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="IsTabStop" Value="False" />
    <!--把OverridesDefaultStyle設(shè)置為True，表示這個控件不使用當(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)階用法

　　上面的使用較為簡單，下面我們通過一個更加復(fù)雜一些的例子來增加對自定義控件模板的理解，我們先來看看我們定義的樣式。

<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>

　　后面我們再來看看，我們使用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"/>

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

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));
}

　　樣式欣賞

到此，相信大家對“c# WPF中CheckBox樣式的使用方法 ”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！