CODEWITHSUNDEEP
wpfanimation
Fire
Fire

Reputation: 397

wpf animate the loading 'dot' progress

I'm actually animating the "dot dot dot" progress using image. I think of using opacity by having the codes below.

 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.5" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.6" Storyboard.TargetProperty="Opacity" From="0" To="1"/>

The animation will last for 3 seconds, is there any easier way to animate it?

Upvotes: 7

Views: 6805

Answers (2)

Bill Tarbell
Bill Tarbell

Reputation: 5234

Here's a quick version that will automatically start animation when the control is rendered. When your loading task is done you can just hide the stackpanel.

enter image description here

<StackPanel Orientation="Horizontal">
  <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard Name="waitingAnimation" RepeatBehavior="Forever">
          <DoubleAnimation Storyboard.TargetName="Dot1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          <DoubleAnimation Storyboard.TargetName="Dot2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          <DoubleAnimation Storyboard.TargetName="Dot3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
  </StackPanel.Triggers>
  <Ellipse Name="Dot1" Fill="White" Opacity=".1" Width="8" Height="8"/>
  <Ellipse Name="Dot2" Fill="White" Opacity=".1" Width="8" Height="8" Margin="2,0,0,0"/>
  <Ellipse Name="Dot3" Fill="White" Opacity=".1" Width="8" Height="8" Margin="2,0,0,0"/>
</StackPanel>

Upvotes: 10

loop
loop

Reputation: 9242

this is not the precise solution. I wanted show how you can work on your problem..

first make a StoryBoard using your images in window.Resources like this..

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="600" Width="600">

<Window.Resources>
    <Storyboard RepeatBehavior="Forever" x:Key="mystoryboard" Name="hello" >
        <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.5" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.6" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Image Name="dotProgress2" Source="/dot-md.png" Stretch="Fill" Height="50" Width="50" Margin="302,239,240,280"/>
    <Image Name="dotProgress3" Source="/dot-md.png" Stretch="Fill" Height="50" Width="50" Margin="249,315,293,204"/>
    <Image Name="dotProgress1" Source="/dot-md.png" Stretch="Fill" Height="50" Width="50" Margin="202,239,340,280"/>
    <Button Content="Button" HorizontalAlignment="Left" Margin="41,417,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>

</Grid>

on button click event run this storyboard in code behind or you can also triggers.

 public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = this;

    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        Storyboard s = (Storyboard)TryFindResource("mystoryboard");
        s.Begin();
    }
}

Upvotes: 2

Related Questions