Making Text Block Expands to Fill the Remaining Area

Question

I'm struglling with the below code to make the currently hard-coded width of ColumnDefinition (336px) dynamic, so that it fills all the remaining area in the parent/container.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Height="480" Width="800">
    <ListBox Name="LatestScoresListBox" Margin="9" Background="Black">
        <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="64"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Margin="4" Width="56" Height="56" Text="{Binding Text1}" TextAlignment="Center" TextWrapping="Wrap"/>

            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="0.5*"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="336"/>
                    <ColumnDefinition Width="48"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Margin="4" Text="{Binding Text2}"/>
                <TextBlock Grid.Column="1" Margin="4" Text="{Binding Text3}" TextAlignment="Center"/>
                </Grid>
                <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="336"/>
                    <ColumnDefinition Width="48"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Margin="4" Text="{Binding Text4}"/>
                <TextBlock Grid.Column="1" Margin="4" Text="{Binding Text5}" TextAlignment="Center"/>
                </Grid>
            </Grid>
            </Grid>
        </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    </Grid>
</Page>

I tried not defining the width, defining the width as 1*, defining the width in TextBlock and maybe other stuff too without any luck.

As can be seen from the code, the area for the parent grid is the remaning of the 800px after deducting 64px for the first column.

Can anyone give me a clue? :|

Thanks

Answer 1

It turned out to be very simple; thanks to Laurent Bugnion :) I was watching his "Windows Phone 7 Overview" session in TechDays 11 Switzerland. At around the 42nd minute, he did with his ListBox was I was trying to do with mine. Few clicks in Blend and here is the result :)

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Height="480" Width="800">
        <ListBox Name="MyListBox" Margin="9" Background="Black">
            <ListBox.Resources>
                <Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Grid>
                                    <ContentPresenter/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.Resources>
            <ListBox.ItemContainerStyle>
                <StaticResource ResourceKey="MyListBoxItemStyle"/>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="64"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0" Margin="4" Width="56" Height="56" Text="{Binding Text1}" TextAlignment="Center" TextWrapping="Wrap"/>

                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.5*"/>
                                <RowDefinition Height="0.5*"/>
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="48"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0" Margin="4" Text="{Binding Text2}"/>
                                <TextBlock Grid.Column="1" Margin="4" Text="{Binding Text3}" TextAlignment="Center"/>
                            </Grid>
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="48"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0" Margin="4" Text="{Binding Text4}"/>
                                <TextBlock Grid.Column="1" Margin="4" Text="{Binding Text5}" TextAlignment="Center"/>
                            </Grid>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Page>

Notice the ContentPresenter that was added to the Grid inside the ListBox; here were the magic happens ;)

Answer 2

Try setting HorizontalContentAlignment="Stretch" property on ListBox.

By default, a ListBox aligns all its items using Left alignment. You have to set it to Stretch to make ListBox allow its items taking all available space.