WPF ViewBox Control

In this video we are going to see how to create and use a view box control in WPF

A view box control is used to stretch and scale elements placed on it

So let's start by creating a new project. For my sample I use Visual Studio 2010

If you do not have Visual Studio 2010 and using Visual Studio 2008

You may have to install WPF Toolkit for that. So let's create a new project

I click on File menu, New Project. Now you want to make sure in the left side, Install Templates, which will see sharp under that Windows

In the right pane, make sure you have WPF application selected. I'm going to give my application name viewbox sample. Click OK this will create a new project. And as soon as the project is created you will see the designer

Now, to create viewbox element in XAML creates a viewbox control

I'm going to give it a name. I'm going to set its width and height to 200 pixels each

Now I also going to set its vertical alignment and horizontal alignment Vertical alignment to the top and horizontal alignment to the left

I'm also going to give a little margin. 10 from the top, 10 from the left

Now, what I am going to do is, let's place an ellipse on this view box and see how it goes

So I create an ellipse. control by using ellipse element I give it width of ellipse I give 100 and height I give say 50

I also fill this ellipse with red color so as you can see in this designer my ellipse is created

by default height and width of this ellipse are 50 and 100 pixels respectively

Now one thing I'm going to change is in my viewbox code, see this is my viewbox code

here I'm going to change the stretch property of viewbox, say fill

Stretch property has four options, it can be fill, it can be none, it can be uniform or uniform to fill

So as soon as I change my stress property of view box to fill you can see even though my ellipse width is 100 height is 50 pixels but ellipse actual UI shows that it filled in the view box

So no matter what height or width you set of that ellipse control or any other control placed on view box

view box actually controls it. So this actually helps when you don't know the actual height and width of the controls placed on a view box

So this is how you can actually create and use the view box control in Jamal

Now one thing I'm going to do is I'm going to show how to create a view box control dynamically in your code

This was just design time. So I'm going to do is let's do one thing

Let's comment this code right here. and I'm going to give this

grid name because I'm going to use this in my code behind

let's say I'll call it root layout now F7 F7 will take you direct to the code behind

for this window here I'm going to create a method called private. Actually I only have a code so what I'm going to do is I'm going

to copy my code and we can just explain to save some time. So here I have a method called

CreateViewBoxDynamically. In this I create a viewbox object using the viewbox class in

class in WPF and then I set the stretch direction which is both means horizontal and vertical Then I set the stretch to fill I set max width 300 max height 200

Then I create an ellipse. And then I do set height of ellipse to 100 and width of ellipse to 50

and I fill with the red color here and then what I do is I said that viewbox.shall to my ellipse

now viewbox can only have one item on it one element on it so you cannot actually

place multiple elements on it now in the end what I do is to my root layout I add this dynamic view

box and now I'm going to call this method after each last components now if

you click F5 hit F5 to build and run this project let's see what our output

looks like So this is how my output looks like

As you can see even though my width and height of the circle ellipse was 150 but it's filled

in the view box