resize a WPF grid when window maximized to same portions as the window

5
votes

i have a basic grid in my WPF application:

<Grid>
    <Grid Height="260" HorizontalAlignment="Left" Margin="24,25,0,0" Name="grid1" VerticalAlignment="Top" Width="452">
        <Border BorderBrush="Red" BorderThickness="6"></Border>  
    </Grid>
</Grid>

the grid is in the middle of the window. When i maximize the window i want the grid to auto resize itself to the size of the window and stay with the same margin that i specified.

How do i do that ? Do i have to calculate and resize the whole thing in the resize event?

i get from this:

enter image description here

to This (i dont want this):

enter image description here

i want the grid to resize to the same portions as it was , but for a full screen.

2
wpfgridresize
When you say "same portions" do you mean the exact same absolute width (25) or do you mean you want the margin to increase proportionally to the size of the screen? - GazTheDestroyer
no and no , i want the size of the grid to grow to the size of the new window size. i want , after i maximize the window , that the grid will look like the first image i attached but for a full maximized window. thanks :) - Rodniko
Hang on, are you talking about the margin or the border thickness? I don't understand what you mean. Everyone seems to have answered your question as I understand it. - GazTheDestroyer
Also, is the XAML you've posted the entire window contents? Do you have a canvas or some other element that would break the stretch to fit behaviour? - GazTheDestroyer
Also lose the VerticalAlignment & HoriziontalAlignment in your code. Note that snurre's doesn't have that. - GazTheDestroyer

2 Answers

13
votes

Remove Width and Height.

<Grid>
    <Grid Margin="24,25">
        <Border BorderBrush="Red" BorderThickness="6"></Border>  
    </Grid>
</Grid>

e: Added a second grid to make it identical to OP

0
votes

You could host the Grid inside of another Grid with something like:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25" />
        <RowDefinition />
        <RowDefinition Height="25" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25" />
        <ColumnDefinition />
        <ColumnDefinition Width="25" />
    </Grid.ColumnDefinitions>

    <!-- Main Grid -->
    <Grid Grid.Row="1" Grid.Column="1">

        <!-- Main Content -->
    </Grid>
</Grid>

That would allow you to put all your content inside of the Main Grid, while maintaining a constant margin of 25 around all edges.