Display gif image

Question

Hi,

When I developed my WPF PC application, I used the following code to display my gif image, as I realized that there is no easy way of doing this:-

XAML:

            <StackPanel Height="25" Name="stkProgressBar">
                <wfi:WindowsFormsHost Background="Transparent" HorizontalAlignment="Center">
                    <winForms:PictureBox x:Name="pictureBoxLoading" Visible="False">
                    </winForms:PictureBox>
                </wfi:WindowsFormsHost>

            </StackPanel>

XAML.cs:

 private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        this.pictureBoxLoading.Image = Properties.Resources.progressbar;
    }

Now when I use the same approach to display the image in my WPF Browser (XBAP) application, it is not loading the page because of this xaml code? Any ideas why is that so and if there is any other way to display GIFs on a XBAP page?

Thanks, Abhi.

==================

Updated at 27/07/2010 11:AM

Now I tried the following code:-

XAML:

 <Image Name="Image1"></Image> 

XAML.cs:

        Stream imageStreamSource = new FileStream(@"C:\Inetpub\ExchangeRate\ExchangeRate\Image\progressbar.gif", FileMode.Open, FileAccess.Read, FileShare.Read);
        GifBitmapDecoder decoder = new GifBitmapDecoder(imageStreamSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);

        Int32Animation anim = new Int32Animation(0, decoder.Frames.Count - 1, new Duration(new TimeSpan(0, 0, 0, decoder.Frames.Count / 10, (int)((decoder.Frames.Count / 10.0 - decoder.Frames.Count / 10) * 1000))));
        anim.RepeatBehavior = RepeatBehavior.Forever;

        BitmapSource bitmapSource = decoder.Frames[0];

        Image1.Source = bitmapSource;
        Image1.Stretch = Stretch.None;

It shows the image alright, but is not animated. I would appreciate any help in this regard.

Abhi.

Answer 1

After toiling for a day I worked it out using a different approach. Instead of using a gif image, I created a user control as follows:-

<UserControl.Resources>
    <Color x:Key="FilledColor" A="255" B="112" R="147" G="160"/>
    <Color x:Key="UnfilledColor" A="0" B="112" R="147" G="160"/>

    <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard> 

    <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_01" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_02" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard> 

    <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_03" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_04" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_05" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_06" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="_07" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
            <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
        </ColorAnimationUsingKeyFrames> 
    </Storyboard>
</UserControl.Resources>

<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Animation0}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation1}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation2}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation3}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation4}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation5}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation6}"/>
        <BeginStoryboard Storyboard="{StaticResource Animation7}"/>
    </EventTrigger>
</UserControl.Triggers>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto" MinWidth="150" />
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Canvas Grid.Row="1" Grid.Column="1" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Canvas.Resources>
            <Style TargetType="Ellipse">
                <Setter Property="Width" Value="15"/>
                <Setter Property="Height" Value="15" />
                <Setter Property="Fill" Value="#FFFFFFFF" />
            </Style>

            <Style TargetType="Rectangle">
                <Setter Property="Width" Value="12"/>
                <Setter Property="Height" Value="13" />
                <Setter Property="Fill" Value="#FFFFFFFF" />
                <Setter Property="RadiusX" Value="2" />
                <Setter Property="RadiusY" Value="2" />
            </Style>

        </Canvas.Resources>

        <Rectangle x:Name="_00" Canvas.Top="6" Canvas.Left="15"></Rectangle>
        <Rectangle x:Name="_01" Canvas.Top="6" Canvas.Left="30"></Rectangle>
        <Rectangle x:Name="_02" Canvas.Top="6" Canvas.Left="45"></Rectangle>
        <Rectangle x:Name="_03" Canvas.Top="6" Canvas.Left="60"></Rectangle>
        <Rectangle x:Name="_04" Canvas.Top="6" Canvas.Left="75"></Rectangle>
        <Rectangle x:Name="_05" Canvas.Top="6" Canvas.Left="90"></Rectangle>
        <Rectangle x:Name="_06" Canvas.Top="6" Canvas.Left="105"></Rectangle>
        <Rectangle x:Name="_07" Canvas.Top="6" Canvas.Left="120"></Rectangle>
    </Canvas>
<!--  <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Foreground="#AAA" TextAlignment="Center" FontSize="15" Text="{Binding Source={StaticResource Model}, Path=StatusMessage}"/> -->
</Grid>

In the usercontrol class, I created method as follows:-

  public void Show()
    {
        this.Visibility = Visibility.Visible;
    }
    public void Hide()
    {
        this.Visibility = Visibility.Hidden;
    } 

This link pointed me in this direction.