Playing or Stopping an Animated Image

The image source used with the C1Image control is the C1GifImage class, which provides media player-like commands. You can use the C1GifImage.Play, C1GifImage.Stop, and C1GifImage.Pause methods to control GIF animations programmatically. For an example of how to use the Play and Stop methods, follow these steps:

In your Silverlight project, double-click the C1Image icon in the Visual Studio Toolbox to add the C1Image control to MainPage.xaml. The XAML markup will now look similar to the following:

XAML	Copy Code
<UserControl x:Class="C1Image.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" d:DesignHeight="300" d:DesignWidth="400" xmlns:c1imaging="clr-namespace:C1.Silverlight.Imaging;assembly=C1.Silverlight.Imaging"> <Grid x:Name="LayoutRoot" Background="White"> <c1imaging:C1Image HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Image1" VerticalAlignment="Top" /> </Grid> </UserControl>

XAML

Copy Code

<UserControl x:Class="C1Image.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"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:c1imaging="clr-namespace:C1.Silverlight.Imaging;assembly=C1.Silverlight.Imaging">

    <Grid x:Name="LayoutRoot" Background="White">
        <c1imaging:C1Image HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Image1" VerticalAlignment="Top" />
    </Grid>
</UserControl>

Select the C1Image control and in the Properties window, click the ellipsis button next to the C1Image.Source property. The Choose Image dialog box opens.
Click the Add button.
In the Open dialog box, browse to find an animated .gif.
Select the image and click Open.
Click OK. You can adjust the size and alignment of the image as necessary.
In the Toolbox, double-click the CheckBox icon under Common Silverlight Controls.

In the XAML markup, set the Content to Play, set the HorizontalAlignment to Center, and set the VerticalAlignment to Bottom so your XAML looks similar to the following:

XAML	Copy Code
<Grid x:Name="LayoutRoot" Background="White" Height="139" Width="384"> <c1imaging:C1Image HorizontalAlignment="Center" Margin="10,10,0,252" Name="c1Image1" Source="Images/Butterfly.gif" Width="44" /> <CheckBox Content="Play" Height="16" HorizontalAlignment="Center" Margin="10,10,0,0" Name="checkBox1" VerticalAlignment="Bottom" /> </Grid>

XAML

Copy Code

<Grid x:Name="LayoutRoot" Background="White" Height="139" Width="384">
        <c1imaging:C1Image HorizontalAlignment="Center" Margin="10,10,0,252" Name="c1Image1" Source="Images/Butterfly.gif" Width="44" />
        <CheckBox Content="Play" Height="16" HorizontalAlignment="Center" Margin="10,10,0,0" Name="checkBox1" VerticalAlignment="Bottom" />
    </Grid>

Open the MainPage.xaml.cs.

Add the following using statements (Imports if using Visual Basic):

using C1.Silverlight.Imaging;

using C1.Silverlight;

Add code for the C1GifImage.Play and C1GifImage.Stop methods so it looks similar to the following:

C#	Copy Code
public MainPage() { InitializeComponent(); var gifImage = new C1GifImage(new Uri("/Images/Butterfly.gif", UriKind.Relative)); c1Image1.Source = gifImage; checkBox1.IsChecked = true; checkBox1.Checked += delegate { gifImage.Play(); }; checkBox1.Unchecked += delegate { gifImage.Stop(); }; }

Copy Code

public MainPage()
        {
            InitializeComponent();

            var gifImage = new C1GifImage(new Uri("/Images/Butterfly.gif", UriKind.Relative));
            c1Image1.Source = gifImage;

            checkBox1.IsChecked = true;
            checkBox1.Checked += delegate { gifImage.Play(); };
            checkBox1.Unchecked += delegate { gifImage.Stop(); };
        }

Click Debug | Start Debugging to run the application.
Select and clear the Play check box to play and stop the animated graphic.