Partager via

Scalable UI - in one line of XAML!

  • Article

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.