WPF button gif animation - wpf

Question

I'm trying to achieve one Login button which changes to a Please wait... mode once pressed. I was thinking about some StoryBoard animation inside button or GIF image animation. Seems I'm pretty new to WPF and after several search attempts, I'm unable to find a fully working idea.
Login button idea
What would be the best way to do the above thing? Is there any way to eliminate the GIF image and create the same using some Path or something similar? Also note that I want this behavior of button to be triggered on Button.Click event.

Answer 1

Just simply add WpfAnimatedGif from your visual studio Tools -> NuGet Package Manager->Package Manager Console. There you find the Package adder window and type pm > Install-Package WpfAnimatedGif. After a few seconds package should be added. Now firstly, you have add namespace xmlns:gif="http://wpfanimatedgif.codeplex.com" then design your Button.
<Window x:Class="WpfApplication1.MainWindow" Name="root"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
Width="500" Height="500" DataContext="{Binding ElementName=root}">
<StackPanel>
<Button Name="BtnLogin" Width="100" Height="30" Content="Login" Background="Red" Margin="0,0,0,5" Click="Button_Click"/>
<Button Width="100" Height="30" Background="Red">
<Grid>
<Image gif:ImageBehavior.AnimatedSource="{Binding DataContext.LoadingImage}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="Please Wait" Padding="30,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</Button>
</StackPanel>
</Window>
The following .cs file is below and when you need to stop loading image, just assign LoadingImage = null;
public partial class MainWindow : Window,INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
}
private ImageSource _LoadingImage;
public ImageSource LoadingImage
{
get { return _LoadingImage; }
set
{
_LoadingImage = value;
OnPropertyChanged("LoadingImage");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
LoadingImage = GetBitmapImage("/aaaa.gif");
}
public static BitmapImage GetBitmapImage(String location)
{
BitmapImage image = null;
try
{
Uri iconUri = new Uri("pack://application:,,,/" + ";component" + location, UriKind.RelativeOrAbsolute);
image = new BitmapImage(iconUri);
}
catch (Exception ex)
{
}
return image;
}
}