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 (4)

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

  2. Sorry. Stupid me. I realized I must double click to set the "insertion point". I am reading your glass tutorial.

  3. martin.grayson says:

    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

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

Skip to main content