Tag: SketchFlow

Loading a specific tab when navigating to a page in SketchFlow

A user on the expression forums asked a question about how they could activate a specific tab item on a screen being navigated to. Below is a simple behavior that creates the desired behavior.

This works by assigning a behavior to the click event on the object that triggers the navigation in addition to the navigation behavior. When executed it saves the desired tab name to a static variable that is then read by a behavior attached to TabItems in the target screen. If the text name assigned on each end matches, that tab is activated. The names do not need to correspond with the name of the TabItem or source item in xaml, they can be assigned any string as long as it is identical on each end.

The behavior attached to the TabItems must have its trigger set to loaded so it runs when the screen is displayed.

In the example code below there are 2 buttons that navigate to screen 2, one of the targets the TabItem “One”, and the other “Two.” As I said previously, these names are arbitrary. On screen 2, the TabControl has 2 TabItems, each with a behavior that specifies the matching TabName (“One” or “Two”). These 2 behaviors are set to run on the loaded event, so they are run when the screen is displayed.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;
namespace WpfPrototype20Screens
{
	public class SaveTabNameAction : TriggerAction<DependencyObject>
	{
		public static readonly DependencyProperty TargetTabNameProperty = DependencyProperty.Register("TargetTabName", typeof(string), typeof(SaveTabNameAction), new PropertyMetadata("TabName"));

		public string TargetTabName
		{
			get { return (string)GetValue(TargetTabNameProperty); }
			set { SetValue(TargetTabNameProperty, value); }
		}

		protected override void Invoke(object parameter)
		{
			LastTabName = this.TargetTabName;
		}

		public static string LastTabName { get; set; }
	}

	public class ActivateTabOnNavigationAction  : TriggerAction<TabItem>
	{
		public static readonly DependencyProperty TabNameProperty = DependencyProperty.Register("TabName", typeof(string), typeof(ActivateTabOnNavigationAction), new PropertyMetadata("TabName"));

		public string TabName
		{
			get { return (string)GetValue(TabNameProperty); }
			set { SetValue(TabNameProperty, value); }
		}

		protected override void Invoke(object parameter)
		{
			if(!string.IsNullOrWhiteSpace(SaveTabNameAction.LastTabName) && this.TabName == SaveTabNameAction.LastTabName)
			{
				SaveTabNameAction.LastTabName = string.Empty;
				// Try to activate this tab.
				var tc = this.AssociatedObject.Parent as TabControl;
				if (tc == null)
				{
					return;
				}
				tc.SelectedItem = this.AssociatedObject;
			}
		}
	}
}
<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" 
	xmlns:local="clr-namespace:WpfPrototype20Screens" 
	x:Name="Screen_1_Name"
	mc:Ignorable="d"
	x:Class="WpfPrototype20Screens.Screen_1"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot" Background="White">
		<Button Content="Button" HorizontalAlignment="Left" Height="42" Margin="72,35,0,0" Style="{DynamicResource Button-Sketch}" VerticalAlignment="Top" Width="67">
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<local:SaveTabNameAction TargetTabName="One"/>
					<pi:NavigateToScreenAction TargetScreen="WpfPrototype20Screens.Screen_2"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>
		<Button Content="Button" HorizontalAlignment="Left" Height="38" Margin="72,81,0,0" Style="{DynamicResource Button-Sketch}" VerticalAlignment="Top" Width="67">
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<local:SaveTabNameAction TargetTabName="Two"/>
					<pi:NavigateToScreenAction TargetScreen="WpfPrototype20Screens.Screen_2"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>
	</Grid>
</UserControl>
<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:local="clr-namespace:WpfPrototype20Screens" 
	x:Name="Screen_2_Name"
	mc:Ignorable="d"
	x:Class="WpfPrototype20Screens.Screen_2"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot" Background="White">
		<TabControl x:Name="TabControl" Margin="44,28,27,31">
			<TabItem Header="TabItem">
				<i:Interaction.Triggers>
					<i:EventTrigger>
						<local:ActivateTabOnNavigationAction TabName="One"/>
					</i:EventTrigger>
				</i:Interaction.Triggers>
				<Grid Background="#FFE5E5E5"/>
			</TabItem>
			<TabItem Header="TabItem">
				<i:Interaction.Triggers>
					<i:EventTrigger>
						<local:ActivateTabOnNavigationAction TabName="Two"/>
					</i:EventTrigger>
				</i:Interaction.Triggers>
				<Grid Background="#FFE5E5E5"/>
			</TabItem>
		</TabControl>
	</Grid>
</UserControl>

Blend 4: Collaborative SketchFlow Feedback with SharePoint

Check out the new collaborative feedback using SharePoint features in Expression Blend/SketchFlow 4.

http://electricbeach.org/?p=706


Copyright © 1996-2010 ChuckHays.net. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress