在代码隐藏文件中创建 Windows 10 ControlTemplate

Question

我有一个 CheckBox，我在 Windows.UI.Xaml.Controls.ControlTemplate 的帮助下在我的 xaml 文件中定义了它。我这样做是因为我需要覆盖现有的 CheckBox 图像。这是我的复选框：

<CheckBox Grid.Column="1" Width="30" Height="30" HorizontalAlignment="Center" Checked="CheckBox_Checked">
    <CheckBox.Template>
        <ControlTemplate TargetType="CheckBox">
            <Image Source="Assets/unchecked_checkbox.png"/>
        </ControlTemplate>
    </CheckBox.Template>
</CheckBox>

所以，这行得通。但是现在当我想在用户检查 CheckBox 时更改图像时，我假设我必须在代码隐藏中进行。我试图创建一个模板，但是...

ControlTemplate ctr = new ControlTemplate();
ctr.TargetType = typeof(CheckBox);
ctr.

如你所见，我被困住了。这里唯一弹出的是 SetValue，但这需要一个 DependencyProperty 类型的参数以及一个对象。

我需要帮助...

Answer 1

首先我认为在这种情况下您不需要使用模板。 CheckBox 是 ContentControl。您可以直接设置内容。 例如：

youCheckBox.Content = new Image()
        {
            Source = new BitmapImage()
            {
                UriSource = new Uri("Assets/unchecked_checkbox.png")
            }
        }; 

其次，在选中 CheckBox 时更改内容的更好方法是在 XAML 中进行。例如，您可以编辑 CheckBox（它是 CheckBox 默认样式的副本，这就是它这么长的原因:)）样式：

<Style x:Key="CheckBoxStyle"
           TargetType="CheckBox">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="Foreground"
                Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CombinedStates">
                                <VisualState x:Name="UncheckedNormal" />
                                <VisualState x:Name="UncheckedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UncheckedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundBaseMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="{ThemeResource CheckBoxCheckedStrokeThickness}"
                                                         Storyboard.TargetProperty="StrokeThickness"
                                                         Storyboard.TargetName="NormalRectangle" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UncheckedDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedNormal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="{ThemeResource CheckBoxCheckedStrokeThickness}"
                                                         Storyboard.TargetProperty="StrokeThickness"
                                                         Storyboard.TargetName="NormalRectangle" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightAltTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBoxImage"
                                                                       Storyboard.TargetProperty="Source">
                                            HERE YOU SHOULD SET IMAGE FOR CHECKED
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Assets/unchecked_checkbox.png" /> 
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="{ThemeResource CheckBoxCheckedStrokeThickness}"
                                                         Storyboard.TargetProperty="StrokeThickness"
                                                         Storyboard.TargetName="NormalRectangle" />
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminateNormal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlForegroundAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="&#xE73C;" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminatePointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="&#xE73C;" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminatePressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="&#xE73C;" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminateDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
                                                                       Storyboard.TargetName="NormalRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Glyph"
                                                                       Storyboard.TargetName="CheckGlyph">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="&#xE73C;" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0"
                                                         To="1"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="CheckGlyph" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Height="32"
                              VerticalAlignment="Top">
                            <Rectangle x:Name="NormalRectangle"
                                       Fill="Transparent"
                                       Height="20"
                                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                                       UseLayoutRounding="False"
                                       Width="20" />
                            <FontIcon x:Name="CheckGlyph"
                                      Foreground="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"
                                      FontSize="20"
                                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                      Glyph="&#xE001;"
                                      Opacity="0" />
                        </Grid>
                        <!--YOUR IMAGE-->
                        <Image x:Name="CheckBoxImage"
                               Grid.Column="1"
                               Source="Assets/unchecked_checkbox.png" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

检查状态有 VisualStates。您可以根据需要设置样式:)