Fluid layout for Windows Store App

Question

I want to have fluid layout for my view in a windows store app.

In a new page template you have a Grid which has a row set to fill the screen after the title at the top of the page.

So I have my content to enter into this grid row. My content is going to be a mixture of controls (images, text, vertical listview, maybe another gridview) but it isn't a single grouped collection that I can bind to a single gridview.

The point I'm trying to make is that I want my horizontal width to be more than that of the page, yet I want to size things fluidly which means relative to a single page height / width.

Ideally I don't want to have to specify hard coded widths for controls as I want this layout to work for as many different screen resolutions as possible. That being said, I imagine I will use Min / MaxWidth and heights to make sure items aren't too big or too small.

What approach should I take?

EDIT Hopefully the following image would better describe what I mean.

The first image shows a (grouped) gridview that automatically will expand horizontally as it requires. This would work well but the controls I want to add are not grouped / related to each other.

The second image is what I am trying to do, which is to have a number of unrelated controls in a window but have them scroll off the side of the page horizontally. I can do this if I give each control a fixed width but I want to try and make it more flexible than that if possible (using min / maxWidth but not fixed values for the widths themselves).

Answer 1

Use star values in grid. Like:

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="3*"/>
    <RowDefinition Height="2*"/>
    <RowDefinition Height="1*"/>
</Grid.RowDefinitions>
...

and use ViewBox as the top container. ViewBox will scale all the content to fill the available size.