WPF - CHECKBOX STYLE (INSPIRED BY ANDROID)

WPF - CHECKBOX STYLE (INSPIRED BY ANDROID)

3:31 PM

Trạng thái CheckBox:




  • a) checked, disable

  • b) checked

  • c) indeterminate, disable

  • d) indeterminate

  • e) unchecked

  • f) pressed



Đến Mục lục Android UI

Bản thiết kế:



CheckBox style: được gọi dùng ở Control




[code language="xml"]
<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 dgFocusVisualStyte}" />
<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>
[/code]

FocusVisualStyle: được gọi dùng ở Style trên




[code language="xml"]
<Style x:Key="dgFocusVisualStyte" >
<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>
[/code]

Kết quả



Đến Mục lục Android UI

Chúc các bạn thành công!
PHẠM TUÂN

Subscribe to: Post Comments (Atom)