WPF Shapes Using VB.NET

The Shape classes in the System.Windows.Shapes namespace and the Geometry classes in the System.Windows. Animation can make an attractive user interface even more spectacular and usable.
  • 2358

Introduction

Here i am talking about the Animation with controls in WPF. WPF is a advance version of window application and its provides a great feature to the .NET. The Shape classes in the System.Windows.Shapes namespace and the Geometry classes in the System.Windows. We can use more shapes in our page like rectangle , ellipse etc. Animation can make an attractive user interface even more spectacular and usable. By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues. WPF includes an efficient timing system that is done through managed code and XAML and that is integrated into the WPF framework. WPF animation makes it easy to animate elements or controls and other graphical objects or shapes. Here I have taken two rectangle control and an ellipse control. When we add these controls to our page the XAML code will look like this.

Code

<StackPanel Margin="10">
<
Rectangle Name="MyRectangleWidth="100" 
  Height="100" Fill="Blue">
</
Rectangle>
</StackPanel>
<StackPanel Margin="10">
<
Rectangle Name="MyRectangleWidth="100" 
  Height="100Fill="Blue">
</
Rectangle>
<Ellipse Height="159" Name="Ellipse1" Stroke="Black" 
 Width
="200" Fill="#FFD59029" />
</StackPanel>

The output for this code will look like this. when we add these controls in our page the main window will look like this.

img1.png

Background 

We can set the background to the controls easily by setting background property. give colors to the controls or items. 

img2.png

 Make control or shape Fade In and Fade out

We can create a animated control. Here we will do fade in and fade out to a control. when we apply a animation to a control The XAML code will look like this and We can easily create a animated control. Here are the two rectangle controls and the code to animate these controls are in XAML.

<Window x:Class="MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 
Title="MainWindow" Height="408" Width="525">
<Grid Height="386">
<
StackPanel Margin="10">
<
Rectangle Name="MyRectangle" Width="206" Height="100"
  
Fill="{x:Null}" Visibility="Visible">
<Rectangle.Triggers>
<
EventTrigger RoutedEvent="Rectangle.Loaded">
<
BeginStoryboard>
<
Storyboard>
<
DoubleAnimation Storyboard.TargetName="MyRectangle" 
  Storyboard.TargetProperty
="Opacity"
  
From="1.0" To="0.0" Duration="0:0:5" 
  AutoReverse
="True" RepeatBehavior
="Forever" />
</Storyboard>
</
BeginStoryboard>
</
EventTrigger>
</
Rectangle.Triggers>
</
Rectangle>
<
Rectangle Height="100" Name="Rectangle1" Stroke="Black" 
  Width
="206" Visibility="Visible">
<
Rectangle.Triggers>
<
EventTrigger RoutedEvent="Rectangle.Loaded">
<
BeginStoryboard>
<
Storyboard>
<
DoubleAnimation
 
Storyboard.TargetName="MyRectangle" 
 Storyboard.TargetProperty
="Opacity"
 
From="1.0" To="0.0" Duration="0:0:5" 
 AutoReverse
="True" RepeatBehavior
="Forever" />
</Storyboard>
</
BeginStoryboard>
</
EventTrigger>
</
Rectangle.Triggers>
</
Rectangle>
</
StackPanel>
</
Grid>
</
Window>

 Fade-In and Fade-Out Rectangle 

There is a output for the above code it will show fade-In and Fade-Out rectangle control to the main window. there is a rectangle which is on the top of the window and it will be fade-in and fade-out at run time by the XAML code.

newfi.png

new fo.png
 
Ellipse shape 

there is a code for ellipse. we have two ellipse in this code.

<Grid Height="386">
<
Canvas Background="Transparent" Margin="12,12,27,42">
<
Ellipse x:Name="ELL01" Width="308" Height="320" Stroke="#FFEB5BD5" 
 StrokeThickness
="1" Fill="#FFDB8B68" Canvas.Left="0" Canvas.Top="6" />
<
Ellipse x:Name="ELL02" Width="305" Height="295" Stroke="DarkSlateBlue" 
 StrokeThickness
="1" Fill="#FF20E57B" Opacity="0.6" Canvas.Left="254" Canvas.Top="-40">
<
Ellipse.RenderTransform>
<
RotateTransform Angle="35" />
</
Ellipse.RenderTransform>
</
Ellipse>
</
Canvas>
</
Grid>

Output for this code.

last.png

I hope this article will help you to create shapes in different ways.

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.