WPF 自定義CheckBox樣式

自定義的CheckBox樣式，mark一下，方便以后參考復用

模板

一般CheckBox模板太難看了，所以肯定要重寫其中的模板ControlTemplate

• 外邊框 倆個Rectangle，用於定義復選框選中/未選中時的背景色和邊框樣式
• 對勾√ 通過倆個path組合，並控制其顯示，用於定義選中狀態

選中狀態

模板狀態為未選中狀態和選中狀態，設置為默認未選中就好了。

通過Trigger設置選中狀態的樣式顯示

    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
        <Setter Property="Height" Value="25"/>
        <Setter Property="IsChecked" Value="False"/>
        <Setter Property="Margin" Value="0,20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
                            <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
                            <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
                            <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
                                <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
                                <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
                            </Grid>
                        </Grid>
                        <TextBlock Grid.Column="1" Text="AAAA" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
                            <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

當然如果需要點動畫的話，可以添加個Strory，也是不錯的。

EventTrigger ，設置事件觸發源如Click，Mouse.MouseEnter

有意思的是HandoffBehavior 屬性，其默認值 SnapshotAndReplace

• SnapshotAndReplace 新動畫將替換它們所應用到的屬性上的任何現有動畫 -- 即新動畫立即替換原有動畫
• Compose 將通過把新動畫追加到組合鏈的末尾來組合新動畫和現有動畫- - 即完成原有動畫后，再執行新動畫

    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
        <Setter Property="Height" Value="25"/>
            <Setter Property="IsChecked" Value="{Binding IsChecked}"/>
        <Setter Property="Margin" Value="0,20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid x:Name="aaaa">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
                            <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
                            <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
                                <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
                                    <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
                                    <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
                                    <Grid.RenderTransform>
                                        <RotateTransform x:Name="CheckBoxTransform" Angle="0" CenterX="10" CenterY="10"></RotateTransform>
                                    </Grid.RenderTransform>
                                </Grid>
                            </Grid>
                        <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
                            <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
                        </Trigger>
                        <EventTrigger RoutedEvent="Click">
                            <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                                <Storyboard TargetName="CheckBoxTransform" TargetProperty="Angle">
                                    <DoubleAnimation From="0" To="360" Duration="0:0:0.1"></DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

順帶可瀏覽下，CheckBox的布局顯示

關鍵字：CheckBox，HandoffBehavior