ComponentOne Imaging for UWP
Imaging for UWP / Image / Image for UWP Task- Based Help / Playing or Stopping an Animated Image
In This Topic
    Playing or Stopping an Animated Image
    In This Topic

    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 C1GifImage.Play and C1GifImage.Stop methods, follow these steps:

    1. In your Windows Store application, 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:
    Markup
    Copy Code 
    <Grid x:Name="LayoutRoot" Background="White">
        <c1imaging:C1Image HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1Image1" VerticalAlignment="Top" />
    </Grid>
    1. 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.
    2. Click the Add button.
    3. In the Open dialog box, browse to find an animated .gif.
    4. Select the image and click Open.
    5. Click OK. You can adjust the size and alignment of the image as necessary.
    6. In the Toolbox, double-click the general CheckBox control icon.
    7. 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:
    Markup
    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>
    1. Open the MainPage.xaml.cs.
    2. Add the following using statements (Imports if using Visual Basic):
    C#
    Copy Code 
    using C1.Xaml.Imaging;
using C1.Xaml;
    1. 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(); };
        }
    1. Click Debug | Start Debugging to run the application.
    2. Select and clear the Play check box to play and stop the animated graphic.