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

Comments

• 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.