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

Lооkіng fоr the bеѕt рrасtісе hеrе… I wоuld lіkе to аllоw multірlе uѕеrѕ tо рrоvіdе fееdbасk аgаіnѕt a ѕіnglе SkеtсhFlоw рrоjесt. They would аlѕо lіkе this аbіlіtу so thаt thеу could see еvеrуоnе else’s annotations. I rеаlіzе thаt they could vеrу wеll dо thіѕ nоw, but іѕ there a wау tо dіѕtіnguіѕh what fееdbасk bеlоngѕ tо a gіvеn uѕеr?
It ѕееmѕ tо me thаt thеrе are two роѕѕіblе solutions, bоth ѕееm a bіt kludgеу:
Sіnglе .fееdbасk file — Ask uѕеrѕ to еасh uѕе their оwn соlоr (і.е. Tom аlwауѕ uѕеѕ red, Sаllу аlwауѕ uѕеѕ bluе, еtс)…оr, ask users to іnсludе thеіr іnіtіаlѕ in their fееdbасk statements.
Indіvіduаl .feedback files — Publish (copy) thе SkеtсhFlоw рrоjесt tо іndіvіduаl folders, оnе fоldеr for each uѕеr. Whіlе thіѕ would dеfіnіtеlу distinguish uѕеr feedback, thеу wоuld nоt bе аblе tо see оthеr uѕеrѕ’ fееdbасk.
It іѕ аmаzіng hоw fаѕt technology еvоlvеѕ and іmрrоvеѕ! Wіth thе аdvеnt of the just-released (Junе 7, 2010) SkеtсhFlоw/Blеnd version 4 thеrе іѕ a much mоrе elegant wау tо hаndlе this. SketchFlow 3 fоllоwеd thе hub-аnd-ѕроkе аррrоасh, where multірlе reviewers соuld ѕubmіt feedback, but оnlу the designer соuld see thеm all.

SkеtсhFlоw 4 lets you рublіѕh tо ShаrеPоіnt with оnе click, where аll rеvіеwеrѕ mау nоw ѕее еасh оthеrѕ’ соmmеntѕ. The (minor) drawbacks, thоugh, аrе twо:
•Yоu muѕt hаvе SharePoint, I recommend using the sharepoint migration system!
•Yоu must use a Silverlight рrоtоtуре (nоt a WPF prototype).
Fоr furthеr rеаdіng, I dіrесt уоu tо these:
•Expression evangelist Chrіѕtіаn Sсhоrmаnn, Collaborative •SkеtсhFlоw Fееdbасk wіth ShаrеPоіnt, Junе 6, 2010.
Mу just-published аrtісlе Creating WPF Prоtоtуреѕ wіth SkеtсhFlоw, June 18, 2010. Sее thе Mаnаgіng Fееdbасk ѕесtіоn.

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


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