Nov 212009
 

Displaying a slideshow of various images is a very common requirement these days. It can be done very easily using the Transtion Control in Silverlight Control Toolkit. Lets see how.

First create a Silverlight Application using Visual Web Developer.
newProject

The Transition Control is a part of the Toolkit, which we need to add a reference to. Right click References, Click Add Reference and choose  System.Windows.Controls.Layout.Toolkit.

addRef

Now that we added the reference, we also need to add the namespace in the XAML page.

xmlns:transition="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"

Now comes the page markup, This page contains a grid separated into two columns. One with the Transition Control and one with the Button to make the switch.

<UserControl x:Class="SLTransition.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"
    xmlns:transition="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
   Height="360"  Width="460" >
  <Grid x:Name="LayoutRoot" Height="300" Width="400" Margin="30">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="325" />
            <ColumnDefinition Width="75" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <transition:TransitioningContentControl
            Name="imageTransition"
            Grid.Column="0"
            Grid.Row="1"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Transition="DownTransition" />
        <Button x:Name="Next"
              Width="50"
              Height="30"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Grid.Row="0"
              Grid.Column="1"
              Content="Next"/>
    </Grid>
</UserControl>

Now the code to make the transition work. There are two class level variables in the MainPage.xaml.cs page. One is the counter to iterate through the pictures and another a string array containing the names of the image files. I didn’t give the extension here and gave it later, but you can do it in the array as well, which would be needed if you are going to use images of different formats.

int _counter = 0;
string[] _picNames = { "A", "B","C","D","E","F","G" };

Now the constructor and the Next Button Click event handler. In the constructor the click event handler is added for the next button and then the Silverlight transition control is populated with the first image in the string array. The counter is then incremented. In the next button click handler, we populate the Silverlight transition control with the image of the current counter value and increment the counter value again.

public MainPage()
{
    InitializeComponent();
    Next.Click += new RoutedEventHandler(Next_Click);
    imageTransition.Content = GetImage(0);
    _counter++;
}

void Next_Click(object sender, RoutedEventArgs e)
{
    imageTransition.Content = GetImage(_counter);
    _counter++;
}

Now the code to retrieve the image from the string array. First if the counter has reached the limit of the string array, then we reset it to 0. Then the path is constructed from the string array and set as an Image and returned to the calling function which sets the Silverlight Transition Control’s Content Property. Since the image class inherits from FrameworkElement, it can be set as the Content.

Image GetImage(int _counter)
{
    if (_counter >= _picNames.Length)
        this._counter = 0;
    Image _image = new Image();
    Uri _uri = new Uri(_picNames[this._counter] + ".jpg", UriKind.Relative);
    ImageSource _imgSource = new BitmapImage(_uri);
    _image.SetValue(Image.SourceProperty, _imgSource);
    return _image;
}

Also the images must be copied to the Silverlight project for it to find. Thats it, the image transition control will work perfectly. See it in action below. I used some pics of the Wonders of the World. Click the next button to view the transition. This is the DownTransition, the other values for this control are UpTransition, DefaultTransition and Normal.


Get Microsoft Silverlight