按钮状态更改时，按钮的内容外观会发生变化

Question

我有一些按钮，我像这样定义了Template：

<ControlTemplate x:Key="TileButtonTemplate" TargetType="{x:Type Button}">
    <Grid x:Name="grid" ToolTip="Basic tile button with images and info">
        <Grid.Background>
            <ImageBrush/>
        </Grid.Background>
        <Border x:Name="border" BorderThickness="3" BorderBrush="Gray" Opacity="1"/>
        <ContentPresenter/>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF747474" Offset="1"/>
                                        <GradientStop Color="Gainsboro" Offset="0"/>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.2"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.3"/>
                        </DoubleAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF3C3C3C" Offset="1"/>
                                        <GradientStop Color="#FFC8C8C8" Offset="0"/>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF303030" Offset="1"/>
                                        <GradientStop Color="#FFC8C8C8" Offset="0"/>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.4"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF4F4F4F" Offset="1"/>
                                        <GradientStop Color="#FF7C7C7C" Offset="0"/>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
                        </DoubleAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF363636" Offset="1"/>
                                        <GradientStop Color="#FFAFAFAF" Offset="0"/>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

这是整个模板和大量代码，但现在问题在于按钮的Content 以及当按钮的状态发生变化时它如何转换（从空闲到鼠标悬停等）。为了让内容真正显示出来，我在模板中的Border 下方添加了<ContentPresenter/> 行。

按钮如下所示：

<Button Grid.Row="2" Grid.Column="0" Template="{DynamicResource TileButtonTemplate}"
        Margin="10,10,10,5" VerticalAlignment="Stretch" HorizontalAlignment="Left" Width="120"
        Foreground="#5a5a5a" FontSize="30">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ContentPresenter/>
        <Label Content="QUIT" FontFamily="CenturyGothicRegual"  FontSize="30" 
               VerticalContentAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" >
            <Label.Foreground>
                <SolidColorBrush Opacity="1" Color="#FF5B5B5B"/>
            </Label.Foreground>
        </Label>
    </Grid>
</Button>

我有那个Label，上面写着“QUIT”，当按钮状态改变时它会改变它的外观，我只是不想这样。如何解决这个问题？

Answer 1

您正在将Opacity 动画应用到Grid 以及其中的所有内容。

变化

Storyboard.TargetName="grid" 

到

Storyboard.TargetName="border" 

在您的VisualStates 中将保留内容的外观。