Search code examples
wpfxamlgridsize

What does the WPF star do (Width="100*")


What does exactly the star in size terms in WPF mean?


Solution

  • In a WPF Grid, Width="*" or Height="*" means proportional sizing.
    For example: to give 30% to column 1 and 70% to column 2 -

    <ColumnDefinition Width="3*" />
    <ColumnDefinition Width="7*" />
    

    enter image description here

    And likewise for rows -

    <RowDefinition Height="3*" />
    <RowDefinition Height="7*" />
    

    The numbers do not have to be integers.
    If the Width for RowDefinition (Height for ColumnDefinition) is omitted, 1* is implied.
    In this example, column 1 is 1.5 times wider than column 2 -

    <ColumnDefinition Width="1.5*" />
    <ColumnDefinition />
    

    Column 1: 1.5*, Column 2 1* (implied)

    You can mix auto-fit and fixed widths with * (proportional) widths; in that case the * columns are apportioned to the remainder after the auto-fit and fixed widths have been calculated -

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />  <!-- Auto-fit to content, 'Hi' -->
        <ColumnDefinition Width="50.5" />  <!-- Fixed width: 50.5 device units) -->
        <ColumnDefinition Width="69*" />   <!-- Take 69% of remainder -->
        <ColumnDefinition Width="31*"/>    <!-- Take 31% of remainder -->
    </Grid.ColumnDefinitions>
    <TextBlock Text="Hi" Grid.Column="0" />
    

    enter image description here