Show animation till an operation completes wpf

Question

I want to show an animation wile an operation takes place... and when that operation takes the data and load my datagird i want to stop that animation like in ASP.NET using Ajax or Json but I don't know how to perform same operation here...

Kindly help me!

media element don't help.

Answer 1

Use a StoryBoard with the RepeatBehavior set to Forever. Start the storyboard when your operation starts, and stop it when the operation completes

Answer 2

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Windows.Media.Animation;

namespace WpfApplication4
{
    public partial class FrontEndWaiting 
    {

        #region IsAnimated bool dependency property
        public static readonly DependencyProperty IsAnimatedProperty;

        #endregion

        static FrontEndWaiting()
        {
            IsAnimatedProperty =
                DependencyProperty.Register(
                "IsAnimated",
                typeof(bool),
                typeof(FrontEndWaiting),
                new UIPropertyMetadata(false));
        }


        /// <summary>
        /// Gets/sets the user controls IsAnimatedProperty.  
        /// This is a dependency property.
        /// The default value is 'true'.
        /// </summary>
        public bool IsAnimated
        {
            get { return (bool)GetValue(IsAnimatedProperty); }
            set { SetValue(IsAnimatedProperty, value); }
        }


        public FrontEndWaiting()
        {
            this.InitializeComponent();
            DependencyPropertyDescriptor prop = DependencyPropertyDescriptor.FromProperty(
                                                    IsAnimatedProperty,
                                                    typeof(FrontEndWaiting));

            prop.AddValueChanged(this, this.OnIsAnimatedPropertyChanged);

        }

        private void OnIsAnimatedPropertyChanged(object sender, EventArgs e)
        {
            Storyboard storyboard = LayoutRoot.FindResource("OnLoaded") as Storyboard;

            if (storyboard != null)
            {
                if (IsAnimated)
                {
                    storyboard.Begin();
                }
                else
                {
                    storyboard.Stop();
                }
            }
        }
    }
}

---

<UserControl
    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"
    x:Class="WpfApplication4.FrontEndWaiting"
    x:Name="UserControl"
    d:DesignWidth="100" d:DesignHeight="100">


    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Storyboard x:Key="OnLoaded">
                <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.Target="{Binding ElementName=path}" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                RepeatBehavior="Forever">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="360"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Path Stretch="Fill" Stroke="#7F505050"
      Data="M50,20.5 C47.963449,20.5 45.9751,20.706369 44.054722,21.099335 42.134342,21.492302 40.281935,22.071866 38.517269,22.818256 36.752604,23.564647 35.07568,24.477864 33.506269,25.538136 31.936859,26.598409 30.474962,27.805737 29.140349,29.140349 27.805737,30.474962 26.598409,31.936859 25.538136,33.506269 24.477864,35.07568 23.564647,36.752604 22.818256,38.517269 22.071866,40.281935 21.492302,42.134342 21.099335,44.054722 C20.706369,45.9751 20.5,47.963449 20.5,50 C20.5,52.036549 20.706369,54.024899 21.099335,55.945278 21.492302,57.865658 22.071866,59.718067 22.818256,61.482731 23.564647,63.247398 24.477864,64.92432 25.538136,66.493732 26.598409,68.063141 27.805737,69.525036 29.140349,70.85965 30.474962,72.194263 31.936859,73.401592 33.506269,74.461864 35.07568,75.522137 36.752604,76.435352 38.517269,77.181744 40.281935,77.928135 42.134342,78.507698 44.054722,78.900665 C45.9751,79.293633 47.963449,79.5 50,79.5 C52.036549,79.5 54.024899,79.293633 55.945278,78.900665 57.865658,78.507698 59.718067,77.928135 61.482731,77.181744 63.247398,76.435352 64.92432,75.522137 66.493732,74.461864 68.063141,73.401592 69.525036,72.194263 70.85965,70.85965 72.194263,69.525036 73.401592,68.063141 74.461864,66.493732 75.522137,64.92432 76.435352,63.247398 77.181744,61.482731 77.928135,59.718067 78.507698,57.865658 78.900665,55.945278 79.293633,54.024899 79.5,52.036549&#xa;79.5,50 79.5,47.963449 79.293633,45.9751 78.900665,44.054722 78.507698,42.134342 77.928135,40.281935 77.181744,38.517269 76.435352,36.752604 75.522137,35.07568 74.461864,33.506269 73.401592,31.936859 72.194263,30.474962 70.85965,29.140349 69.525036,27.805737 68.063141,26.598409 66.493732,25.538136 64.92432,24.477864 63.247398,23.564647 61.482731,22.818256 59.718067,22.071866 57.865658,21.492302 55.945278,21.099335 C54.024899,20.706369 52.036549,20.5 50,20.5 z M50,0.5 C51.708632,0.5 53.397041,0.58657074 55.061089,0.75556374 56.725132,0.92455673 58.364811,1.175972 59.975979,1.5056648 61.587143,1.8353558 63.169796,2.2433243 64.719788,2.7254219 66.269779,3.2075195 67.787109,3.7637463 69.267635,4.3899555 70.748158,5.0161648 72.191875,5.7123556 73.594639,6.4743834 74.997402,7.2364092 76.359211,8.0642719 77.675922,8.9538221 80.309338,10.732924 82.762352,12.75878 85.001785,14.998215 87.241219,17.237649 89.267075,19.690662&#xa;91.046181,22.324079 91.93573,23.640788 92.763588,25.002597 93.52562,26.40536 94.287643,27.808124 94.983833,29.251842 95.610046,30.732367 96.236252,32.212891 96.79248,33.730223 97.274574,35.280213 97.756676,36.830206 98.164642,38.412859 98.494339,40.024025 98.824028,41.635189 99.075447,43.274868 99.244438,44.938911 99.413429,46.602957 99.5,48.291368 99.5,50 99.5,51.708632 99.413429,53.397041 99.244438,55.061089 99.075447,56.725132&#xa;98.824028,58.364811 98.494339,59.975979 98.164642,61.587143 97.756676,63.169796 97.274574,64.719788 96.79248,66.269779 96.236252,67.787109 95.610046,69.267635 94.983833,70.748158 94.287643,72.191875 93.52562,73.594639 92.763588,74.997402 91.93573,76.359211 91.046181,77.675922 89.267075,80.309338 87.241219,82.762352 85.001785,85.001785 82.762352,87.241219 80.309338,89.267075 77.675922,91.046181 76.359211,91.93573 74.997402,92.763588 73.594639,93.52562&#xa;72.191875,94.287643 70.748158,94.983833 69.267635,95.610046 67.787109,96.236252 66.269779,96.79248 64.719788,97.274574 63.169796,97.756676 61.587143,98.164642 59.975979,98.494339 58.364811,98.824028 56.725132,99.075447 55.061089,99.244438 C53.397041,99.413429 51.708632,99.5 50,99.5 C48.291368,99.5 46.602957,99.413429 44.938911,99.244438 43.274868,99.075447 41.635189,98.824028 40.024025,98.494339 38.412859,98.164642 36.830206,97.756676 35.280213,97.274574 33.730223,96.79248 32.212891,96.236252 30.732367,95.610046 29.251842,94.983833 27.808124,94.287643 26.40536,93.52562 25.002597,92.763588 23.640788,91.93573 22.324079,91.046181 19.690662,89.267075 17.237649,87.241219 14.998215,85.001785 12.75878,82.762352 10.732924,80.309338&#xa;8.9538221,77.675922 8.0642719,76.359211 7.2364092,74.997402 6.4743834,73.594639 5.7123556,72.191875 5.0161648,70.748158 4.3899555,69.267635 3.7637463,67.787109 3.2075195,66.269779 2.7254219,64.719788 2.2433243,63.169796 1.8353558,61.587143 1.5056648,59.975979 1.175972,58.364811 0.92455673,56.725132 0.75556374,55.061089 C0.58657074,53.397041 0.5,51.708632 0.5,50 C0.5,48.291368 0.58657074,46.602957 0.75556374,44.938911 0.92455673,43.274868 1.175972,41.635189 1.5056648,40.024025 1.8353558,38.412859 2.2433243,36.830206 2.7254219,35.280213 3.2075195,33.730223 3.7637463,32.212891 4.3899555,30.732367 5.0161648,29.251842 5.7123556,27.808124 6.4743834,26.40536 7.2364092,25.002597 8.0642719,23.640788 8.9538221,22.324079 10.732924,19.690662 12.75878,17.237649 14.998215,14.998215 17.237649,12.75878 19.690662,10.732924&#xa;22.324079,8.9538221 23.640788,8.0642719 25.002597,7.2364092 26.40536,6.4743834 27.808124,5.7123556 29.251842,5.0161648 30.732367,4.3899555 32.212891,3.7637463 33.730223,3.2075195 35.280213,2.7254219 36.830206,2.2433243 38.412859,1.8353558 40.024025,1.5056648 41.635189,1.175972 43.274868,0.92455673 44.938911,0.75556374 C46.602957,0.58657074 48.291368,0.5 50,0.5 z" 
              RenderTransformOrigin="0.5,0.5" x:Name="path">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Path.RenderTransform>
            <Path.Fill>
                <LinearGradientBrush EndPoint="50,100" StartPoint="50,0" SpreadMethod="Pad" MappingMode="Absolute">
                 <GradientStop Color="#E500FF00" Offset="0"/>
                 <GradientStop Color="#3F2BBF2B" Offset="1"/>
                 <GradientStop Color="#9B020C02" Offset="0.32"/>
                 <GradientStop Color="#FFFFFFFF" Offset="0.641"/>
                </LinearGradientBrush>
            </Path.Fill>
        </Path>
    </Grid>
</UserControl>

just replace "<" with simple <, it is because i could not post my post, characters are invisible