views:

459

answers:

0

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>