CODEWITHSUNDEEP
wpf
Joe
Joe

Reputation: 7004

Grid width "*" not behaving as expected when parent size is not defined

I have a set of controls in a dialog box that I want to auto-size. Everything worked fine until I tried to re-arange things using an evenly spaced Grid width.

Here's the XAML:

<Grid Margin="20" >
    <Grid.RowDefinitions>
        <RowDefinition Height="AUTO" />
        <RowDefinition Height="AUTO" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid>
         ...left controls
    </Grid>
    <Border BorderThickness="1" BorderBrush="Gray" Grid.Column="1" Margin="0,10,0,5">
         ...right controls
    </Border>
    <Grid Grid.Row="2" Grid.ColumnSpan="2>
         ...okay and cancel
    </Grid>
</Grid>

Here's the result:

enter image description here

Not what I'm expecting. The right column has a tiny width, for some reason it's not listening to the "*" and making it equal to the half the other column.

If I put a Width="450" on the highest Grid, or UserControl (or during runtime, resize the window it sits in!) Everything "jumps" and I get what I'm expecting, both columns evenly spaced:

enter image description here

But now it doesn't respond to re-sizing, or auto-size for larger content (except that wouldn't stretch when the parent container stretched) If I were after equal spacing I could use a shared size group. Is there anything I'm doing wrong or is this expected behavior for Width="*"?

Upvotes: 1

Views: 538

Answers (3)

Beauty
Beauty

Reputation: 965

I found out that a Border has a problem, when its size should match to a Grid cell with * columns / rows.

Problematic example:

<Grid>
    ...
    <Border Grid.Row="1" Grid.Column="1"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        ...
    </Border>
</Grid>

Solution: Put the Border inside of a helper Grid, because for a Grid inside of a Grid the cell alignment works well. Then bind the width and height of the Border to the ActualHeight / ActualWidth of the Grid.

<Grid>
    ...
    <Grid x:Name="borderGrid" Grid.Row="1" Grid.Column="1">
        <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                Height="{Binding ActualHeight, ElementName=borderGrid}"
                Width="{Binding ActualWidth, ElementName=borderGrid}">
            ...
        </Border>
    </Grid>
</Grid>

As result the Border fits correctly to its target cell, even when changing the size of the root Grid. (Works also when ColumnSpan and RowSpan are used.)

Upvotes: 0

Mario Vernari
Mario Vernari

Reputation: 7304

When your outer Grid is hosted in a container where the width is not defined, the actual width will be the result of the descendant. That is, the (outer) Grid measure pass will "ask" to the right column (the Border): "I'm giving you whatever space you want: how much do you need?". As long the Border fragment won't require any specific size, the result is the default (zero, in most cases). Hence the collapsed behavior.

Basically, you should either define the outer Grid width, or the 2nd column width (by mean anything within the column should tell how much space it needs).

Upvotes: 1

StepUp
StepUp

Reputation: 38094

You are right * means to take size proportional to grid. It happens cause your the highest Grid does not enough space to be wider( when you set Width="450", then the Grid becomes wider).

If you have just one grid inside your Window, then the theSecondColumn will take all place at the right side(it will be wider as you want):

<Window x:Class="DataGridAddedColumns.MainWindow"
    <!-- The code is omitted for the brevity -->
        Title="MainWindow" Height="550" Width="525"  
          WindowStartupLocation="CenterScreen">
    <Grid Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Name="theSecondColumn" Width="*"/>
         </Grid.ColumnDefinitions>
    <Grid>
</Window>

Upvotes: 0

Related Questions