Customize UXFlow Appearance Based on Item Position

The latest ClientUI release (2011 R2 SP1) introduces several enhancements for UXFlow control. Some of the significant enhancements are the new AutoReflection property and PositionStates visual states. They are introduced to set different styles in UXFlowItem according to its position.

The new PositionStates enhancement enables you to customize the layout and appearance of the item based on the flow position. See the following illustration.

Customize UXFlowItem based on the position

In this blog, I’m going to share how to achieve the above scenario in a step-by-step walkthrough.

1. Put additional text to the UXFlowItem.

You will need Microsoft Expression Blend to edit the ItemContainerStyle of the UXFlow control.Edit ItemContainerStyle

After the generated template is shown, put the text in CoverElementPerspective. CoverElementPerspective contains the ImageLoader of UXFlowItem. That’s the reason why the text requires to be put in that element. In this case, TextBlock is used as the text.

To easily maintain the layout, let’s use Grid and StackPanel container with configuration as shown below:

<Intersoft:ContentPerspective x:Name="CoverElementPerspective" AutoRefresh="False" EnableReflection="{TemplateBinding EnableReflection}" VerticalContentAlignment="Bottom">
     <Border Background="Silver" BorderBrush="#8D8D8D" BorderThickness="2" CornerRadius="8">
          <StackPanel>
                 <Grid >
                        <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto"/>
                                   <ColumnDefinition/>
                                   <ColumnDefinition Width="Auto"/>
                              </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Intersoft:ContentTransformer x:Name="ContentTransformer" Grid.ColumnSpan="2">
                               <TextBlock Text="{Binding Contact.Name}" FontSize="24" Margin="4" HorizontalAlignment="Center"/>
                        </Intersoft:ContentTransformer>
                        <Intersoft:ImageLoader Grid.Row="1" Grid.Column="1"   ImageStretch="None" x:Name="CoverElementImage" AutoSyncPerspectiveReflection="False" ImageSource="{TemplateBinding ImageSource}" ProgressBarHorizontalAlignment="Stretch" ProgressBarVerticalAlignment="Bottom" ProgressTextVisibility="Collapsed"  ProgressBarMargin="15,0,15,15"/>
                </Grid>
                <StackPanel x:Name="info" >
                        <TextBlock Text="{Binding Contact.Email}" TextAlignment="Center" FontSize="10" />
                        <TextBlock Text="{Binding Contact.Twitter}" TextAlignment="Center" FontSize="10"/>
                </StackPanel>
         </StackPanel>
    </Border>
</Intersoft:ContentPerspective>                                                                                                                                                                                                                                                                                                                    

2. Implement the visual state and switch the position by using PositionStates in VisualStateGroup.

As stated before, PositionStates is available only in the SP1 release.

<VisualStateGroup x:Name="PositionStates">     
     <VisualState x:Name="LeftSide"/>     
     <VisualState x:Name="Center"/>     
     <VisualState x:Name="RightSide"/> 
</VisualStateGroup>

The PositionStates is automatically generated after you use EditItemContainer template.

Center is the default state when an item is selected. Therefore, you only need to customize position, animations and styles for the LeftSide and RightSide.

<VisualStateGroup x:Name="PositionStates">
      <VisualState x:Name="LeftSide">
             <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Transform)" Storyboard.TargetName="ContentTransformer">
                          <DiscreteObjectKeyFrame KeyTime="0">
                                 <DiscreteObjectKeyFrame.Value>
                                        <CompositeTransform Rotation="-90"/>
                                 </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Margin)" Storyboard.TargetName="ContentTransformer">
                         <DiscreteObjectKeyFrame KeyTime="0" Value="20,20,0,20">                     
			 </DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ContentTransformer">
                     	 <DiscreteObjectKeyFrame KeyTime="0">                          
			 	<DiscreteObjectKeyFrame.Value>                               
					<System:Int32>1</System:Int32>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ContentTransformer">
                        <DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<System:Int32>2</System:Int32>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>                
		   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="info">                     
			<DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<Visibility>Collapsed</Visibility>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>                
		   </ObjectAnimationUsingKeyFrames>          
	     </Storyboard>     
       </VisualState>     
       <VisualState x:Name="Center"/>     
       <VisualState x:Name="RightSide">          
	    <Storyboard>               
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Transform)" Storyboard.TargetName="ContentTransformer">                     
			<DiscreteObjectKeyFrame KeyTime="0">                          
				<DiscreteObjectKeyFrame.Value>                               
					<CompositeTransform Rotation="90"/>                          
				</DiscreteObjectKeyFrame.Value>                     
			</DiscreteObjectKeyFrame>               
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Margin)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0" Value="0,20,20,20">                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>2</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ContentTransformer">
                    	<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>1</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ContentTransformer">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<System:Int32>2</System:Int32>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>              
		  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="info">                    
			<DiscreteObjectKeyFrame KeyTime="0">                         
				<DiscreteObjectKeyFrame.Value>                              
					<Visibility>Collapsed</Visibility>                         
				</DiscreteObjectKeyFrame.Value>                    
			</DiscreteObjectKeyFrame>              
		  </ObjectAnimationUsingKeyFrames>         
	   </Storyboard>      
     </VisualState> 
</VisualStateGroup>

3. Set AutoRefreshReflection to true.

When using the default UXFlow configuration, the reflection will be automatically cached. This may cause a reflection issue while switching the styles. To avoid this issue, simply set AutoRefreshReflection to true.

You can also download the sample project for your references.

I hope this post can give you some insights about styling with UXFlow control. As usual, feedback and comments are always welcome.

Warm Regards,
Handy

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s