Friday, November 20, 2009

Silverlight 4 Fluid UI

by jesseliberty via Jesse Liberty - Silverlight Geek on 11/20/2009 4:06:20 PM

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:

A Simple Demo

To demonstrate this, I’ve created a wicked simple demo: the user 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 States 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>