Make grid align properly
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:
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:
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"/>
<开发者_StackOverflow社区/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>
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>
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>
精彩评论