Custom Listbox Silverlight2

• Download source - 4.57 MB

Introduction

Here I introduce a customized listbox control that represents non sorted items.

Here, you get the features of a new user Interface of a listbox control using Silverlight2 while still supporting the control logic. 

I implemented the listbox items as a custom panel that inherits from Class (Animation class) that inherits from Panel as base class. Animation class draws vectors & shapes the Panel to be drawn supporting animation while rendered. You have control over the speed of animation and supporting randomness of publishing images on surface or not. You can also control the time it takes to animate as all these properties are dependency properties, and you can modify these from the back end XAML.

Integrating this panel as an item for listbox items or data list supports the control with good user interface appearance instead of controlling it from visual state manager or drawing storyboards & time lines.

I also used a library (agtweener) to support tween animation on items and you can control the speed of transition for every item alone. I know my knowledge base isn't great, but I will try to do my best to work on your comments & ideas and update this control.

Background

• Silverlight 2 - You must have the latest version of Silverlight  (run time & SDK)
• C# 3.0 
• Visual Studio 2008 sp1

Using the Code

Just download the zip file (build the solution), then run the test ASPX page.   

This code sample demonstrates how to implement the custom control in the page for using it as an item in the listbox.

It can be used in another Silverlight Data Control:

<UserControl.Resources>
		<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <c:UniformWrapPanel x:Name="CuniformWrapPanel" CellWidth="110"
                                CellHeight="110" Milliseconds="20" 
                                Margin="0,0,0,0" 
                                Randomness="2" 
                                RandomAngel="True"
                                Width="700"
                                VerticalAlignment="Stretch"
                                >
            </c:UniformWrapPanel>
        </ItemsPanelTemplate>
	</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox x:Name="lstbox_Images" Width="800" 
                 ItemsPanel="{StaticResource ItemsPanelTemplate}" 
                 Loaded="lstbox_Images_Loaded" RenderTransformOrigin="0.5,0.5"
                  >
        	<ListBox.RenderTransform>
        		<TransformGroup>
        			<ScaleTransform/>
        			<SkewTransform/>
        			<RotateTransform/>
        			<TranslateTransform/>
        		</TransformGroup>
        	</ListBox.RenderTransform>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Black" 
                     x:Name="MyStackPanel"  Margin="0,0,0,0"   
                     HorizontalAlignment="Center" VerticalAlignment="Center" 
		   Height="100" RenderTransformOrigin="0.5,0.5">
                     <Image Width="100" Height="100" 
				Source="{Binding Path=Img_Source}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid> 

Points of Interest 

• Learn how to use tweener in Silverlight2 animation
• How to customize Listbox control animation as you want and control the speed and transition of every item