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以及当按钮的状态发生变化时（从idle到mouseOver等等）它如何移动）。为了实际显示内容，我在模板的<ContentPresenter/>下方添加了行Border。

按钮如下所示：

<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表示＆＃34;退出＆＃34;当按钮状态改变时，它会改变它的外观，我只是不想要那样。怎么解决这个？

Answer 1

您已将Opacity动画应用于Grid 及其中的所有内容。

更改

Storyboard.TargetName="grid"

到

Storyboard.TargetName="border"

您VisualStates中的

将保留内容的外观。

当按钮状态改变时，按钮的内容看起来会发生变化

1 个答案: