应用样式时不可点击的复选框答案

【问题标题】：Non clickable checkbox when applying style应用样式时不可点击的复选框
【发布时间】：2019-06-24 19:55:59
【问题描述】：

我制作了很多样式并且它们都可以工作（所以问题不在于 ResourceDictionary 或绑定到样式），但是当我尝试将此样式用于复选框时，它会进入用户可以使用的状态不要与之互动。

我正在尝试在标准 CheckBox 上设置样式：

<CheckBox Content="Some Cool Checkbox" Style="{StaticResource MaterialDesignCheckBox}" />

这是我尝试应用的样式：

<Style x:Key="MaterialDesignCheckBox" TargetType="CheckBox">
    <Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundUnchecked}" />
    <Setter Property="Foreground" Value="{ThemeResource CheckBoxForegroundUnchecked}" />
    <Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderBrushUnchecked}" />
    <Setter Property="Padding" Value="8,5,0,0" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="MinWidth" Value="120" />
    <Setter Property="MinHeight" Value="32" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <Grid
                    x:Name="RootGrid"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Viewbox
                        Width="25"
                        Height="25"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        FlowDirection="LeftToRight">
                        <Canvas Width="25" Height="25">
                            <Path
                                x:Name="Graphic"
                                Data="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"
                                Fill="{ThemeResource MaterialDesignCheckBoxOff}" />
                            <Ellipse
                                x:Name="InteractionEllipse"
                                Canvas.Left="12"
                                Canvas.Top="12"
                                Width="0"
                                Height="0"
                                Fill="{TemplateBinding Foreground}"
                                IsHitTestVisible="False"
                                Opacity="0"
                                RenderTransformOrigin="0.5,0.5">
                                <Ellipse.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <SkewTransform />
                                        <RotateTransform />
                                        <TranslateTransform />
                                    </TransformGroup>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                        </Canvas>
                    </Viewbox>
                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Grid.Column="1"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        TextWrapping="Wrap" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

应用样式时，复选框变得不可点击，但外观正确：

所以简而言之，我需要帮助来弄清楚如何保持外观同时使其可点击。

【问题讨论】：

标签： xaml uwp

【解决方案1】：

应用样式时不可点击的复选框

要添加可点击状态，您需要为 Checkbox 指定视觉行为。例如，

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

详细教程请参考Specify the visual behavior of a control。

【讨论】：

【解决方案2】：

通过这样做解决了这个问题：

<Style x:Key="MaterialDesignCheckBox" TargetType="CheckBox">
       <Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundUnchecked}" />
       <Setter Property="Foreground" Value="{ThemeResource CheckBoxForegroundUnchecked}" />
       <Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderBrushUnchecked}" />
       <Setter Property="Padding" Value="8,5,0,0" />
       <Setter Property="HorizontalAlignment" Value="Left" />
       <Setter Property="VerticalAlignment" Value="Center" />
       <Setter Property="HorizontalContentAlignment" Value="Left" />
       <Setter Property="VerticalContentAlignment" Value="Top" />
       <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
       <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
       <Setter Property="MinWidth" Value="120" />
       <Setter Property="MinHeight" Value="32" />
       <Setter Property="UseSystemFocusVisuals" Value="True" />
       <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="CheckBox">
                   <Border
                       Background="{TemplateBinding Background}"
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}">
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="Auto" />
                               <ColumnDefinition Width="*" />
                           </Grid.ColumnDefinitions>
                           <Rectangle
                               x:Name="NormalRectangle"
                               Grid.Column="0"
                               Width="20"
                               Height="20"
                               Fill="Transparent"
                               RadiusX="2"
                               RadiusY="2"
                               Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                               StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                               UseLayoutRounding="False" />
                           <Path
                               x:Name="CheckGlyph"
                               Grid.Column="0"
                               Width="16"
                               Height="14"
                               Fill="{ThemeResource MaterialDesignCheckBoxOff}"
                               Opacity="0"
                               Stretch="Fill"
                               Stroke="{StaticResource MaterialDesignCheckBoxOff}"
                               StrokeThickness="1.5">
                               <Path.Data>
                                   <GeometryGroup>
                                       <LineGeometry StartPoint="0,0" EndPoint="100,100" />
                                       <LineGeometry StartPoint="100,0" EndPoint="0,100" />
                                   </GeometryGroup>
                               </Path.Data>
                           </Path>
                           <Ellipse
                               x:Name="IndeterminateGlyph"
                               Grid.Column="1"
                               Width="8"
                               Height="8"
                               Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                               Opacity="0"
                               UseLayoutRounding="False" />
                           <ContentPresenter
                               x:Name="ContentPresenter"
                               Grid.Column="1"
                               Margin="{TemplateBinding Padding}"
                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                               Content="{TemplateBinding Content}"
                               ContentTemplate="{TemplateBinding ContentTemplate}" />
                       </Grid>

                       <VisualStateManager.VisualStateGroups>
                           <VisualStateGroup x:Name="CheckStates">
                               <VisualState x:Name="Checked">
                                   <VisualState.Setters>
                                       <Setter Target="CheckGlyph.Opacity" Value="1" />
                                   </VisualState.Setters>
                               </VisualState>
                               <VisualState x:Name="Unchecked" />
                               <VisualState x:Name="Indeterminate">
                                   <VisualState.Setters>
                                       <Setter Target="IndeterminateGlyph.Opacity" Value="1" />
                                   </VisualState.Setters>
                               </VisualState>
                           </VisualStateGroup>
                       </VisualStateManager.VisualStateGroups>
                   </Border>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

【讨论】：