WPF – Animated Image

It is sometimes interesting to have an animated icon to tell to our user that their command is actually processing. Typically for a refresh icon. So, two solution: you could use an animated GIF and use an external library like WpfAnimatedGif (or the XAML MediaElement), or use an rounded icon (like this one) and create your own animation based on a rotation.

This is a simple way to animated an image with a rotation:

<StackPanel Orientation="Vertical" Margin="20">
    <Button Content="Start" Command="{Binding StartCommand}" Margin="5" />
    <Button Content="Stop" Command="{Binding StopCommand}" Margin="5" />
    <Image Source="NavRefresh.png" Width="32" Height="32" Margin="5">
        <Image.Style>

            <Style TargetType="{x:Type Image}">
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <RotateTransform Angle="0"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>

                    <DataTrigger Binding="{Binding Status}" Value="Running">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)"
                                                     From="0"
                                                     To="360"
                                                     Duration="0:0:1"
                                                     RepeatBehavior="Forever"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard FillBehavior="Stop">
                                    <DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)"
                                                     To="90"
                                                     Duration="0:0:0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>

                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</StackPanel>
Code language: HTML, XML (xml)

And here is the View Model:

using Prism.Commands;
using Prism.Mvvm;

namespace ImageAnimation
{
    public class MainWindowVM: BindableBase
    {
        #region  Properties

        private string _status;
        public string Status
        {
            get { return _status; }
            set { SetProperty(ref _status, value); }
        }

        #endregion

        #region Commands

        private DelegateCommand _startCommand;
        public DelegateCommand StartCommand =>
            _startCommand ?? (_startCommand = new DelegateCommand(Start));

        private DelegateCommand _stopCommand;
        public DelegateCommand StopCommand =>
            _stopCommand ?? (_stopCommand = new DelegateCommand(Stop));

        #endregion

        public MainWindowVM()
        {
            this.Status = "Not started yet";
        }

        private void Start()
        {
            this.Status = "Running";
        }

        private void Stop()
        {
            this.Status = "Stopped";
        }
    }
}
Code language: C# (cs)

If you prefer to animate some text, please have a look at this post.

Happy coding!  🙂

Related posts:

WPF – Animated text WPF – Change color of a row in a DataGrid depending on the value with DataTrigger WPF – MVVM TextBox Validation with IDataErrorInfo WPF – ProgressBar