Button's content look changes when button state changes

Question

I have some buttons to whom I defined a Template like this:

<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>

This is the whole template and a lot of code, but now the matter is with the Content of the button and how it shifts when the button's state changes (from idle to mouseOver and so on). To make a content actually show up I added the line <ContentPresenter/> just under the Border in my template.

The button looks like this:

<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>

I have that Label that says "QUIT" that changes its appearance when the button state changes and I just don't want that. How to resolve this?

Answer 1

You're applying the Opacity animations to the Grid and everything in it.

Changing

Storyboard.TargetName="grid" 

to

Storyboard.TargetName="border" 

in your VisualStates will preserve the content's appearance.