locked
Simulating a child window RRS feed

  • Question

  • Hi

    I'm using blend 3 sketchflow and I want to simulate the idea of a child window (aka dialog) being displayed when a search button is clicked. The child window wants to be displayed from two different screens.

    So far, I have created a Component screen in sketchflow to represent the child window. I link this component screen to two different screens. On each screen I have created a state called ShowChild. Under normal circumstances the component screen is Hidden:Collapsed on both real screens. The two visual states change the components visibility to Visible.

    This is working ok. When the two search buttons are clicked the child window is shown.

    No it comes to dismissing the child window. Ideally I want the OK button to call say an OK action on the parent window and the Cancel button call a Cancel Action but I cannot find a way of referencing the parent window in the TargetScreen property of the ActivateStateAction attached to the buttons.

    Doing this I could then have the OK states in both screens that respond to the child window closing.

    Is there a better way of doing this?

    Thanks for your help

    Graham

    Thursday, January 20, 2011 5:37 PM

Answers

  • There are several ways to do this, if this is just a prototype (sounds like it is) I would do it the simple way, which would be to create a ok button in each place you use the component screen that hides/shows along with the component screen, and triggers the hidden state. It will appear like it is in the component screen, but is not actually. You would have to duplicate this on each screen.

    Another option would be to put the hide/show states inside the component screen. Since the button that shows the component screen can trigger states inside the component, it can show the content, and the button inside the component screen can hide its own content.

    An example of the 2nd way is:

    <Grid x:Name="LayoutRoot" Background="White">
    		<local:Screen_2 HorizontalAlignment="Left" VerticalAlignment="Top" d:IsPrototypingComposition="True"/>
    		<Button Content="Button" HorizontalAlignment="Left" Height="48" Margin="48,0,0,176" Style="{DynamicResource Button-Sketch}" VerticalAlignment="Bottom" Width="104">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pi:ActivateStateAction TargetState="Show" TargetScreen="WpfPrototype3Screens.Screen_2"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    	</Grid>
    
    <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" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" x:Name="WpfPrototype3Screens_Screen_2_Name"
    	mc:Ignorable="d"
    	x:Class="WpfPrototype3Screens.Screen_2"
    	Width="200" Height="200">
    
    	<Grid x:Name="LayoutRoot" Visibility="Collapsed">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualState x:Name="Show">
    					<Storyboard>
    						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
    							<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Hide"/>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Rectangle Fill="#FF3C3CFF" Margin="8" Stroke="Black"/>
    		<Button Content="OK" Height="32" Margin="80,0,48,32" Style="{DynamicResource Button-Sketch}" VerticalAlignment="Bottom">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pi:ActivateStateAction TargetState="Hide"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    	</Grid>
    </UserControl>
    

    • Proposed as answer by Chuck HaysModerator Thursday, January 20, 2011 6:39 PM
    • Marked as answer by LordTitan Friday, January 21, 2011 8:27 AM
    Thursday, January 20, 2011 6:39 PM
    Moderator

All replies

  • There are several ways to do this, if this is just a prototype (sounds like it is) I would do it the simple way, which would be to create a ok button in each place you use the component screen that hides/shows along with the component screen, and triggers the hidden state. It will appear like it is in the component screen, but is not actually. You would have to duplicate this on each screen.

    Another option would be to put the hide/show states inside the component screen. Since the button that shows the component screen can trigger states inside the component, it can show the content, and the button inside the component screen can hide its own content.

    An example of the 2nd way is:

    <Grid x:Name="LayoutRoot" Background="White">
    		<local:Screen_2 HorizontalAlignment="Left" VerticalAlignment="Top" d:IsPrototypingComposition="True"/>
    		<Button Content="Button" HorizontalAlignment="Left" Height="48" Margin="48,0,0,176" Style="{DynamicResource Button-Sketch}" VerticalAlignment="Bottom" Width="104">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pi:ActivateStateAction TargetState="Show" TargetScreen="WpfPrototype3Screens.Screen_2"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    	</Grid>
    
    <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" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" x:Name="WpfPrototype3Screens_Screen_2_Name"
    	mc:Ignorable="d"
    	x:Class="WpfPrototype3Screens.Screen_2"
    	Width="200" Height="200">
    
    	<Grid x:Name="LayoutRoot" Visibility="Collapsed">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualState x:Name="Show">
    					<Storyboard>
    						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
    							<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Hide"/>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Rectangle Fill="#FF3C3CFF" Margin="8" Stroke="Black"/>
    		<Button Content="OK" Height="32" Margin="80,0,48,32" Style="{DynamicResource Button-Sketch}" VerticalAlignment="Bottom">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<pi:ActivateStateAction TargetState="Hide"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    	</Grid>
    </UserControl>
    

    • Proposed as answer by Chuck HaysModerator Thursday, January 20, 2011 6:39 PM
    • Marked as answer by LordTitan Friday, January 21, 2011 8:27 AM
    Thursday, January 20, 2011 6:39 PM
    Moderator
  • Thanks for the ideas Chuck.

     

    I'm using your first suggestion and it's working fine. However, just a quick question on your second idea:

    I already had my component screen containing the state that hides itself, the problem I had was, as in my example, my component screen had two buttons, OK and Cancel. Both buttons close the component screen. The bit I can't work out is how I can get the parent screens (the one the component screen is embedded in) to respond differently depending on which button closed the component screen.

    Thanks again.

    Graham

    Friday, January 21, 2011 8:38 AM
  • Ahh, I see. In production work you would expose events on your component object for the different things, but that is likely not worth it for prototyping.
    Friday, January 21, 2011 1:36 PM
    Moderator