Download Project (5.72 kb)
This sample is to demonstrate following concepts in silverlight controls.
- How to use ListBox control?
- How to create a StoryBoard from codebehind to add animation?
- How to handle events from ListBox items?
How to use ListBox control?
There is nothing complicated in using ListBox control in Silverlight applications. There
is standard out of the box ListBox control provided by framework that you can drag on
the control surface. Set properties to control rendering behavior and you are done. For the
sample attached with the project, XAML looks as follows.
<ListBox x:Name="MyListBox" Height="400" Width="Auto" Grid.Column="0" Grid.Row="1" />
Next thing you need to do is bind this list box to some data source to display collection of
your data. For this example I added an Image and a TextBlock as one ListBoxItem in this
ListBox. Following code demostrates how it was done.
private void InitializeList()
{
Canvas imgCanvas = new Canvas();
StackPanel sp = new StackPanel();
imgCanvas.Children.Add(sp);
sp.Orientation = Orientation.Horizontal;
Image img = new Image();
BitmapImage imgSrc = new BitmapImage();
imgSrc.UriSource =
new Uri("http://www.ag.iastate.edu/global/images/SmallEarth.jpg");
img.Source = imgSrc;
img.MouseEnter += new MouseEventHandler(img_MouseEnter);
img.MouseLeftButtonDown +=
new MouseButtonEventHandler(img_MouseLeftButtonDown);
sp.Children.Add(img);
TextBlock tb = new TextBlock();
tb.Text = "Its my image";
sp.Children.Add(tb);
this.MyListBox.Items.Add(imgCanvas);
}
I was creating this sample for a user on Silverlight forums to demonstrate how he could
perform some animation on ListBox items in response to MouseOver and MouseLeftButtonDown
events. You can see I have added event handlers for those events on the image.
Animation Actions
Following code demonstrate how image has been animated on MouseOver event for the image.
void img_MouseEnter(object sender, MouseEventArgs e)
{
Storyboard sb = new Storyboard();
sb.Duration = new Duration(TimeSpan.FromSeconds(5));
DoubleAnimation danim = new DoubleAnimation();
danim.Duration = TimeSpan.FromSeconds(5);
danim.From = 10;
danim.To = 200;
sb.Children.Add(danim);
Storyboard.SetTarget(danim, e.OriginalSource as Image);
Storyboard.SetTargetProperty(danim, new PropertyPath("Width"));
if (LayoutRoot.Resources["width_story"] == null)
{
LayoutRoot.Resources.Add("width_story", sb);
}
sb.Begin();
}
What this code translates to is, that when mouse comes over the image, width of the image
will be changed from 10 to 20 pixels over period of 5 seconds. To accomplish this, I created
a new instance of Storyboard object. I also created an instance of DoubleAnimation
object and set its From and To specify start and finish width of image. I also
specified duration of animation by setting Duration property of Storyboard and
DoubleAnimation. Finally I set the property of the target object that will be affected by
From and To properties of DoubleAnimation object. This target property has been
set to "Width" that controls width of the image. And then you add this story board to resources
and start animation by calling Begin method.
This article demostrates some simple concepts of animation. To get better control on animation or
perform some other actions, you can manipulate different properties of these objects.
Subscribe