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

 

CheckBox Style XAML WPF

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 . Or you can use Viewbox.

Design of CheckBox style:

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 >

   

 

转载于:https://www.cnblogs.com/aquarius20th/p/4877012.html