WPF CHECKBOX STYLE

源自 http://www.wpfhelper.com/index.php/android-ui-for-wpf/23-modern-ui-for-wpf/android-ui-for-wpf/26-wpf-checkbox-style-inspired-by-android

 

CheckBoxStyleXAMLWPF

WPF CheckBox style

How create WPF CheckBox style and customize it. The CheckBox style is inspired by Android design.

 

 

 

CheckBox design:

Grid with relative size of columns and rows makes possible change CheckBox size using Height and Width Wpf CheckBox - custom size. Or you can use Viewbox.

Design of CheckBox style:

Wpf CheckBox style - design

CheckBox states: 

a) checked, disable

b) checked

c) indeterminate, disable

d) indeterminate

e) unchecked

f) pressed

 

  • CheckBox style

     

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Height" Value="30" />
        <Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Grid 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="1*" />
                                    <ColumnDefinition Width="1*" />
                                    <ColumnDefinition Width="4*" />
                                    <ColumnDefinition Width="1*" />
                                    <ColumnDefinition Width="1*" />
                                    <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="1*" />
                                    <RowDefinition Height="1*" />
                                    <RowDefinition Height="4*" />
                                </Grid.RowDefinitions>
     
                                <Border Name="MainBorder"
                                        Grid.ColumnSpan="9" Grid.RowSpan="9"
                                        CornerRadius="4"
                                        BorderThickness="1"
                                        Background="Transparent" />
     
                                <Border Name="InnerBorder"
                                        Grid.Column="1" Grid.ColumnSpan="5"
                                        Grid.Row="2" Grid.RowSpan="5"
                                        BorderThickness="1"
                                        BorderBrush="#808080" />
     
                                <Path Name="InnerPath"
                                      Grid.Column="1" Grid.ColumnSpan="5"
                                      Grid.Row="2" Grid.RowSpan="5"
                                      Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75"
                                      Stretch="Fill" Stroke="#808080"/>
     
                                <Path Name="CheckMark"
                                      Grid.Column="2" Grid.ColumnSpan="5"
                                      Grid.Row="1" Grid.RowSpan="5"
                                      Opacity="0"
                                      Data="M9.07743946676476E-09,4.31805768640244L4.68740335877841,8.86361158398516C4.68740335877841,8.86361158398516,16.3281249985376,-2.42451336648723,16.3281249985376,-2.42451336648723L14.0622100581796,-4.77304938341948 4.68740335877846,4.31805791992662 2.22656251699567,1.93164208562579z"
                                      Fill="#3babe3"
                                      Stretch="Fill"
                                      Stroke="#3babe3" />
     
                                <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="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="MainBorder" Property="Background" Value="#81d2eb" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="CheckMark" Property="Fill" Value="#cccccc" />
                            <Setter TargetName="CheckMark" Property="Stroke" Value="#cccccc" />
                            <Setter TargetName="InnerPath" Property="Stroke" Value="#cccccc" />
                            <Setter TargetName="InderminateMark" Property="Fill" Value="#cccccc" />
                            <Setter TargetName="InnerBorder" Property="BorderBrush" Value="#cccccc" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

     

  • MyFocusVisualStyle

     

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <Style x:Key="MyFocusVisualStyte" >
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle x:Name="FocusStyle" StrokeDashArray="4 4" RadiusX="5" RadiusY="5" Fill="Transparent"
                               Stroke="#81d2eb" StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

     

 

posted @ 2015-10-14 11:39  aquarius20th  阅读(675)  评论(0)    收藏  举报