Question

我有一个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>

Answer 1

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

<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 个答案: