Erstellen einen flachen Checkbox Stil

Question

Ich versuche, die Kontrollkästchen in diesem Bild gesehen zu replizieren:

aus diesem Beispiel als Ausgangspunkt css-custom-checkboxes

Ich habe mit dem XAML:

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

Meine Anforderungen:

• Solid Hintergrund.
• Keine Grenze.
• Häkchen Bereich und Häkchen ändert die Größe mit Steuerelement.
• Das Kontrollkästchen befindet sich im Kontrollkästchenbereich.

Mein Code:

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

Für den größten Teil dieser Code tut, was ich will. Das Häkchen ist das größte Problem für mich. Es ist nicht zentriert oder in der Größe veränderbar und es überläuft den Häkchenbereich.

Ich habe versucht, mit den Gitterspalten und Reihen zu spielen, die das Häkchen halten, aber es wird zunehmend frustrierend. Idealerweise möchte ich die Gitterspalten und -reihen loswerden, aber auch damit nicht viel Glück gehabt haben.

Ich habe mir jede SO-Frage über wpf Checkbox Styles angeschaut, die ich finden konnte und nach anderen Online-Ressourcen gesucht habe, aber die meisten von ihnen kommen nicht annähernd an das her, was ich will. Ich habe sogar versucht, die Standardvorlage mit Expression Blend zu ändern, aber das hat auch nicht funktioniert.

Answer 1

ich es herauszufinden dargelegt endete basierend auf dieser Vorlage ich gefunden: Circle-checkbox-style-in-WPF

Stilvorlage

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

Klasse für 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); } 
     } 
    } 
} 

Answer 2

können Sie einen Stil

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