如何为不同的屏幕尺寸和不同的窗口尺寸固定Gridview高度？

Question

Just a simple question really that I haven't been able to find a satisfying answer to. Working on a UWP app and in some parts I have a GridView within a Grid. Of course in order to enable scrolling in the app I had to give the GridView a height (let's say 650) this height might work on small screens but then on larger ones half of the app is unused!... even just when resizing the app window height it seems that the GridView would work in some sizes but not others... how do I fix this issue or at least get around it ? I want the height of the Gridview linked to the height of the app window. any ideas ?

Answer 1

When you have a GridView inside a Grid you can always just give its RowDefinition and ColumnDefinition a value of "*"

Then it will always take up the undistributed space on the window.

A small example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="150"/> 
        <RowDefinition Height="*" 
                       MinHeight="50" 
                       MaxHeight="500"/>
        <RowDefinition Height="150"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*" 
                          MinWidth="100" 
                          MaxWidth="1000"/>
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>

    <GridView Grid.Row="1"
              Grid.Column="1">

    </GridView>
</Grid>

Note that I also added values for the maximum and minimum height/width. With that you can further limit the size of the item in the grid.

The only thing you should keep in mind is that when you use the "*" value then it will take up all the rest of the space (within its limits if max/min is set). But when you have two definitions with that value like this:

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>

Then both columns/rows will take up the same amount of space. Say we have a window width of 800 then both columns will share the middle 500. With both of them taking up 250 each.

You can also write it like this to vary it:

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

Which will assign the second column twice the screen width of the first column. So let's say we have a screen width of 900. Then the first column will be 300 wide and the second column will be 600 wide.

Answer 2

for making app for different screen sizes then keep one thing in mind avoid static row and column height and width .

your grid somthing like this.

<Grid>
<Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
</Grid>

and also dont forget to set verticaloption and Horizontaloption as per your requirement.