Visual State Manager in WPF not working for me
- by Román
Hi
In a wpf project I have this XAML code
<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"
mc:Ignorable="d"
xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
x:Class="WpfApplication1.MainWindow"
xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="VisualStateGroup">
<vsm:VisualState x:Name="Loading">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="control" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="control" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<ControlTemplate x:Key="loadingAnimation">
<Image x:Name="content" Opacity="1">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Transparent">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<DrawingGroup>
<DrawingGroup.Transform>
<RotateTransform x:Name="angle" Angle="0" CenterX="0.5" CenterY="0.5"/>
</DrawingGroup.Transform>
<GeometryDrawing Geometry="M0.9,0.5 A0.4,0.4,90,1,1,0.5,0.1">
<GeometryDrawing.Pen>
<Pen Brush="Green" Thickness="0.1"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="Green" Geometry="M0.5,0 L0.7,0.1 L0.5,0.2"/>
</DrawingGroup>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<ControlTemplate.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard x:Name="animation">
<Storyboard>
<DoubleAnimation From="0" To="359" Duration="0:0:1.5" RepeatBehavior="Forever"
Storyboard.TargetName="angle" Storyboard.TargetProperty="Angle"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="animation"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="76.128" Width="Auto"/>
<ColumnDefinition MinWidth="547.872" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.05*"/>
<RowDefinition Height="0.95*"/>
</Grid.RowDefinitions>
<Button x:Name="button" Margin="0,0,1,0.04" Width="100" Content="Load" d:LayoutOverrides="Height" Click="Button_Click"/>
<Button x:Name="button1" HorizontalAlignment="Left" Margin="0,0,0,0.04" Width="100" Content="Stop" Grid.Column="1" d:LayoutOverrides="Height" Click="Button2_Click" Visibility="Collapsed"/>
<Control x:Name="control" Margin="10" Height="100" Grid.Row="1" Grid.ColumnSpan="2" Width="100" Template="{DynamicResource loadingAnimation}" Visibility="Collapsed"/>
</Grid>
</Window>
and the following code behind on the window
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
}
private void Button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "Loading", true);
}
private void Button2_Click(object sender, System.Windows.RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "Normal", true);
}
}
However, when I click the first button (button1) the state change is not being triggered.
What am I doing wrong?
Thanks in advance
