ViewBox in WPF

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.

Let’s check output with different values of stretch property.

<Viewbox Name="viewBox"

            Stretch="Fill"

            StretchDirection="Both">

    <Button Content="Click Me!" />

</Viewbox>

<Viewbox Name="viewBox"

            Stretch="UniformToFill"

            StretchDirection="Both">

    <Button Content="Click Me!" />

</Viewbox>

<Viewbox Name="viewBox"

            Stretch="None"

            StretchDirection="Both">

    <Button Content="Click Me!" />

</Viewbox>

Hope this small post helps you. Please feel free to write feedback/comments in comments section below.

See Also –

Transformations in WPF
Creating Simple VLC Video Player in WPF

Binding DataGrid with XML File in WPF

How to get default control template of Control in WPF?

Creating Simple Animation in WPF

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

1. Double Animation
2. Color Animation
3. Point Animation
4. Decimal Animation
5. Integer Animation

Let’s start with simple example.

XAML

<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"

                        Duration="0:0:1" />

                    <DoubleAnimation

                        Storyboard.TargetName="MyRectangle"

                        Storyboard.TargetProperty="Height"

                        From="100" To="200"

                        Duration="0:0:1" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

        <EventTrigger RoutedEvent="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.

Hope you liked this article. Please feel free to write feedback/comments in comments section.

See Also - 

WPF Resources

WPF Brushes

Control Template in WPF

Creating Simple Video Player using VLC Active X Control in WPF

In this post I will demonstrate how to create VLC media player in WPF using VLC player library.

To use VLC player API, VLC player must be install in machine. VLC Player can be freely download at http://www.videolan.org/vlc/download-windows.html.

Follow below steps to create VLC player in WPF

1. Install VLC player. (To download VLC player use above link)

2. Create simple WPF Application in VS 2010.

3. Add reference to VLC Active X Plugin

4. Add reference to WindowsFormsIntegration Library

5. Add new custom control.

6. Drag and Drop VLC Player control from toolbar to newly created custom control

7. Write blow code to your Mainwindow.xaml file

<Window x:Class="VLCPlayerWPF.MainWindow"

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

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

        Title="MainWindow" Height="300" Width="300">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition  Height="0.31*"/>

        </Grid.RowDefinitions>

        <WindowsFormsHost Name="windowsFormsHost1"

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

                          Grid.ColumnSpan="3"

                          HorizontalAlignment="Left"

                          VerticalAlignment="Top"

                          Width="278" />

        <Button Name="OpenButton" Content="Open"

                Grid.Row="1" Grid.Column="0"

                Width="80" Height="40"

                Click="OpenButton_Click" />

        <Button Name="PlayButton" Content="Play"

                Grid.Row="1" Grid.Column="1"

                Width="80" Height="40"

                Click="PlayButton_Click" />

        <Button Name="PauseButton" Content="Pause"

                Grid.Row="1" Grid.Column="2"

                Width="80" Height="40"

                Click="PauseButton_Click" />

    </Grid>

</Window>

8. Write below code to MainWindow.xaml.cs file

public partial class MainWindow : Window

{

    AxVLCPlugin vlc;

    public MainWindow()

    {

        InitializeComponent();

        Loaded += new RoutedEventHandler(VLCPlayer_Loaded);

    }

    void VLCPlayer_Loaded(object sender, RoutedEventArgs e)

    {

        vlc = new AxVLCPlugin();

        windowsFormsHost1.Child = vlc;

    }

    private void OpenButton_Click(object sender, RoutedEventArgs e)

    {

        OpenFileDialog dlg = new OpenFileDialog();

        dlg.DefaultExt = ".avi";

        Nullable<bool> dialogResult = dlg.ShowDialog();

        if (dialogResult == true)

        {

            vlc.addTarget(dlg.FileName, null, 
                AXVLC.VLCPlaylistMode.VLCPlayListReplaceAndGo, 0);

            vlc.play();

        }

    }

    private void PlayButton_Click(object sender, RoutedEventArgs e)

    {

        vlc.play();

    }

    private void PauseButton_Click(object sender, RoutedEventArgs e)

    {

        if (vlc.Playing)

            vlc.pause();

    }

}

9. Run the application and see output

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

<WindowsFormsHost Name="windowsFormsHost1"

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

                          Grid.ColumnSpan="3"

                          HorizontalAlignment="Left"

                          VerticalAlignment="Top"

                          Width="278" />

C#

vlc = new AxVLCPlugin();

windowsFormsHost1.Child = vlc;

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

OpenFileDialog dlg = new OpenFileDialog();

dlg.DefaultExt = ".avi";

Nullable<bool> dialogResult = dlg.ShowDialog();

if (dialogResult == true)

{

     vlc.addTarget(dlg.FileName, null, AXVLC.VLCPlaylistMode.VLCPlayListReplaceAndGo, 0);

     vlc.play();

}

For more information about VLC ActiveX, refer to wiki.videolan.org.

Hope you liked this article. Please leave your comments/feedback in comments section of this post.

See Also - 

Binding WPF DataGrid with XML Data

Working with ThreadPool in C#

Styles in WPF

Triggers in WPF