Develop Reference

WPF Toggle button style gets affected by hover

I have applied custom styling to a toggle button with control template. I have different background colour and border for default state, checked state and mouse hover. The problem is that when I hover over the checked state, WPF resets the style as if button is not checked (to default state appearance) even though actually the toggle button is checked.
Here is my code
<Style x:Key="MenuItem" TargetType="ToggleButton">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MenuButton" TargetType="{x:Type ToggleButton}">
<Border x:Name="border" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderThickness="4,0,0,0">
<StackPanel x:Name="MenuItemContainer" Orientation="Horizontal" Height="46" Margin="14,0,0,0" Background="Transparent">
<TextBlock x:Name="icon" Grid.Column="0" VerticalAlignment="Center" FontFamily="{StaticResource FontAwesome}" Foreground="#a7b1c2" FontSize="13" Text="{TemplateBinding Tag}" Margin="0,0,6,0"/>
<TextBlock x:Name="menuText" VerticalAlignment="Center" Foreground="#a7b1c2" FontSize="13" Text="{TemplateBinding Property=ContentControl.Content}"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="menuText" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0" />
<ColorAnimation Storyboard.TargetName="icon" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource ColorMenuItemBg}" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource ColorMenuItemBorderHover}"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource ColorMenuItemBorder}"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Storyboard.TargetName="menuText" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0" />
<ColorAnimation Storyboard.TargetName="icon" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource ColorMenuItemBg}"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
<StackPanel>
<ToggleButton Tag="" Content="Home" Template="{StaticResource MenuButton}" Style="{StaticResource MenuItem}" />
<ToggleButton Tag="" Content="Reporting" Template="{StaticResource MenuButton}" Style="{StaticResource MenuItem}"/>
</StackPanel>
If you will click a toggle button you will see that it will get the green border and different background colour, however if you will hover over it and leave it, it will seem to appear as default button.
What am I missing here?
Thank you in Advance!

You defined two VisualtStateGroups in your template. This way you will always have two active states (one per group) for your ToggleButton. The problem is that you are setting the same object properties from VisualStates within two different groups. When you check a ToggleButton and the mouse leaves the button, the control updates its active VisualState for every group. Since your setting Border.Background and Border.BorderBrush from active states in both groups, the last state that gets applied wins (In your case CommonStates/Normal).
To fix this issue, try to avoid setting the same properties from mulitply groups. You can for example set the background of the Stackpanel in the MouseOver-State instead of the border background. This way the ToggleButton stays checked if the mouse leaves it because the "CommonState/Normal"-State will not reset the background of the border.
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="menuText" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0" />
<ColorAnimation Storyboard.TargetName="icon" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MenuItemContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="{StaticResource ColorMenuItemBg}" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
Hope this was helpful!

C# WPF Animated label content is not being shown

I am trying to animate the content of a label in order to do:
Loading
Loading.
Loading..
Loading...
again:
Loading
Loading.
Loading..
Loading...
and so on like in this example.
Below the code:
<Label Grid.Row="2" x:Name="CurrentTask"
FontFamily="Microsoft Sans Serif" FontSize="18" FontStyle="Italic" FontWeight="Bold"
Foreground="White" Content="Loading">
<Label.Template>
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Content" Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Label.Template>
</Label>
The problem is that label content is not visible in the wpf window. It is not being shown. What am I doing wrong?
Also in the lines of type:
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
Instead of hard-coding the value I would like to concatenate the label content to the dots, how can I do this? I do not want to repeat the "Loading" string in each DiscreteObjectKeyFrame.
UPDATE:
Instead of raise trigger on IsEnabled=True, I have used label.loaded as below for example in the case of applying label style:
<Label Grid.Row="2" x:Name="CurrentTask"
FontFamily="Microsoft Sans Serif" FontSize="18" FontStyle="Italic"
Foreground="White" Content="Loading">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>

Besides the Triggers, your ControlTemplate is empty, so obviously nothing is shown.
You could add a ContentPresenter, and also remove the Storyboard.TargetName. It looks also odd that your Trigger acts on IsEnabled set to false.
<Label.Template>
<ControlTemplate TargetType="Label">
<ContentPresenter/>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Label.Template>
However, what you actually might want to have is a Style Trigger instead of a ControlTemplate Trigger:
<Label ...>
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value="Loading"/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="Loading."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value="Loading.."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="Loading..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
For the repeated "Loading" string in the Content, just use two Labels, one with a fixed "Loading" string, the other with the dots, and adjust their Padding. Or better, two TextBlocks:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Loading"/>
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Duration="00:00:00.8" RepeatBehavior="Forever">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0" Value=""/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.2" Value="."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4" Value=".."/>
<DiscreteObjectKeyFrame KeyTime="00:00:00.6" Value="..."/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>

Custom states button MVVM (Windows universal 10)

i want to have an hover effect and a active state that i can set in a viewmodel
this is what i got
<Style TargetType="Button" x:Key="btn">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="Active">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Int32>1</x:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="7*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="grid" Margin="0" Grid.Row="0" Grid.RowSpan="2">
<Border
Name="Border"
BorderThickness="1"
CornerRadius="6"/>
<ContentPresenter>
<TextBlock
Name="Text"
FontFamily="{TemplateBinding FontFamily}"
SelectionHighlightColor="Black"
FontSize="{TemplateBinding FontSize}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="Auto"
Width="Auto"
Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ContentPresenter>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
basically i want to set at any given time the Visualstate to the one with the name Active. However the hover effect still needs to work when i hover that item.
thanks in advance.

Fade in hidden element

I can fade in / out using the following code
<Storyboard x:Name="EnterStoryboard">
<FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<FadeInThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
To fadein:
EnterStoryboard.Begin();
To fadeout:
ExitStoryboard.Begin();
How can I fadein if the element is hidden from the beginning (I tried to set opacity=0 and visibility=collapsed).
EDIT:
based on AstiK solution, here's the new Storyboards (Instead of the built-in FadeInThemeAnimation / FadeOutThemeAnimation)
<Storyboard x:Name="EnterStoryboard">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:00.3" Storyboard.TargetName="Image"/>
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:00.3" Storyboard.TargetName="Image"/>
</Storyboard>

In your original approach, you should have kept Opacity ="0" and Visibility="Visible" from the beginning. I think you are looking for something like this:
<Grid Height="50" Width="100" Background="Red" Opacity="0">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<Storyboard >
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:03"/>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>

use this:
<Storyboard x:Name="EnterStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PauseImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
set to collapsed in the same way for ExitStoryboard

Two storyboards .. Same event .. Same property

How to change respectively between two storyboards within the same ex. MouseDown event or button Click event targeting same property ex. visibility.
1st click -> Visibility from 1 to 0 ( Fade Out )
2nd click -> Visibility from 0 to 1 ( Fade In )
3rd click -> Visibility from 1 to 0 ( Fade Out )
4th click -> Visibility from 0 to 1 ( Fade In )
and so on ...
Fade In
<Style TargetType="{x:Type FrameworkElement}" x:Key="FadeIn">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Fade Out
<Style TargetType="{x:Type FrameworkElement}" x:Key="FadeOut">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Thanks in advance,

I think a toggle button is the appropriate control for this, but if you need to use a normal button for whatever reason, use two of them instead of one:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" mc:Ignorable="d"
x:Class="TestBed.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Hide_Border">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Show">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Hide">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Show_Border">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Show">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Btn_Hide">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="Btn_Hide">
<BeginStoryboard Storyboard="{StaticResource Hide_Border}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="Btn_Show">
<BeginStoryboard x:Name="Show_Border_BeginStoryboard" Storyboard="{StaticResource Show_Border}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.8*"/>
</Grid.ColumnDefinitions>
<Button x:Name="Btn_Hide" Content="Hide" VerticalAlignment="Top"/>
<Button x:Name="Btn_Show" Content="Show" VerticalAlignment="Top" Visibility="Collapsed"/>
<Border x:Name="border" Grid.Column="1" Background="Red" />
</Grid>