Introduction
In this post I’ll try to show you how to animate ListBoxItem’s in Silverlight 2 using Expression Blend 2 SP1. Before going deep into this demonstration of animating ListBoxItems, here’s a little about ListBox. It is actually an ItemsControl which can contain a collection of items. This contents can be set by using it’s Items and ItemSource property and of course it contains a list of selectable items. Here’s our completed improvised ListBox:
Creating Project In ExpressionBlend 2 SP1
Create a new project by opening Expression Blend 2 and Select New Project from the File Menu. From the Asset Library select a ListBox . Double click the LayoutRoot in the Objects and Timeline Panel to activate the Layout panel where you want to place the ListBox. Now double click the ListBox to add it as a children of the LayoutRoot from the Toolbox. Now let’s check the elements of the ListBox first. Right click over the ListBox and goto the Edit Control Parts and and then select Edit a Copy :
This will bring up Create Style Resource dialog box :
Creating Style
Name the Style anything you want. In this case I’m naming it MyListBoxStyle. Also you’ll find two option in Create Style Resource dialog box for defining the style in Application level to create a global resource or defining it in document level to create a local resource. Creating a local resource sometimes causes confusing situation. Cause all the resources created inside UserControl.Resources section in you page which sometimes makes things messy. I personally like to create resources globally. So in this example I’m defining the application level resource or global resource. After defining Style for ListBox you’ll be able to see the elements of the ListBox like the following screen shot :
There you’re. Now elements of ListBox is visible. Notice that ListBox Contains a Border as the root element and inside this Border there’s a ScrollViewer and Inside the ScrollViewer there’s a ItemsPresenter as it’s child. You style these elements any way you like by changing the properties. Just select the elements in the Objects and Timeline panel and change the properties. You can also edit the template of the ScollViewer to give your ListBox a unique look.
Customizing the ScrollViewerTemplate
Let’s change the the ScrollViewer Template to give it a different look. Select ScrollViewer in the Objects and Timeline panel and then right click over it navigate to Edit Control Parts(Template) -> Edit a Copy.
This will allow to show inner elements of ScrollViewer. In the objects and Timeline panel you’ll be able to notice that ScrollViewer contains Border as the root of it’s element. Inside the Border there’s a Grid as the Child of this root element and Grid contains ScrollContentPresenter, Rectangle, VerticalScrollbar and HorizontalScrollbar. Delete the Rectangle from the objects and Timeline Panel and select HorizontalScrollBar to set it’s ColumnSpan to 2.
Right click over the VerticalScrollbar and go to Edit Control Parts(Template) –> Edit a copy. Name the style, in this case I’m giving it the name MyScrollbarStyle. This will again allow to show the inner elements like you able to show the inner elements of ScrollViewer.
Look carefully at the inner elements of Scrollbar. There’s a Grid at the root and it has also two Grid’s as it’s child named HorizontalRoot and VerticalRoot. Expand VerticalRoot in the Objects and Timeline panel. This will allow you to view the elements like the screen shot below :
Take look at the screen shot, it has three rectangles and then two RepeatButton’s named VerticalSmallDecrease and VerticalLargeDecrease and a Thumb name VeticalThumb and again two RepeatButton’s named VerticallargeIncrease and VerticalSmallIncrease. VerticalSmallDecrease is the Button at the top.
VerticalLargeDecrease is the Space between the button at the top and the VerticalThumb.
VerticalThumb is a Thumb control which allows the dragging interaction of Scrollbar.
VerticalLargeIncrease is the space between the button at the bottom and the VerticalThumb.
VerticalSmallIncrease is the Button at the bottom.
Select the first Rectangle and change some properties of the Rectangle. Since this post is getting bigger. I’m not going into the details about how to set the properties of the first Rectangle from Blend. I hope by now you understand very well how to do it from Blend. I’m showing you here a short cut approach. Just select the first Rectangle in the Objects and Timeline and then select View Xaml and paste the following Xaml for the first Rectangle.
<Rectangle Grid.RowSpan="5" Stroke="#00000000" StrokeThickness="1"
RadiusX="9" RadiusY="9">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
<GradientStop Color="#FF858586"/>
<GradientStop Color="#FF7E7E7E" Offset="0.455"/>
<GradientStop Color="#FF818184" Offset="0.991"/>
<GradientStop Color="#FF49494F" Offset="0.647"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Repeat this step for the second and third Rectangle and paste the following Xaml :
<Rectangle Grid.RowSpan="5" Opacity=".375"
StrokeThickness="0" RadiusX="9" RadiusY="9">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FFADADAD"/>
<GradientStop Color="#FF6E6969" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF101010"/>
<GradientStop Color="#FF888888" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Margin="1" Grid.RowSpan="5" RadiusX="7"
RadiusY="7" StrokeThickness="3">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.125,0.5"
StartPoint="0.875,0.5">
<GradientStop Color="#FFABABAB"/>
<GradientStop Color="#FD7C7C7C"
Offset="0.996"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
Select Thumb in the Objects and Timeline panel and right click over it to edit the template of the thumb like you previously did. It Contains a Grid as it’s Root Element and Inside this Grid threre’s another Grid as It’s child named ThumbVisual and then five Rectangles named Background, BackgroundMouseOver,BackgroundPressed,BackgroundGradient and Highlight.
Follow the previous way to set the properties of the elements of the thumb. Here’s the completed Thumb Template
<ControlTemplate x:Key="VerticalThumbTemplate" TargetType="Thumb">
<Grid >
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundMouseOver"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundPressed"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ThumbVisual"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid Margin="1,0,1,0" x:Name="ThumbVisual">
<Rectangle x:Name="Background"
StrokeThickness="1" RadiusX="6"
RadiusY="6" Margin="0,0,0,1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF666464"/>
<GradientStop Color="#FFADADAD" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="1,.5"
StartPoint="0,.5">
<GradientStop Color="#FFB1B1B1" Offset="1"/>
<GradientStop Color="#FFC2C9CE" Offset="0"/>
<GradientStop Color="#FF9D9D9D" Offset="0.35"/>
<GradientStop Color="#FFABADAF" Offset="0.692"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundMouseOver"
Stroke="#00000000" StrokeThickness="1"
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF8E8D8D"/>
<GradientStop Color="#FFC1BEBE" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="BackgroundPressed" Opacity="0"
Fill="#FF939393" Stroke="#00000000" StrokeThickness="1" RadiusX="2" RadiusY="2"/>
<Rectangle Margin="1" x:Name="BackgroundGradient" Stroke="#FFFFFFFF"
StrokeThickness="1" RadiusX="1" RadiusY="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,.7" StartPoint="0,.7">
<GradientStop Color="#FF727070" Offset="0"/>
<GradientStop Color="#F9646464" Offset="0.451"/>
<GradientStop Color="#E55E5E5E" Offset="0.741"/>
<GradientStop Color="#C6807E7E" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Margin="1" x:Name="Highlight"
Opacity="0" Stroke="#FFE4E4E4"
StrokeThickness="1" RadiusX="1" RadiusY="1"/>
</Grid>
</Grid>
</ControlTemplate>
By now you should have a VerticalScrollBar like this :
We’ve completed the Vertical part and our VericalSrollBar is now styled and has a new look. To set the same style to the HorizontalScrollBar, go to the Objects and Timeline panel right click over the HorizontalScrollBar and go down to Apply Control Parts(Template)-> Apply Resource-> MyScrollBarStyle. That’s it. Your HorizontalScrollBar is now has the same Style as your VerticalScrollBar. I’ve also tweakted a little the Template of the HorizontalScrollBar but I’m not going to discuss that here. You’ll find the entire MyScrollBarStyle in the attched code. Now get back to ListBoxTemplate and Set the Background and Foreground of the ScrollViewer.
Defining ListBoxItemStyle
It’s time to tweaking the ListBoxItem now. Before customizing the ListBoxItem. Let me tell you about what ListBoxItem actually does. ListBoxItem represents a selectable item in a ListBox. According to the Silverlight documentation, a ListBox contains a collection of ListBoxItem objects. You can bind data to ListBoxItem by setting the ItemTemplate property of a ListBox to DataTemplate. By default the Horizontal alignment of a ListBoxItem is set to Stretch. ListBoxItem is a ContentControl. It’s Content property is Content.
ListBoxItem has the following States :
Normal,MouseOver,Focused,Unfocused,Selected,Unselected and SelectedUnfocused.
Here’s the Default ListBoxItemStyle :
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="3" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="fillColor"
Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="fillColor2"
Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor"
Opacity="0" Fill="#FFBADDE9"
IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<Rectangle x:Name="fillColor2"
Opacity="0" Fill="#FFBADDE9"
IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Left"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement"
StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Paste this in the App.xaml section. Name this Style to MyListBoxItemStyle. Cause you’re going to turn it into your own style. Now switch to the design view and then switch to the resources panel which is just after the properties panel. Select MyListBoxItemStyle. If you put mouse over the Style you’ll see Edit Resources Tooltip on mouse over. Click over it to edit the resources or you can right click over it to edit the resources. You’ll be able to see a breadcrumb bar at the top left corner.
Click over the breadcrumb bar in the Obects and Timeline panel and go down to Edit Control Parts(Template) – > EditTemplate .
Setting VSM for ListBoxItem elemetns
In the next screen shot I’m going to show you how I set the VSM and properties of the ListBoxItem Elements to get the desired animated effect :
According to the above screen shot at first I’ve set the Duration of the CommonStates to 0.2 seconds which is our default transition state. Then I’ve set the Duration of the NormalStates to 0.2 seconds. That mean this will take 2 seconds to change the states of elements from Normal to MouseOver. Now select MouseOver set it’s duration to 0.1 in the States panel. Select Grid in the Objects and Timelines panel this will take you to the recording mode. Every changes to the properties will be recorded for the MouseOver state. Go down to the Transform area in the properties panel to set the Transform property for the Grid. Select ScaleTransform and set X to 1 and Y to 1.25.
Now set SelectionStates default trasition duration to 0.2. Go to the Selected States, set default transition duration to 0.2 , set Unselected to Unselected states duration to 0.1. Set 0.1 for Selected States. When you click over the SelectedState you’ll be able to see all the elements in the Objects and timeline panel are in recording mode.
You’ll be also able to see which properties of the elements I’ve animated. Here’s a complete Xaml for MyListBoxItem Style :
<Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid"
Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<vsm:VisualStateManager.VisualStateGroups>
vsm:VisualStateGroup x:Name="CommonStates">
vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition
GeneratedDuration="00:00:00.2000000"/>
<vsm:VisualTransition From="MouseOver"
GeneratedDuration="00:00:00.1000000"/>
<vsm:VisualTransition From="Normal"
GeneratedDuration="00:00:00.2000000" To="MouseOver"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="grid"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[3].(ScaleTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000" Storyboard.TargetName="grid"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="grid"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition
GeneratedDuration="00:00:00.2000000"/>
<vsm:VisualTransition From="Selected"
GeneratedDuration="00:00:00.1000000" To="Unselected"/>
<vsm:VisualTransition
GeneratedDuration="00:00:00.2000000" To="Selected"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00" Storyboard.TargetName="fillColor"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Duration="00:00:00.0010000">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Duration="00:00:00.0010000">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.05"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty=
"(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
Duration="00:00:00.0010000">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="2"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(UIElement.IsHitTestVisible)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame
KeyTime="00:00:00.2000000">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition
GeneratedDuration="00:00:00.1000000"/>
<vsm:VisualTransition From="Focused"
GeneratedDuration="00:00:00.1000000" To="Unfocused"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Visibility" Duration="00:00:00.0010000">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00.0010000"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#00F4F08C"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Opacity="0" Fill="{x:Null}"
IsHitTestVisible="False" RadiusX="1" RadiusY="1"
RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="fillColor2"
Opacity="0" Fill="{x:Null}" IsHitTestVisible="False"
RadiusX="1" RadiusY="1"/>
<Rectangle x:Name="FocusVisualElement"
StrokeThickness="1" Visibility="Collapsed"
RadiusX="1" RadiusY="1" Stroke="{x:Null}"RenderTransformOrigin="0.5,0.5"
Fill="#50F4F08C" OpacityMask="{x:Null}" >
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Center"
Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5">
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
At this point I’ve complete all the inner workings needed to animate items which will be added to the ListBox. In fact a Stylized ListBox I’ve shown you earlier.
Adding data for the ListBox
To add some data in the ListBox I’ve created a class named Story. Cause I’m going add Story thumbnail and name and Url of the strory which has been submitted to DotNetShoutOut. So I’ve added a Class named String Extension and Story in my project. Which is a fairly simple class and damn easy to understand.
public static class StringExtension
{
public static string WrapAt(this string target, int index)
{
const int DotCount = 3;
return (target.Length <= index) ?
target : string.Concat(target.Substring
(0, index - DotCount), new string('.', DotCount));
}
}
public class Story
{
public string Name
{
get;
private set;
}
public BitmapImage ImageUrl
{
get;
private set;
}
public Uri SiteUrl
{
get;
private set;
}
public string ShortUrl
{
get
{
return SiteUrl.ToString().WrapAt(23);
}
}
public string ShortName
{
get
{
return Name.WrapAt(47);
}
}
public Story(string storyName, string imageUrl, Uri url)
{
Name = storyName;
ImageUrl = new BitmapImage(
new Uri(imageUrl, UriKind.Absolute));
SiteUrl = url;
}
}
Go back to the Page.Xaml and define DataTemplate and ItemsPanelTemplate. One to note about ItemsPanel property of the ListBox is, this is actually gets or sets the template that actually defines the Panel that controls the layout of items. Since ListBox is an ItemsControl which I mentioned at the start of this post, ItemsPanelTemplate will serve us the purpose of controlling the layout of our items inside the ListBox. Here’s the defined Template for the ItemsPanel of the ListBox :
<UserControl.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel Orientation="Horizontal" Height="200"/>
</ItemsPanelTemplate>
</UserControl.Resources>
As you can see in the above Xaml, ItemsPanelTemplate contains a StackPanel with it’s Orientation set to Horizontal and Height to 200 . This will allow us to show our ListBoxItems Horizontally. Go down to your LayoutRoot section in the Page.Xaml and fix some background for the LayoutRoot which is a Grid in this app. I’ve used the following LinearGradient for the Background :
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF969696" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
It’s time to decorate our ListBox. Go down to the ListBox section and add the following Xaml :
<ListBox Height="192" VerticalAlignment="Top" HorizontalAlignment="Stretch"
Margin="49.5,0,56.5,0" x:Name="ImageList"
Style="{StaticResource MyListBoxStyle}"
ItemsPanel="{StaticResource ItemsPanelTemplate1}"
RenderTransformOrigin="0.5,0.5"
ItemContainerStyle="{StaticResource MyListBoxItemStyle}"
d:LayoutOverrides="VerticalAlignment">
In the above Xaml you can see that I’ve assigned all the resources I’ve created so far. For Style property I’ve assigned the resourse MyListBoxStyle. For ItemsPanel I’ve assigned ItemsPanelTemplate1 and for ItemContainerStyle , I’ve assigned the ListBoxItem Style I created earlier which is MyListBoxItemStyle. But this is not enough for showing our data.
Creating DataTemplate for the ListBox
We need to define a DataTemplate to show the thumbnail of the story, name and url. Let’s define a Template by pasting the following Xaml :
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Path=ImageUrl}"
Width="190" Height="130"
Margin="1,1,1,1" Stretch="Uniform" Grid.Row="0"/>
<TextBlock Text="{Binding Path=shortName}"
TextAlignment="Center"
Width="190" TextWrapping="Wrap"
HorizontalAlignment="Center"
FontWeight="Bold" Grid.Row="1" />
<HyperlinkButton Width="190" Height="150"
NavigateUri="{Binding Path=SiteUrl}"
Content="{Binding Path=shortUrl}" Foreground="Black"
FontWeight="Bold" HorizontalAlignment="Center"
VerticalAlignment="Stretch" Grid.Row="2"
ToolTipService.ToolTip="{Binding Path=SiteUrl}"/>
</Grid>
</DataTemplate>
In the above Xaml I’ve structured a Grid with 3 rows and place elements in each row. I’ve Used an Image in order to view the thumbnail of the story and bound ImageUrl to the source property of the Image. The ImageUrl I defined in the Story class which is actually a type of BitmapImage. To view the story title or name I’ve bound shortName to the Text property of the TextBlock. To view the url of the story, I bound shortUrl to the content property of the HyperlinkButton and used attachedProperty ToolTipService.Tooltip for viewing the complete Url when mouse is over the Hyperlink by binding to SiteUrl . Cause most of the time url’s are too big. That’s why I’ve shortened the characted and take advantage of the ToolTip to see the complete url on mouse over. That’s it. We’ve completed a Styled ListBox with some animation capability for the ListBoxItems. Run the application . If you follow exactly what I did, you’ll be able to see your running application like this :
I hope you’ve enjoyed this demonstration of Styling ListBox and animating ListBoxItems.
StyledListBox.zip