創建一個平坦的複選框風格

我一直在使用XAML從這個例子作爲一個起點：

web.archive.org - WPF CheckBox style (inspired by android)

我的要求：

堅實的背景。
無邊界。
選中標記區域和選中標記以控件大小調整。
複選標記位於複選框區域的中心。

我的代碼：

<Style TargetType="{x:Type local:DMStyle2CheckBox}"> 
    <Setter Property="SnapsToDevicePixels" Value="true" /> 
    <Setter Property="OverridesDefaultStyle" Value="true" /> 
    <Setter Property="Height" Value="32" /> 
    <Setter Property="Width" Value="138" /> 
    <Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type CheckBox}"> 
       <BulletDecorator> 
        <BulletDecorator.Bullet> 
         <Grid Background="{x:Null}" Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}" 
           MinHeight="30" MinWidth="30" ShowGridLines="False"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="4*" /> 
           <ColumnDefinition Width="2*" /> 
           <ColumnDefinition Width="1*" /> 
           <ColumnDefinition Width="4*" /> 
           <ColumnDefinition Width="1*" /> 
           <ColumnDefinition Width="5*" /> 
           <ColumnDefinition Width="2*" /> 
           <ColumnDefinition Width="2*" /> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="3*" /> 
           <RowDefinition Height="1*" /> 
           <RowDefinition Height="1*" /> 
           <RowDefinition Height="1*" /> 
           <RowDefinition Height="4*" /> 
           <RowDefinition Height="6*" /> 
           <RowDefinition Height="1*" /> 
           <RowDefinition Height="4*" /> 
          </Grid.RowDefinitions> 

          <!-- Checkmark Box --> 
          <Border Name="InnerBorder" Grid.Column="1" Grid.ColumnSpan="5" Grid.Row="2" Grid.RowSpan="5" BorderThickness="1" 
            BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/> 

          <!-- Checkmark --> 
          <Path x:Name="CheckMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331, 
            1.52588e-005L 9.97498,1.22334 Z" Fill="{Binding CheckMarkColor, RelativeSource={RelativeSource Mode=TemplatedParent}}" Opacity="0" 
            Stretch="Uniform" Grid.Column="2" Grid.ColumnSpan="4" Grid.Row="3" Grid.RowSpan="3" /> 

          <Path Name="InderminateMark" Grid.Column="3" Grid.Row="4" Data="M0,4 L1,5 5,1 4,0" Opacity="0" 
            Stretch="Fill" StrokeThickness="0" Fill="#808080" /> 
         </Grid> 
        </BulletDecorator.Bullet> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CheckStates"> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="1" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unchecked" > 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="0" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Indeterminate"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InderminateMark" Duration="0:0:0.2" To="1" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter Margin="4,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True" /> 
       </BulletDecorator> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsChecked" Value="True"> 
         <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter TargetName="CheckMark" Property="Fill" Value="{StaticResource Color.Black}" /> 
         <Setter TargetName="CheckMark" Property="Stroke" Value="{StaticResource Color.Black}" /> 
         <Setter TargetName="InderminateMark" Property="Fill" Value="{StaticResource Color.Black}" /> 
         <Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource Color.Black}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

對於這個代碼我想要做什麼的大部分。選中標記對我來說是最大的問題。它不居中或可調整大小，並且溢出檢查區域。

我試着玩網格列和行的舉行復選標記，但它變得越來越沮喪。理想情況下，我想擺脫網格列和行，但沒有太多的運氣。

我已經看過每一個關於wpf複選框樣式的問題，我可以找到並搜索任何其他在線資源，但其中大多數不會接近我想要的。我甚至試圖用Expression Blend修改默認的模板，但是也沒有解決。

來源

2017-06-05 Andronomos

是否將路徑元素放入它自己的網格幫助允許WPF居中？ –

@JohnPeters在沒有屬性的基本網格中包裝路徑導致複選標記位於複選框外。如果我將網格列/行屬性應用於網格，則會得到與當前相同的結果。 – Andronomos

網格允許你覆蓋東西，我懷疑你看到的路徑行爲就是路徑告訴它做的事情。你有這樣的形狀，但是偏移對WPF佈局系統來說不是很好，或者完全錯誤。你能否看到相同尺寸的圖像是否有效？ –

我最後想出來的基於此模板，我發現：Circle-checkbox-style-in-WPF

樣式模板

<Style TargetType="{x:Type local:FlatCheckBox}"> 
<Setter Property="SnapsToDevicePixels" Value="true" /> 
<Setter Property="OverridesDefaultStyle" Value="true" /> 
<Setter Property="Height" Value="32" /> 
<Setter Property="Width" Value="138" /> 
<Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" /> 
<Setter Property="VerticalContentAlignment" Value="Center" /> 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type CheckBox}"> 
      <Grid Background="Transparent"> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="24" /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 

       <Border Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" 
         BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" 
         BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" 
         CornerRadius="0" Width="20" Height="20" VerticalAlignment="Center"> 
        <Grid> 
         <Path x:Name="CheckMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255, 
          6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z" Fill="{Binding CheckMarkColor, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
          Margin="3" Opacity="0" Stretch="Fill" /> 
        </Grid> 
       </Border> 
       <ContentPresenter Grid.Column="1" x:Name="content" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Setter TargetName="CheckMark" Property="Opacity" Value="1" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter>

類別fo r自定義依賴項屬性

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media; 

namespace Control_Styles.Styles 
{ 
    public partial class FlatCheckBox : CheckBox 
    { 
     public static readonly DependencyProperty CheckMarkColorProperty = 
      DependencyProperty.Register("CheckMarkColor", typeof(Brush), typeof(FlatCheckBox)); 

     public Brush CheckMarkColor 
     { 
      get { return (Brush)GetValue(CheckMarkColorProperty); } 
      set { SetValue(CheckMarkColorProperty, value); } 
     } 
    } 
}

來源

2017-06-11 16:16:59 Andronomos

出於某種原因，樣式結束標籤沒有顯示在格式化的代碼中，所以如果您想使用此模板，請不要忘記添加該標籤。 – Andronomos

您可以設置的樣式

<Style TargetType="CheckBox" x:Key="Flat_CheckBox">    
    <Setter Property="HorizontalAlignment" Value="Stretch"/>    
    <Setter Property="VerticalAlignment" Value="Top"/> 
    <Setter Property="MinWidth" Value="60"/> 
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/> 
    <Setter Property="TextElement.Foreground" Value="Black"/> 
    <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>    
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="Background" Value="White" />  

    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True">      
      <Setter Property="Background" Value="LightSkyBlue" /> 
     </Trigger>     
    </Style.Triggers> 

</Style>

來源

2017-06-05 08:32:05

我是否錯過了這段代碼？這看起來像覆蓋複選框的通用樣式。不幸的是，這不適合我的需求。這是我嘗試的第一件事。複選框「框」和複選標記不會與控件一起調整大小。我需要增長和縮小以保持與內容展示者（文本）的垂直對齊。 – Andronomos

創建一個平坦的複選框風格

回答

相關問題