巴頓的內容看變化，當按鈕狀態改變

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按鈕的狀態以及它在按鈕狀態改變時如何改變（從空閒到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，說：「退出」，改變其外觀當按鈕狀態發生變化，我只是不希望出現這種情況。如何解決這個問題？

Answer 1

您正在將Opacity動畫應用到Grid以及其中的所有內容。

更改

Storyboard.TargetName="grid" 

到

Storyboard.TargetName="border" 

在VisualStates將保留內容的外觀。