Как установить визуальные состояния для пользовательских кнопок

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>