Выровняйте сетку правильно - PullRequest
Новая
       12

Выровняйте сетку правильно

2 голосов
/ 22 июля 2011

В моем приложении я отображаю некоторую информацию о пользователях в списке. У меня есть большинство вещей, как я хочу, но раскладка меня немного беспокоит. Он сделан с сетками, так что он будет изменять размеры и соответствовать портретному / ландшафтному режимам.

Однако я не могу заставить макет "исправиться" ... позвольте мне объяснить с помощью картинок: gui1

Как видите, цифры на правой стороне не выровнены по правому краю экрана. Как мне этого добиться?

Ландшафтный режим выглядит почти нормально: gui2

Ниже приведены некоторые из 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>

Ответы [ 2 ]

10 голосов
/ 22 июля 2011

Вам необходимо установить ItemContainerStyle вашего ListBox, чтобы он растягивал ListBoxItems. 

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    </Style>
</ListBox.ItemContainerStyle>
1 голос
/ 22 июля 2011

Вы можете попробовать более простую сетку: 

<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>
...