locked
SketchFlow Modal Window effect ... RRS feed

  • Question

  • What is the best way to simulate a modal window in a SketchFlow project?

    I have a 5 step wizard which works find by itself but I would like to show this wizard as a web-style (grey opacity 50% overlay) modal window wizard.  I made them into component windows but can't seem to figure out how do move between these component windows. 
    Thursday, February 18, 2010 11:50 AM

Answers

  • I think something like this will provide the effect you are looking for, it uses states to show 3 separate wizard screens, each using behaviors to move to the next state.  There is a 50% black overlay in the back so it is modal.

    Sorry for the huge chunk of xaml, but if you paste it into Blend and fix the classname/namespaces to match your project, you should be able to edit it to see what is happening.

    <UserControl
    	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:local="clr-namespace:SilverlightPrototype9Screens"
    	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity" xmlns:ps="clr-namespace:Microsoft.Expression.Prototyping.SketchControls;assembly=Microsoft.Expression.Prototyping.SketchControls"
    	
    	x:Class="SilverlightPrototype9Screens.Screen_1"
    	Width="640" Height="480">
    
    	<UserControl.Resources>
    		<ResourceDictionary>
    			<ResourceDictionary.MergedDictionaries>
    				<ResourceDictionary Source="ProjectDataSources.xaml"/>
    			</ResourceDictionary.MergedDictionaries>
    			<DataTemplate x:Key="ItemTemplate">
    				<StackPanel>
    					<TextBlock Text="{Binding Property1}"/>
    					<CheckBox IsChecked="{Binding Property2, Mode=TwoWay}"/>
    				</StackPanel>
    			</DataTemplate>
    			<DataTemplate x:Key="Collection1ItemTemplate">
    				<StackPanel>
    					<TextBlock Text="{Binding Property1}"/>
    				</StackPanel>
    			</DataTemplate>
    		</ResourceDictionary>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="00:00:00" To="Base"/>
    					<VisualTransition GeneratedDuration="00:00:00" To="Screen1"/>
    					<VisualTransition GeneratedDuration="00:00:00" To="Screen2"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="Base"/>
    				<VisualState x:Name="Screen1">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)" Duration="00:00:00.0010000">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wizard1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard1" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Screen2">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard2" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.995"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard2" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Screen3">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard3" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard3" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<controls:TabControl Margin="8,23,8,8" Style="{StaticResource TabControl-Sketch}">
    			<controls:TabItem Style="{StaticResource TabItem-Sketch}" Header="TabItem">
    				<Grid/>
    			</controls:TabItem>
    			<controls:TabItem Style="{StaticResource TabItem-Sketch}" Header="TabItem">
    				<Grid/>
    			</controls:TabItem>
    		</controls:TabControl>
    		<ProgressBar Height="49" Margin="53,90,67,0" Style="{StaticResource ProgressBar-Sketch}" VerticalAlignment="Top"/>
    		<ListBox HorizontalAlignment="Left" Margin="65,175,0,41" Style="{StaticResource ListBox-Sketch}" Width="232" ItemTemplate="{StaticResource ItemTemplate}">
    			<ListBoxItem Margin="0" Content="Item1"/>
    			<ListBoxItem Margin="0" Content="Item2"/>
    			<ListBoxItem Margin="0" Content="Item3"/>
    			<ListBoxItem Margin="0" Content="Item4"/>
    			<ListBoxItem Margin="0" Content="Item5"/>
    			<ListBoxItem Margin="0" Content="Item6"/>
    			<ListBoxItem Margin="0" Content="Item7"/>
    			
    		</ListBox>
    		<ListBox HorizontalAlignment="Right" Margin="0,173,48,55" Style="{StaticResource ListBox-Sketch}" Width="242" ItemTemplate="{StaticResource Collection1ItemTemplate}">
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    		</ListBox>
    		<Button Height="38" HorizontalAlignment="Right" Margin="0,8,25,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="123" Content="Wizard">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Screen1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    		<Grid x:Name="grid" Opacity="0" Visibility="Collapsed">
    			<Rectangle x:Name="rectangle" Fill="#7F000000"/>
    			<Grid x:Name="Wizard1" Margin="183,38,176,72" Opacity="0" Visibility="Collapsed">
    				<ps:SketchRectangleSL Style="{StaticResource Rectangle-Sketch}"/>
    				<TextBlock Margin="18,22,41,81" Style="{StaticResource BasicTextBlock-Sketch}" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" TextWrapping="Wrap"/>
    				<Button Height="38" HorizontalAlignment="Right" Margin="0,0,16,16" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="97" Content="Next">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Screen2"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Button>
    				<TextBlock Height="61" HorizontalAlignment="Left" Margin="46,0,0,16" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Bottom" Width="75" FontSize="48" Text="1" TextWrapping="Wrap"/>
    			</Grid>
    			<Grid x:Name="Wizard2" Margin="183,38,176,72" Opacity="0" Visibility="Collapsed">
    				<ps:SketchRectangleSL Style="{StaticResource Rectangle-Sketch}"/>
    				<TextBlock Margin="18,22,41,81" Style="{StaticResource BasicTextBlock-Sketch}" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" TextWrapping="Wrap"/>
    				<Button Height="38" HorizontalAlignment="Right" Margin="0,0,16,16" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="97" Content="Next">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Screen3"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Button>
    				<TextBlock Height="61" HorizontalAlignment="Left" Margin="46,0,0,16" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Bottom" Width="75" FontSize="48" Text="2" TextWrapping="Wrap"/>
    			</Grid>
    			<Grid x:Name="Wizard3" Margin="183,38,176,72" Opacity="0" Visibility="Collapsed">
    				<ps:SketchRectangleSL Style="{StaticResource Rectangle-Sketch}"/>
    				<TextBlock Margin="18,22,41,81" Style="{StaticResource BasicTextBlock-Sketch}" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" TextWrapping="Wrap"/>
    				<Button Height="38" HorizontalAlignment="Right" Margin="0,0,16,16" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="97" Content="Finish">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Base"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Button>
    				<TextBlock Height="61" HorizontalAlignment="Left" Margin="46,0,0,16" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Bottom" Width="75" FontSize="48" Text="3" TextWrapping="Wrap"/>
    			</Grid>
    		</Grid>
    	</Grid>
    </UserControl>
    • Proposed as answer by Chuck HaysModerator Thursday, February 18, 2010 2:12 PM
    • Marked as answer by GClaes Thursday, February 18, 2010 4:18 PM
    • Unmarked as answer by GClaes Thursday, February 18, 2010 4:19 PM
    • Marked as answer by GClaes Thursday, February 18, 2010 4:19 PM
    Thursday, February 18, 2010 2:11 PM
    Moderator

All replies

  • I think something like this will provide the effect you are looking for, it uses states to show 3 separate wizard screens, each using behaviors to move to the next state.  There is a 50% black overlay in the back so it is modal.

    Sorry for the huge chunk of xaml, but if you paste it into Blend and fix the classname/namespaces to match your project, you should be able to edit it to see what is happening.

    <UserControl
    	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:local="clr-namespace:SilverlightPrototype9Screens"
    	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity" xmlns:ps="clr-namespace:Microsoft.Expression.Prototyping.SketchControls;assembly=Microsoft.Expression.Prototyping.SketchControls"
    	
    	x:Class="SilverlightPrototype9Screens.Screen_1"
    	Width="640" Height="480">
    
    	<UserControl.Resources>
    		<ResourceDictionary>
    			<ResourceDictionary.MergedDictionaries>
    				<ResourceDictionary Source="ProjectDataSources.xaml"/>
    			</ResourceDictionary.MergedDictionaries>
    			<DataTemplate x:Key="ItemTemplate">
    				<StackPanel>
    					<TextBlock Text="{Binding Property1}"/>
    					<CheckBox IsChecked="{Binding Property2, Mode=TwoWay}"/>
    				</StackPanel>
    			</DataTemplate>
    			<DataTemplate x:Key="Collection1ItemTemplate">
    				<StackPanel>
    					<TextBlock Text="{Binding Property1}"/>
    				</StackPanel>
    			</DataTemplate>
    		</ResourceDictionary>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="00:00:00" To="Base"/>
    					<VisualTransition GeneratedDuration="00:00:00" To="Screen1"/>
    					<VisualTransition GeneratedDuration="00:00:00" To="Screen2"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="Base"/>
    				<VisualState x:Name="Screen1">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)" Duration="00:00:00.0010000">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wizard1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard1" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Screen2">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard2" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.995"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard2" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Screen3">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard3" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Wizard3" Storyboard.TargetProperty="(UIElement.Visibility)">
    							<DiscreteObjectKeyFrame KeyTime="00:00:00">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<controls:TabControl Margin="8,23,8,8" Style="{StaticResource TabControl-Sketch}">
    			<controls:TabItem Style="{StaticResource TabItem-Sketch}" Header="TabItem">
    				<Grid/>
    			</controls:TabItem>
    			<controls:TabItem Style="{StaticResource TabItem-Sketch}" Header="TabItem">
    				<Grid/>
    			</controls:TabItem>
    		</controls:TabControl>
    		<ProgressBar Height="49" Margin="53,90,67,0" Style="{StaticResource ProgressBar-Sketch}" VerticalAlignment="Top"/>
    		<ListBox HorizontalAlignment="Left" Margin="65,175,0,41" Style="{StaticResource ListBox-Sketch}" Width="232" ItemTemplate="{StaticResource ItemTemplate}">
    			<ListBoxItem Margin="0" Content="Item1"/>
    			<ListBoxItem Margin="0" Content="Item2"/>
    			<ListBoxItem Margin="0" Content="Item3"/>
    			<ListBoxItem Margin="0" Content="Item4"/>
    			<ListBoxItem Margin="0" Content="Item5"/>
    			<ListBoxItem Margin="0" Content="Item6"/>
    			<ListBoxItem Margin="0" Content="Item7"/>
    			
    		</ListBox>
    		<ListBox HorizontalAlignment="Right" Margin="0,173,48,55" Style="{StaticResource ListBox-Sketch}" Width="242" ItemTemplate="{StaticResource Collection1ItemTemplate}">
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    			<ListBoxItem Margin="0" Content="ListBoxItem"/>
    		</ListBox>
    		<Button Height="38" HorizontalAlignment="Right" Margin="0,8,25,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="123" Content="Wizard">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Screen1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    		<Grid x:Name="grid" Opacity="0" Visibility="Collapsed">
    			<Rectangle x:Name="rectangle" Fill="#7F000000"/>
    			<Grid x:Name="Wizard1" Margin="183,38,176,72" Opacity="0" Visibility="Collapsed">
    				<ps:SketchRectangleSL Style="{StaticResource Rectangle-Sketch}"/>
    				<TextBlock Margin="18,22,41,81" Style="{StaticResource BasicTextBlock-Sketch}" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" TextWrapping="Wrap"/>
    				<Button Height="38" HorizontalAlignment="Right" Margin="0,0,16,16" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="97" Content="Next">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Screen2"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Button>
    				<TextBlock Height="61" HorizontalAlignment="Left" Margin="46,0,0,16" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Bottom" Width="75" FontSize="48" Text="1" TextWrapping="Wrap"/>
    			</Grid>
    			<Grid x:Name="Wizard2" Margin="183,38,176,72" Opacity="0" Visibility="Collapsed">
    				<ps:SketchRectangleSL Style="{StaticResource Rectangle-Sketch}"/>
    				<TextBlock Margin="18,22,41,81" Style="{StaticResource BasicTextBlock-Sketch}" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" TextWrapping="Wrap"/>
    				<Button Height="38" HorizontalAlignment="Right" Margin="0,0,16,16" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="97" Content="Next">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Screen3"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Button>
    				<TextBlock Height="61" HorizontalAlignment="Left" Margin="46,0,0,16" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Bottom" Width="75" FontSize="48" Text="2" TextWrapping="Wrap"/>
    			</Grid>
    			<Grid x:Name="Wizard3" Margin="183,38,176,72" Opacity="0" Visibility="Collapsed">
    				<ps:SketchRectangleSL Style="{StaticResource Rectangle-Sketch}"/>
    				<TextBlock Margin="18,22,41,81" Style="{StaticResource BasicTextBlock-Sketch}" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum" TextWrapping="Wrap"/>
    				<Button Height="38" HorizontalAlignment="Right" Margin="0,0,16,16" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="97" Content="Finish">
    					<i:Interaction.Triggers>
    						<i:EventTrigger EventName="Click">
    							<pb:ActivateStateAction TargetScreen="SilverlightPrototype9Screens.Screen_1" TargetState="Base"/>
    						</i:EventTrigger>
    					</i:Interaction.Triggers>
    				</Button>
    				<TextBlock Height="61" HorizontalAlignment="Left" Margin="46,0,0,16" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Bottom" Width="75" FontSize="48" Text="3" TextWrapping="Wrap"/>
    			</Grid>
    		</Grid>
    	</Grid>
    </UserControl>
    • Proposed as answer by Chuck HaysModerator Thursday, February 18, 2010 2:12 PM
    • Marked as answer by GClaes Thursday, February 18, 2010 4:18 PM
    • Unmarked as answer by GClaes Thursday, February 18, 2010 4:19 PM
    • Marked as answer by GClaes Thursday, February 18, 2010 4:19 PM
    Thursday, February 18, 2010 2:11 PM
    Moderator
  • Thanks mate, after tinkering around with your code I managed to get it to work, I only had to move my "previous" and "next" buttons.

    ps. I just noticed that when selecting the "Mark as Answer" while typing a reply makes your reply become invisible and impossible to access (hence why I tried to Unmark to no avail)
    Thursday, February 18, 2010 4:22 PM