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