WPF Grid allow controls inside to auto size width/

问题:

Hey all i have been trying to find examples of how to go about auto sizing the controls i have within a grid control if the users screen is larger than the default size.

Currently i am unable to resize the controls when i enlarge the form. Is there any code currently that can find all controls inside the grid and resize them on the fly when the form is resized?

My current code is:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="768" Width="1024">
    <Grid>
        <Grid Height="115" Margin="190,0,195,145" Name="Grid1" VerticalAlignment="Bottom" Background="Cyan">
            <Button Height="45" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Button4" VerticalAlignment="Top">Button</Button>
            <Button Height="45" HorizontalAlignment="Left" Margin="101,10,0,0" Name="Button5" VerticalAlignment="Top">Button</Button>
            <Button Height="45" HorizontalAlignment="Left" Margin="192,10,0,0" Name="Button6" VerticalAlignment="Top">Button</Button>
            <Button Height="45" HorizontalAlignment="Right" Margin="280,10,257,0" Name="Button7" VerticalAlignment="Top">Button</Button>
            <Button Height="45" HorizontalAlignment="Right" Margin="0,10,166,0" Name="Button8" VerticalAlignment="Top">Button</Button>
            <Button Height="45" HorizontalAlignment="Right" Margin="0,10,75,0" Name="Button9" VerticalAlignment="Top">Button</Button>
            <Button Height="45" HorizontalAlignment="Left" Margin="10,0,0,9" Name="Button10" VerticalAlignment="Bottom">Button</Button>
            <Button Height="45" HorizontalAlignment="Left" Margin="101,0,0,9" Name="Button11" VerticalAlignment="Bottom">Button</Button>
            <Button Height="45" HorizontalAlignment="Left" Margin="192,0,0,9" Name="Button12" VerticalAlignment="Bottom">Button</Button>
            <Button Height="45" HorizontalAlignment="Right" Margin="280,0,257,9" Name="Button13" VerticalAlignment="Bottom">Button</Button>
            <Button Height="45" HorizontalAlignment="Right" Margin="0,0,166,9" Name="Button14" VerticalAlignment="Bottom">Button</Button>
            <Button Height="45" HorizontalAlignment="Right" Margin="0,0,75,9" Name="Button15" VerticalAlignment="Bottom">Button</Button>
        </Grid>
    </Grid>
</Window>

Any help would be great! Thanks!

回答1:

It looks like you aren't using the grid in the way it was intended.

If you want your UI to dynamically resize with the window, you shouldn't have any (or at least minimize) the number of hard coded widths and heights. The first problem I see is that the inner grid has a hard coded height of 127, so regardless of the size of the window that grid will always be that height. Removing that height is a good first step.

I'm also not sure why there are two grids - couldn't all of the buttons just be children of the outer grid?

Finally, you aren't defining any rows or columns in the grid. I think you were trying to use the VerticalAlignment and HorizontalAlignment properties on the individual buttons to control where they are on the window. It is much better to define rows and columns based on where you want the buttons to be. MSDN has an example of how to use a grid with multiple rows and columns.