Make grid align properly

Question

In my app I'm displaying some info about users in a listbox. I've got most of the stuff as I want, but the layout is bugging me a bit. It's made with grids, so that it'll re-size and fit portrait/landscape modes.

However, I cannot get the layout to "fix itself"... let me try and explain with pictures: gui1

As you can see the numbers at the right side isn't aligned to the right edge of the screen. How do I achieve this?

Landscape mode looks almost okay: gui2

Below is some of the XAML:

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Picture, Mode=OneWay}"  Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="73" Height="73">

                        </Image>

                        <Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="0" Foreground="#FF3F9AC4" FontSize="28"
                                       HorizontalAlignment="Left" VerticalAlignment="Center"
                                       Style="{StaticResource PhoneTextSmallStyle}"
                                       TextWrapping="Wrap"> 

                                </TextBlock>

                                <TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="1"
                                       HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
                                           Style="{StaticResource PhoneTextSmallStyle}"> 

                                </TextBlock>
                            </Grid>

                            <TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1"
                                       HorizontalAlignment="Right" VerticalAlignment="Center"
                                       Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap"
                                        FontSize="24"> 
                            </TextBlock>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>

I know in WPF you have the `SharedSizeGroup` for grid columns, I'm not sure if that's available in Silverlight/WP7. Have you tried that? — CodingGorilla, Jul 21 '11 at 20:42
I googled that, and found this thread: http://stackoverflow.com/questions/4562104/creating-a-table-with-silverlight-for-windows-phone-7 However, I cannot see how it will be implemented in my case as I use grids and not stackpanels. Or maybe it's simple and I'm just tired .. :P — David K, Jul 21 '11 at 20:49
I think Claus has the right idea for you, the SharedSizeGroup is not available in Silverlight/WP7 (based on the link you posted). — CodingGorilla, Jul 21 '11 at 20:52

score 10 · Accepted Answer · answered Jul 21 '11 at 20:48

10

You need to set the ItemContainerStyle of your ListBox so it'll stretch the ListBoxItems.

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    </Style>
</ListBox.ItemContainerStyle>

answered Jul 21 '11 at 20:48

Claus Jørgensen

25,882
9
87
150

Brilliant! So simple and solved my problem, big thanks! And thanks everyone else as well, loving the quick responses at this site! Claus: And you're even from the same city as me, how nice :) – David K Jul 21 '11 at 20:51

score 1 · Answer 2 · answered Jul 21 '11 at 20:48

You could try a simpler grid:

<Grid HorizontalAlignment="Stretch" ShowGridLines="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Image Source="{Binding Picture, Mode=OneWay}"  Grid.Column="0" Grid.RowSpan="2"
           VerticalAlignment="Center" 
           HorizontalAlignment="Center" Width="73" Height="73" />

    <TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="1" Foreground="#FF3F9AC4" FontSize="28"
                                   HorizontalAlignment="Left" VerticalAlignment="Center"
                                   Style="{StaticResource PhoneTextSmallStyle}"
                                   TextWrapping="Wrap" />

    <TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="2"
                                   HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
                                    Style="{StaticResource PhoneTextSmallStyle}" />

    <TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
               VerticalAlignment="Center" Style="{StaticResource PhoneTextSmallStyle}" 
               TextWrapping="Wrap" FontSize="24" />
</Grid>

Won't fix the problem, as the ItemsTemplate won't fill out the entire width, due to a layout quirk. — Claus Jørgensen, Jul 21 '11 at 20:51
OK, I see, I read the question too fast and didn't notice what the actual problem was. Still, even if it's not the right answer, I'd still try to lighten the visual tree while I'm at it ;) — madd0, Jul 21 '11 at 21:16

Make grid align properly

2 Answers2

Linked