Animating a window in WPF

Hi,

I need to open a window on mouse enter on a button.

While opening this window I need to animate it while loading. it should start from 0,0 to its original size + 5% of original size then return back to original size.

0,0 -> original size + 5% of original size -> back to original size.

Animation Time = 2 sec

Thx
Swaps...
LVL 10
k_swapnilAsked:
Who is Participating?
 
CuteBugConnect With a Mentor Commented:
Well you can do that in code. First set the MaxWidth and MaxHeight properties.

I have attached the code


//Window1.xaml
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Button Width="100" Height="30" Click="Button_Click">Show</Button>
    </Grid>
</Window>

//Window1.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
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;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Window2 win2 = new Window2();
            win2.Show();
        }
    }
}

//Window2.xaml
<Window x:Class="WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="0" Width="0" Loaded="Window_Loaded">
    <Grid>    
        
    </Grid>
</Window>

//Window2.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
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.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        public Window2()
        {
            InitializeComponent();
            this.MaxHeight = 400;
            this.MaxWidth = 400;
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DoubleAnimation heightAnimation = new DoubleAnimation();
            heightAnimation.From = 0;
            heightAnimation.To = this.MaxHeight * 1.05;
            heightAnimation.AutoReverse = true;
            heightAnimation.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(2));
            heightAnimation.Duration = TimeSpan.FromMilliseconds(1800);

            DoubleAnimation widthAnimation = new DoubleAnimation();
            widthAnimation.From = 0;
            widthAnimation.To = this.MaxWidth * 1.05;
            widthAnimation.AutoReverse = true;
            widthAnimation.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(2));
            widthAnimation.Duration = TimeSpan.FromMilliseconds(1800);

            this.BeginAnimation(Window.HeightProperty, heightAnimation);
            this.BeginAnimation(Window.WidthProperty, widthAnimation, HandoffBehavior.Compose);
        }
    }
}

Open in new window

0
 
CuteBugCommented:
The code below will do the trick...


// Window1.xaml
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Button Width="100" Height="30" Click="Button_Click">Show</Button>
    </Grid>
    
</Window>

// Window1.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
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;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Window2 win2 = new Window2();
            win2.Show();
        }
    }
}

// Window2.xaml
<Window x:Class="WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="0" Width="0">
    <Window.Resources>
        <Storyboard x:Key="IncreaseWidth">
            <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="420" Duration="0:0:1.8" AutoReverse="True" RepeatBehavior="0:0:2"></DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="IncreaseHeight">
            <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="420" Duration="0:0:1.8" AutoReverse="True" RepeatBehavior="0:0:2"></DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid>
        
    </Grid>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard Storyboard="{StaticResource IncreaseWidth}"></BeginStoryboard>
                <BeginStoryboard Storyboard="{StaticResource IncreaseHeight}"></BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        
    </Window.Triggers>
</Window>

Open in new window

0
 
k_swapnilAuthor Commented:
thx i will try it and let you know
but you have used hardcoded height and width. in my case it depends on its content
So is thr a ways so that i can bind the height and width instead of hardcoding it?

Thx!
Swaps...
0
 
k_swapnilAuthor Commented:
thx...the solution had a limitation of max size. as size cannot be determined...but still it will do...
0
All Courses

From novice to tech pro — start learning today.