Pages

Sunday, November 27, 2011

Viewbox is
simple but very useful control in WPF. ViewBox scale to fit its child
element. It doesn't change the width or height of child element but it
internally transforms child content. ViewBox can have only one child element.

Let’s have a
look on below code snippet,

<Window x:Class="WpfApplication1.ViewBoxControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="ViewBox Control"
Height="300" Width="300">

<Viewbox Name="viewBox"

Stretch="Uniform"

StretchDirection="Both">

<Button Content="Click Me!" />

</Viewbox>

</Window>

Viewbox
contains two main properties Stretch and StretchDirection. Stretch will define
how child element inside Viewbox will be stretched and StretchDirection defines
Child element’s direction to scale UpOnly, DownOnly and Both.

Sunday, November 20, 2011

Creating
animation in WPF is very simple. In this post I will explain how to create
simple animation in WPF.

WPF animates
object by applying animation to their individual properties. For example, Button
can be animated by changing Width, Height, Color, Opacity properties etc. Property
must be dependency property if you want to apply animation on it.

Below are majorly
used different types of Animation in WPF

Double
Animation

Color
Animation

Point
Animation

Decimal
Animation

Integer
Animation

Let’s start
with simple example.

XAML

<Grid>

<Rectangle Height="100" Width="100"

Fill="Red"

Name="MyRectangle">

<Rectangle.Triggers>

<EventTriggerRoutedEvent="MouseEnter">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Width"

From="100" To="200"

Duration="0:0:1"
/>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Height"

From="100" To="200"

Duration="0:0:1"
/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

<EventTriggerRoutedEvent="MouseLeave">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Width"

To="100"

Duration="0:0:1"
/>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Height"

To="100"

Duration="0:0:1"
/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Grid>

As shown in
above example, Rectangle has two event triggers set with two different routed
event one is MouseEnter and another is MouseLeave. So when mouse enters inside
rectangle area the MouseEnter trigger will get fired and start animation block which
increase height and width of rectangle from 100 to 200. When mouse leave from
rectangle area it will fire MouseLeave trigger and start animation which reduce
height and width of rectangle to 100.

Let’s have a
look on below example which uses RepeatBehavior and AutoReverse property.

<Grid>

<Rectangle Height="100" Width="100"

Fill="Red"

Name="MyRectangle">

<Rectangle.Triggers>

<EventTrigger RoutedEvent="MouseEnter">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Width"

From="100" To="200"

AutoReverse="True"

RepeatBehavior="Forever"

Duration="0:0:1"
/>

<DoubleAnimation

Storyboard.TargetName="MyRectangle"

Storyboard.TargetProperty="Height"

From="100" To="200"

AutoReverse="True"

RepeatBehavior="Forever"

Duration="0:0:1"
/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Grid>

In above
example, AutoReverse and RepeatBehavior properties are used. AutoReverse
property ensures when animation reach to specified duration it will
automatically reverse the animation. RepeatBehavior specifies how many times
you want to play animation. In our example we specified to forever mean animation
will play forever. We can also specify numbers like “2” if we want to repeat
for two times.

Below are
some important properties used in animation -

Property Name

Description

Storyboard.TargetName

Specify the
name of an object on which you want to perform animation.

Storyboard.TargetProperty

Specify the
dependency property to animate.

Duration

Defines time
for animation.

From

Starting value

To

Ending value

RepeatBehavior

Specify how
many times animation plays.

AutoReverse

Specify whether
animation plays backwards after it reaches to end of duration.

Simple
Animation using ColorAnimation

XAML

<Grid>

<Rectangle Height="100" Width="100"

Name="MyRectangle">

<Rectangle.Fill>

<SolidColorBrush x:Name="MyColor" Color="Red" />

</Rectangle.Fill>

<Rectangle.Triggers>

<EventTrigger RoutedEvent="MouseEnter">

<BeginStoryboard>

<Storyboard>

<ColorAnimation

Storyboard.TargetName="MyColor"

Storyboard.TargetProperty="Color"

From="Red" To="Blue"

AutoReverse="True"

RepeatBehavior="Forever"

Duration="0:0:2" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Grid>

In above
example, ColorAnimation class is used to animate color inside rectangle.
Rectangle has SolidColorBrush named MyColor and the same object is used in
animation while MouseEnter on Rectangle.

As demonstrated in above example, VLC ActiveX is used to created VLC player in WPF Application. WindowsFormsIntigration used to host custom control. I have created one custom contol and added VLC Active X library to it. In MainWindow, i have added WindowsFormsHost and also set VLC Player instance as child of WindowsFormsHost.

XAML

<WindowsFormsHostName="windowsFormsHost1"

Height="199" Grid.Row="0"

Grid.ColumnSpan="3"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="278" />

C#

vlc = newAxVLCPlugin();

windowsFormsHost1.Child = vlc;

I have also used Win32 FileOpenDialog box on Open button click event to open and select media file from local drive.