Silverlight - Layout Question

Question

Hello,

I am creating a Silverlight application that should take up the width of the user's screen. This application has a horizontal row that greets the user. Then, two columns below it. The right column is always a fixed size. I want the left column to take up any remaining space. In an attempt to accomplish this, I am using the following XAML:

<Grid x:Name="layoutRoot" Background="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
  </Grid.RowDefinitions>

  <Grid x:Name="greetingGrid" Margin="0,0,0,8">            
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel Orientation="Horizontal">
      <TextBlock Text="Welcome " />
      <TextBlock x:Name="usernameTextBlock" />
    </StackPanel>            
  </Grid>    

  <Grid x:Name="contentGrid" Grid.Row="1">            
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Grid x:Name="leftGrid" HorizontalAlignment="Stretch">
      <Border x:Name="leftBorder" BorderBrush="Black" Height="250">
        <!-- Insert Wrap Panel of Images --!>
      </Border>
    </Grid>

    <Grid x:Name="rightGrid" Width="100" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0">
      <Border BorderBrush="Black" BorderThickness="2">
        <StackPanel Orientation="Vertical">
      <TextBlock Text="How would you like to view the images?" />
      <ComboBox x:Name="optionComboBox">
        <ComboBoxItem Content="Name" />
        <ComboBoxItem Content="Date" />
      </ComboBox>
        </StackPanel>
      </Border>
    </Grid>
  </Grid>
</Grid>

Oddly, the two lower columns are split evenly in size. How do I make the left column take up all remaining space?

Thank you!

Answer 1

<Grid.ColumnDefinitions>
  <ColumnDefinition width="*" />
  <ColumnDefinition width="250"/>
</Grid.ColumnDefinitions>

Use * for the grid column to take the rest of the available space. Keep in mind that the parent container also needs to take the whole area to make it work!

Answer 2

You can specify the widths of the columns rather than on your "rightGrid", eg:

    <Grid x:Name="greetingGrid" Margin="0,0,0,8">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Welcome " />
            <TextBlock x:Name="usernameTextBlock" />
        </StackPanel>
    </Grid>

    <Grid x:Name="contentGrid" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100px" />
        </Grid.ColumnDefinitions>

        <Grid x:Name="leftGrid" HorizontalAlignment="Stretch" Background="Fuchsia">
            <Border x:Name="leftBorder" BorderBrush="Black" Height="250">

  </Border>
</Grid>

<Grid x:Name="rightGrid"  Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0">
  <Border BorderBrush="Black" BorderThickness="2">
    <StackPanel Orientation="Vertical">
  <TextBlock Text="How would you like to view the images?" />
  <ComboBox x:Name="optionComboBox">
    <ComboBoxItem Content="Name" />
    <ComboBoxItem Content="Date" />
  </ComboBox>
    </StackPanel>
  </Border>
</Grid>