Scalable UI - in one line of XAML!
One of the great things about WPF is how easy it is to make a fully scalable UI. The above picture is an examply of a UI i made, with live reflections, menus and images, and with one line of XAML, it became fully scalable.
How was this acheived - by placing all of my UI in a ViewBox. I can then set rules about how i want it to scale. In the above picture, I set the Stretch proerty to Fill - this disregards the aspect ratio of the UI. I could have set it Uniform, which will preserve the aspect ratio.
But the best thing about the ViewBox is that everything is scaled. So where you used Pixel heights - for example in an animation where you change the height of an object - those animation are scaled too, so nothing breaks!
ViewBox rules.
Martin
- Anonymous
June 09, 2006
This is sorely needed for windows applications that need to deal with a wide variety of DPI's and in my opinion one of WPF's biggest strengths.
Can you post an example of using viewbox though? I am very new to WPF and using Expression I changed my document root to a Viewbox and then adding a Grid inside of it which worked but whenever I try to use Expression to add a child inside the grid it winds up replacing the grid. Using the XAML view works. It may just be a big in Expression but I'm wondering how you went about using it. - Anonymous
June 09, 2006
Sorry. Stupid me. I realized I must double click to set the "insertion point". I am reading your glass tutorial. - Anonymous
June 09, 2006
Hi,
Actually, my postit sample does this too. The simplest way is to place a Viewbox as you top most element (below Window or Scene of course) and place a grid or canvas WITH a fixed size just inside... like so..
<Window ...>
<Viewbox Stretch="Fill" Width="800" Height="600">
<Grid Width="800" Height="600">
Some content in here
</Grid>
</Viewbox>
</Window>
You must bear in mind that a Viewbox will only take 1 child, hence why I put a grid in first and not some content.
As for using expression, as a designer, there is definately a learning curve. There are some concepts, like control trees, layout panels, templating & styling which are new - previously, I would just draw! I know there is a curve for developers alike, there will be a lot of tools that they might not be immediately used too, such as gradient tools, pathing tools etc.
But what I can definately say, is that this has now become an incredible productive environment for me. I can build great looking apps along side a developer in a matter of hours. Some (like the Postit or rotating in app) in minutes.
If you are new to EID, check out the videos on http://www.microsoft.com/expression - great introduction to the tools and some of the basic concepts.
Martin - Anonymous
June 10, 2006
Thanks Martin. I am also very impressed by your glass button tutorial. I am really looking forward to the next 2 parts. This stuff is great.