如何为自定义按钮设置视觉状态答案

【问题标题】：How to set visual states for custom buttons如何为自定义按钮设置视觉状态
【发布时间】：2019-04-18 08:26:02
【问题描述】：

我有一个 UWP 应用程序，它使用一些自定义圆形按钮，我在网上找到了示例代码。它使用填充日食，看起来很棒。唯一的问题是我无法弄清楚如何在禁用按钮时使按钮透明。

我尝试将代码输入到可视状态 x:Name Disabled 标记中。但我不确定我是否完全理解我在网上找到的示例代码！填充似乎与状态无关。

所以....我的问题是。如何使按钮看起来与现在完全一样（圆形渐变填充）。但也可以在按钮被禁用时启用一些效果。例如改变颜色，或改变透明度？几天来我一直在努力解决这个问题，并且正在兜圈子！

谢谢你:)

<Page.Resources>
<Style x:Key="OffSiteButtonTemplate" TargetType="Button">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Offset="0" Color="Orange"/>
                        <GradientStop Offset="1" Color="OrangeRed"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Disabled"/>

                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Inner" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outer" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="-1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse Margin="4" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
                                <Ellipse.RenderTransform>
                                    <ScaleTransform ScaleY="1" x:Name="Outer"/>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                            <Ellipse Margin="20" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
                                <Ellipse.RenderTransform>
                                    <ScaleTransform ScaleY="-1" x:Name="Inner"/>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                            <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【问题讨论】：

仅供参考在您的问题标题中复制标签没有任何好处，并且违反了标签指南。
@John 好吧，对不起。我只是想让人们更容易看到它适用于 uwp 和 c#。如果我正在阅读论坛上的标题，我不会检查标签。
幸运的是，这不是一个论坛——它是一个有针对性的问答网站。人们关注他们感兴趣的标签。别担心 - 人们会很容易找到您的问题 :-)

标签： c# templates button uwp

【解决方案1】：

如果您将Ellipse 元素分配给x:Name，例如，您可以使用Storyboard 和ObjectAnimationUsingKeyFrames 为其Fill 属性设置动画。您还可以使用DoubleAnimation 为Button 本身的Opacity 属性设置动画：

<Style x:Key="OffSiteButtonTemplate" TargetType="Button">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Offset="0" Color="Orange"/>
                <GradientStop Offset="1" Color="OrangeRed"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="Silver"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.1" Duration="0:0:0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Inner" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="1"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outer" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="-1"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse x:Name="OuterEllipse" Margin="4" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
                        <Ellipse.RenderTransform>
                            <ScaleTransform ScaleY="1" x:Name="Outer"/>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse x:Name="InnerEllipse" Margin="20" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
                        <Ellipse.RenderTransform>
                            <ScaleTransform ScaleY="-1" x:Name="Inner"/>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

哇！你是个天才！谢谢 :) 我唯一遇到的问题是设置透明度的双重动画。它说未能在索引 1 处添加孩子。但无论如何我仍在玩弄它
上面的代码除了透明度之外都可以工作。我真的很想让按钮透明。我会仔细检查我复制上面的代码没有出错。但我遇到了双重动画的问题。