Saturday, April 9, 2011

WPF ViewBox

For today's WPF Tutorial, we are going to be talking about the WPF ViewBox!

Transcript from Video:
So basically what the ViewBox is, is another WPF decorator. It allows any content that goes into it to be sized to fit the ViewBox’s bounds.

So normally, when we put a textblock in a button, we get something like this. The button automatically re-sizes with the size of the cell, but the textblock in the button stays the same size and this just feels and looks weird... so what we can do to illustrate what the viewbox does is put the viewbox in a button and the textblock in the viewbox. Now as the button re-sizes the TextBlock does as well.

There are a couple of key properties I want you guys to be aware of when using the viewbox.
The StretchDirection property and the Stretch property:
To illustrate these properties we have a 900px x 900px image inside of a viewbox.
These 4 buttons up top will set the Stretch property and the 3 butons and the bottom
will set the StretchDirection properties.

1) The StretchDirection Property can be one of 3 values
“UpOnly” : The content (the image in this case) will allow the content to get bigger but won’t get smaller than it’s orginal size.
“DownOnly” : This allows the the content to get smaller but not get bigger.
“Both” : The content stretches to fit the parent according to the Stretch Property. This is the default property of the ViewBox.

2) The Stretch Property can be one of 4 values
“None” : The content keeps its original size
“Fill” : The content is resized to fit the ViewBox dimensions.Th aspect ratio will NOT be preserved.
“Uniform” : The content is resized to fit in the ViewBox dimensions while preserving the aspect ratio.
“UniformToFill” : The content is resized to fill the ViewBox dimensions while it preserves its native aspect ratio. If the aspect ratio of the ViewBox differs from the source, the source content is clipped to fit in the ViewBox dimensions.

So that is actually it for today guys!
I hope from today’s video you understand what the viewbox does and how the Stretch and StretchDirection properties work! As always if you have any questions comments or suggestions please leave those below the video! Don’t forget to subscribe, Thanks for watching and see you guys next time.

No comments:

Post a Comment