Question

<ToggleButton Content="This is a custom button" Name="toggleButton">
        <ToggleButton.Template>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Name="RootGrid">
                    <TextBlock Text="{TemplateBinding Content}"
                           Name="Text"
                               FontSize="10"
                              />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="FontSize"
                                                     To="50" Duration="0:0:2" EnableDependentAnimation="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="FontSize"
                                                     To="10" Duration="0"  EnableDependentAnimation="True"/>
                                    </Storyboard>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </ToggleButton.Template>
    </ToggleButton>

我想创建一个自定义togglebutton 当它被检查时，文本的字体大小将在双重动画中为50 如果未选中，则双重动画中文本的字体大小为10 。代码如下。但是当我运行代码时，我首先点击按钮，字体大小不会立即变为50.几秒后它开始变化。当我再次点击按钮以便取消选中该按钮时。但字体大小没有变化，它仍然是50。如何更改代码以便我可以创建满足我需求的按钮？

Answer 1

只需将持续时间从"0:0:2"更改为"0"，因为无论如何都无法设置字体大小的动画。

您不需要在未选中状态下设置任何内容，更简单的方法是使用可视状态设置器。

<ToggleButton Content="This is a custom button"
              Name="toggleButton"
              HorizontalAlignment="Center">
    <ToggleButton.Template>
        <ControlTemplate TargetType="ToggleButton">
            <Grid Name="RootGrid">
                <TextBlock Text="{TemplateBinding Content}"
                           Name="Text"
                           FontSize="10" />
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter Target="Text.(TextBlock.FontSize)"
                                        Value="50" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

使用样式

<ToggleButton Content="This is a custom button">
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
            <Setter Property="Background"
                    Value="Transparent" />
            <Setter Property="Foreground"
                    Value="{ThemeResource ToggleButtonForeground}" />
            <Setter Property="BorderBrush"
                    Value="{ThemeResource ToggleButtonBorderBrush}" />
            <Setter Property="BorderThickness"
                    Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
            <Setter Property="Padding"
                    Value="8,4,8,4" />
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="FontFamily"
                    Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight"
                    Value="Normal" />
            <Setter Property="FontSize"
                    Value="10" />
            <Setter Property="UseSystemFocusVisuals"
                    Value="True" />
            <Setter Property="FocusVisualMargin"
                    Value="-3" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid x:Name="RootGrid"
                                Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundChecked}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundChecked}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushChecked}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter"
                                                AutomationProperties.AccessibilityView="Raw"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                                Content="{TemplateBinding Content}"
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                Padding="{TemplateBinding Padding}"
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

UWP中的自定义togglebutton

1 个答案: