I started what I thought would be a simple thing. A blend 3 project (WPF) that utilizes VSM to control the opacity of some images. For a wizard, to show what step you are in. Easy right? I've used this in the WPFToolkit, no problem. Introducing System.Windows.Interactivity - ahh, something new :)
When I try and run the following code, it crashes with an InvalidOperationException
. To me, this seems about as easy as it gets and was wondering what I've missed here..
This was created entirely in Blend. When you click a button, it crashes.
The question is "Why doesn't it move between states? "
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.3000000"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Enabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ic:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image x:Name="step1Image" Tag="step1" Width="48" Height="48" Source="Assets/Step1.png" Stretch="Fill" Margin="20,0,0,0" />
<Image x:Name="step2Image" Tag="step2" Width="48" Height="48" Source="Assets/Step2.png" Stretch="Fill" Margin="50,0,0,0"/>
<Image x:Name="step3Image" Tag="step3" Width="48" Height="48" Source="Assets/Step3.png" Stretch="Fill" Margin="50,0,0,0"/>
</StackPanel>
<StackPanel x:Name="stackPanel" Orientation="Horizontal">
<Button x:Name="button1" Tag="step1" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75" Content="One">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ic:GoToStateAction UseTransitions="True" StateName="Enabled"/>
<ic:GoToStateAction ic:TargetName="step2Image" UseTransitions="True" StateName="Disabled"/>
<ic:GoToStateAction ic:TargetName="step3Image" UseTransitions="True" StateName="Disabled"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button x:Name="button2" Tag="step2" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75" Content="Two">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ic:GoToStateAction UseTransitions="True" StateName="Enabled"/>
<ic:GoToStateAction ic:TargetName="step1Image" UseTransitions="True" StateName="Disabled"/>
<ic:GoToStateAction ic:TargetName="step3Image" UseTransitions="True" StateName="Disabled"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button x:Name="button3" Tag="step3" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75" Content="Three">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ic:GoToStateAction UseTransitions="True" StateName="Enabled"/>
<ic:GoToStateAction ic:TargetName="step1Image" UseTransitions="True" StateName="Disabled"/>
<ic:GoToStateAction ic:TargetName="step2Image" UseTransitions="True" StateName="Disabled"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
</StackPanel>
</Grid>
</Window>