Source Code : Download here
Video Tutorial :
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>
Video Tutorial :
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