How can I make rectangle strech across entire grid?

Question

Hi,

I'm building a small WPF application. For the layout in the application, i use a grid with two columns and two rows. I want to have a background rectangle that fills the entire application, and I want the background rectangle to strech so if a user resizes the window, the rectangle streches and always fills the entire window. So inside my grid I have defined a rectangle as follows:

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

        <Rectangle x:Name="BackgroundRect" Fill="Stretch">
            <Rectangle.Fill>
                <RadialGradientBrush GradientOrigin="0.485,0.2" Center="0.492,0.526">
                    <GradientStop Color="#FF3C3C3E" Offset="1"/>
                    <GradientStop Color="#FF84897D"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
</grid>

Now, I've tried to set the rectangles Fill to strech, I've set grid.columnspan and grid.rowspan to 2. I've tried to place the rectangle inside a viewbox. Nothing works.

Do anyone know how I can make the rectangle fill my entire window?

Thanx in advance!

Answer 1

First, set Grid.ColumnSpan="2" and Grid.RowSpan="2" on your Rectangle. You need to do this if you want it to span across the entire Grid.

Second, since you have your Column/RowDefinition Width/Heights set to Auto, nothing will be shown right now because you have no content in those columns/rows to have them size automatically (perhaps you just removed it for the sample?). What you should do is set one of the columns to Width="*" and one of the rows to Height="*" which basically says: "fill the remainder of horizontal/vertical space with this column/row".

Third, until you put something in the Grid you won't see anything because it will have no height. If you just want to make sure your background Rectangle is going to display properly, just give the Grid a Height="200" or something for now.