6

残りの要素ListBox ItemTemplateの幅に基づいて位置が変わらないように、一部のコンテンツを右揃えにしたいと思います。ItemTemplate

これが私が達成したいことのスクリーンショットです:

右揃えのアイコン

使用しようとしている XAML は次のとおりです。

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Grid Margin="12 12 0 0" 
                  Width="60" Height="60" 
                  VerticalAlignment="Top"
                  Background="{StaticResource PhoneAccentBrush}">
                <Image Source="/Assets/Mystery.png" />
            </Grid>
            <StackPanel x:Name="ParentStackPanel">
                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" x:Name="NameText" />
                <TextBlock Text="{Binding Owner, StringFormat='by {0}'}"
                           Style="{StaticResource PhoneTextSmallStyle}" />
                <Grid HorizontalAlignment="Left" x:Name="FixedWidthGrid" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Width="18"
                                   Text="{Binding ContainerSize, Converter={StaticResource ContainerSizeConverter}}"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                        <TextBlock Margin="0" Text="{Binding Difficulty, StringFormat='{}{0:N1}'}"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                        <TextBlock Margin="0" Text="/"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                        <TextBlock Margin="0" Text="{Binding Terrain, StringFormat='{}{0:N1}'}"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                        <Image Source="/Assets/Favorite.png" Height="24" />
                    </StackPanel>
                </Grid>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

スニペットでは、問題が発生している要素にFixedWidthGrid. 上記の XAML では、アイコンは 内で右揃えになりParentStackPanel、その幅は に依存しますNameText。つまり、その中の最も幅の広い要素です。上の画像では、アイコンは単語の末尾に揃えられますUkova。テキストが広すぎて収まらない場合、アイコンが画面から押し出されることさえあります。

固定幅を に設定することで解決できますFixedWidthGridが、ページを縦向きと横向きの両方のモードで動作させたいので、それはできません。また、WP8でサポートされているさまざまな解像度でテストしていません.

FixedWidthGridページ幅が変更されるたびに変更されるように、ページ幅に対して幅をバインドする方法はありますか (向きの切り替えのため)。または、アイコンを希望どおりに配置する別の方法はありますか?

4

1 に答える 1

7

この回答では、ListBox を使用してデータを右いっぱいに表示する際の主な問題について説明しています。あなたの例では、外側に StackPanel を使用せず、代わりに、中央の列ができるだけ多くのスペースを占めるようにする 3 つの列が定義された Grid を使用します。

<DataTemplate>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

最初の列に 60x60 の画像を配置します。2 番目の列にテキストを配置します。これは、StackPanel にすることができます。3 番目の列に小さな画像を配置します。この配置は、ListBoxItem の Horizo​​ntalAlignment の変更と組み合わせて、必要なものをレンダリングします。

于 2013-01-27T02:12:40.037 に答える