Silverlight 4 Fluid UI

MiniTutorial

This is the first of many mini-tutorials on Silverlight 4 features.

An enhancement has been made that allows you to add animation when items are added ,or removed from, the list box.  Silverlight 4 adds a new StateGroup to the ListBoxItem class:

ListBoxItemAttributes

A Simple Demo

To demonstrate this, I’ve created a wicked simple demo: the userfluidUIDemo types into the text box, clicks the add button and the text “floats” up into the list.

I begin with a simple Silverlight 4 program in Visual Studio 2010. The grid consists of two rows, whose height is set to the ratio of 5:1.

The top row takes a ListBox and the bottom row a stack panel holding a TextBox and a Button.

The Button’s event handler takes the text from the TextBox and adds it to the ListBox:

   1:  void Add_Click( object sender, RoutedEventArgs e )
   2:  {
   3:     if ( !String.IsNullOrEmpty( StringEntry.Text ) )
   4:     {
   5:        ListOfString.Items.Add( StringEntry.Text );
   6:        StringEntry.Text = string.Empty;
   7:     }  // end if
   8:  }     // end event handler

So Where Is the Magic??

To take advantage of the new FluidUI all you need to do is to set the behavior you want on any or all of the three new Visual States in the LayoutStates group of the ListBoxItem class.

The easiest way to do this is to open the project in Blend and right click on the ListBox. Choose Edit Additional Templates –> Edit Generated Item Container –> Edit a Copy

Name the new template and then click on the ListItem and open the CreateStyleStates tab. For this simple demo, I only modified the Loaded state.

To do so, click on the Loaded state and then expand the timeline. You’ll set new values for the entire Grid (which has 4 sub-elements).

select 0 seconds, and set the opacity to 0 and the  y coordinate of a translate-transform to 200.   Click save keyframe values, and then select 1 second and set the opacity to 1 and the y coordinate to 0. Save the new template.

To connect the new template to the ListBox,, open the Xaml file and add a Style property to the ListBox control (as shown on line 7 below)

   1:  <ListBox x:Name="ListOfString"
   2:     HorizontalAlignment="Stretch"
   3:     VerticalAlignment="Stretch"
   4:     Grid.Row="0"
   5:     Width="225"
   6:     Margin="5"
   7:     ItemContainerStyle="{StaticResource ListBoxItemStyle1}" />

Build and run the program; when you add the text string to the ListBox.Items collection the loaded state is set, your animation is run and the new value floats into place.

Source Code

MainPage.xaml

<UserControl x:Class=”FluidUIDemo.MainPage”

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:dataInput=”clr-namespace:System.Windows.Control ;assembly=System.Windows.Controls.Data.Input”>

<Grid x:Name=”LayoutRoot”

Width=”250″

Height=”200″>
<Grid.RowDefinitions>

<RowDefinition Height=”5*” />

<RowDefinition Height=”1*” />

</Grid.RowDefinitions>

<ListBox x:Name=”ListOfString”

HorizontalAlignment=”Stretch”

VerticalAlignment=”Stretch”

Grid.Row=”0″

Width=”225″

Margin=”5″

ItemContainerStyle=”{StaticResource ListBoxItemStyle1}” />

<StackPanel Orientation=”Horizontal”

Grid.Row=”1″

Margin=”5″

HorizontalAlignment=”Stretch”

VerticalAlignment=”Stretch”>
<TextBox x:Name=”StringEntry”

Height=”24″

TextWrapping=”Wrap”

Text=””

FontFamily=”Georgia”

FontSize=”14″

Width=”171″

HorizontalAlignment=”Left”

VerticalAlignment=”Bottom”

Margin=”5,0,0,0″ />

<Button Content=”Add”

x:Name=”Add”

Height=”24″

FontFamily=”Georgia”

FontSize=”14″

Width=”51″

HorizontalAlignment=”Left”

VerticalAlignment=”Bottom”

Margin=”5,0,0,0″

IsEnabled=”False” />

</StackPanel>

</Grid>

</UserControl>

MainPage.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;

namespace FluidUIDemo
{
   public partial class MainPage : UserControl
   {
      public MainPage()
      {
         InitializeComponent();
         Loaded += new RoutedEventHandler( MainPage_Loaded );
      }

      void MainPage_Loaded( object sender, RoutedEventArgs e )
      {
         Add.Click += new RoutedEventHandler(Add_Click);
         StringEntry.SelectionChanged += new RoutedEventHandler( StringEntry_SelectionChanged );
      }

      void StringEntry_SelectionChanged( object sender, RoutedEventArgs e )
      {
         Add.IsEnabled = !String.IsNullOrEmpty( StringEntry.Text );
      }

      void Add_Click( object sender, RoutedEventArgs e )
      {
         if ( !String.IsNullOrEmpty( StringEntry.Text ) )
         {
            ListOfString.Items.Add( StringEntry.Text );
            StringEntry.Text = string.Empty;
         }  // end if
      }     // end event handler
   }        // end class
}           // end namespace

App.xaml Excerpt

<VisualState x:Name="Loaded">
   <Storyboard>
      <DoubleAnimationUsingKeyFrames
         Storyboard.TargetProperty=           "(UIElement.RenderTransform).           (TransformGroup.Children)[3].           (TranslateTransform.Y)"
         Storyboard.TargetName="grid">
         <EasingDoubleKeyFrame KeyTime="0"
                               Value="200" />
         <EasingDoubleKeyFrame KeyTime="0:0:1"
                               Value="0" />
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames
         Storyboard.TargetProperty="(UIElement.Opacity)"
         Storyboard.TargetName="grid">
         <EasingDoubleKeyFrame KeyTime="0"
                               Value="0" />
         <EasingDoubleKeyFrame KeyTime="0:0:1"
                               Value="1" />
      </DoubleAnimationUsingKeyFrames>
   </Storyboard>
</VisualState>


Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

4 Responses to Silverlight 4 Fluid UI

  1. varun says:

    Here is one I wrotehttp://varunpant.com/demo/Silverlight/water.html [using-WritableBitmap]

  2. joze says:

    Jesse,

    How would I dynamically change 200, or the start position?

    What i was trying to accomplish was to have each listitem have the same flow when moving up when using easing. If I just use 200, the farther down the list I go the items appear to go quicker because they have less room to travel and are closer to 200. How would I accomplish moving the Y for each item so the animations are consistent for all items?

    Thanks!

  3. Zullu says:

    Nice post.
    Do we have the source project for download.

    Thanx.

Leave a Reply

Your email address will not be published.