Thursday, January 17

Cool Bounce Animation in C# and Xaml WPF

Source Code : Download here
Video Tutorial :
video
C# Code:

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.Effects;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MainMenuTutorial
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            startMenuAnimation(label1, new Thickness(93, -30, 0, 0), label1.Margin);
            startMenuAnimation(label2, new Thickness(198, -30, 0, 0), label2.Margin);
            startMenuAnimation(label3, new Thickness(303, -30, 0, 0), label3.Margin);
        }
        public void startMenuAnimation(Label label, Thickness initialThickness, Thickness finalThickness) {
            ThicknessAnimation dropButtons = new ThicknessAnimation();
            dropButtons.From = initialThickness;
            dropButtons.To = finalThickness;
            BounceEase bounceEaseAnimation = new BounceEase();
            dropButtons.EasingFunction = bounceEaseAnimation;
            bounceEaseAnimation.Bounciness = 3;
            label.BeginAnimation(MarginProperty, dropButtons);
        }
        public void moveAnimation(Label label, Thickness initialMargin, Thickness finalMargin) {
            ThicknessAnimation ButtonMovement = new ThicknessAnimation();
            ButtonMovement.From = initialMargin;
            ButtonMovement.To = finalMargin;
            ButtonMovement.Duration = TimeSpan.FromMilliseconds(200);
            label.BeginAnimation(MarginProperty, ButtonMovement);
        }
        public void moveAnimation(Label label, Thickness initialMargin)
        {
            ThicknessAnimation ButtonMovement = new ThicknessAnimation();
            ButtonMovement.To = initialMargin;
            ButtonMovement.Duration = TimeSpan.FromMilliseconds(200);
            label.BeginAnimation(MarginProperty, ButtonMovement);
        }
        private void label1_MouseEnter(object sender, MouseEventArgs e)
        {
            moveAnimation(label1, label1.Margin, new Thickness(label1.Margin.Left, (label1.Margin.Top - 5), label1.Margin.Right, label1.Margin.Bottom));
        }

        private void label2_MouseEnter(object sender, MouseEventArgs e)
        {
            moveAnimation(label2, label2.Margin, new Thickness(label2.Margin.Left, (label2.Margin.Top - 5), label2.Margin.Right, label2.Margin.Bottom));
        }

        private void label3_MouseEnter(object sender, MouseEventArgs e)
        {
            moveAnimation(label3, label3.Margin, new Thickness(label3.Margin.Left, (label3.Margin.Top - 5), label3.Margin.Right, label3.Margin.Bottom));
        }

        private void label3_MouseLeave(object sender, MouseEventArgs e)
        {
            moveAnimation(label3, new Thickness(303, 243, 0, 0));
        }

        private void label1_MouseLeave(object sender, MouseEventArgs e)
        {
            moveAnimation(label1, new Thickness(93, 243, 0, 0));
        }
        private void label2_MouseLeave(object sender, MouseEventArgs e)
        {
            moveAnimation(label2, new Thickness(198, 243, 0, 0));
        }
    }
}



Xaml Code:

<Window x:Class="MainMenuTutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid>
        <Label Content="Menu Button 1" MouseEnter="label1_MouseEnter" MouseLeave="label1_MouseLeave" Height="28" HorizontalAlignment="Left" Margin="93,243,0,0" Name="label1" VerticalAlignment="Top" Width="Auto" BorderThickness="2" HorizontalContentAlignment="Center" FontWeight="Bold" FontStretch="Condensed">
            <Label.Effect>
                <DropShadowEffect BlurRadius="10" Color="Red" ShadowDepth="2" />
            </Label.Effect>
            <Label.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B9310000" Offset="0" />
                    <GradientStop Color="#C3B44343" Offset="1" />
                </LinearGradientBrush>
            </Label.BorderBrush>
            <Label.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFB44343" Offset="0" />
                    <GradientStop Color="#FF310000" Offset="1" />
                </LinearGradientBrush>
            </Label.Background>
            <Label.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="#FF767676" Offset="1" />
                </LinearGradientBrush>
            </Label.Foreground>
        </Label>
        <Label BorderThickness="2" MouseEnter="label2_MouseEnter" MouseLeave="label2_MouseLeave" Content="Menu Button 2" FontStretch="Condensed" FontWeight="Bold" Height="28" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="198,243,0,0" Name="label2" VerticalAlignment="Top" Width="Auto">
            <Label.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFB44343" Offset="0" />
                    <GradientStop Color="#FF310000" Offset="1" />
                </LinearGradientBrush>
            </Label.Background>
            <Label.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B9310000" Offset="0" />
                    <GradientStop Color="#C3B44343" Offset="1" />
                </LinearGradientBrush>
            </Label.BorderBrush>
            <Label.Effect>
                <DropShadowEffect BlurRadius="10" Color="Red" ShadowDepth="2" />
            </Label.Effect>
            <Label.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="#FF767676" Offset="1" />
                </LinearGradientBrush>
            </Label.Foreground>
        </Label>
        <Label BorderThickness="2" MouseEnter="label3_MouseEnter" MouseLeave="label3_MouseLeave" Content="Menu Button 3" FontStretch="Condensed" FontWeight="Bold" Height="28" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="303,243,0,0" Name="label3" VerticalAlignment="Top" Width="Auto">
            <Label.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFB44343" Offset="0" />
                    <GradientStop Color="#FF310000" Offset="1" />
                </LinearGradientBrush>
            </Label.Background>
            <Label.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B9310000" Offset="0" />
                    <GradientStop Color="#C3B44343" Offset="1" />
                </LinearGradientBrush>
            </Label.BorderBrush>
            <Label.Effect>
                <DropShadowEffect BlurRadius="10" Color="Red" ShadowDepth="2" />
            </Label.Effect>
            <Label.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="#FF767676" Offset="1" />
                </LinearGradientBrush>
            </Label.Foreground>
        </Label>
    </Grid>
</Window>

No comments:

Post a Comment