Xaml - 文本块对齐答案

【问题标题】：Xaml - Textblock AlignmentXaml - 文本块对齐
【发布时间】：2015-01-23 12:49:36
【问题描述】：

我正在尝试创建一个 ListViewItemTemplate，我的模板需要并排有两个文本块。左边的是消息文本块，应该留在左边，右边的是日期文本块。该文本块需要拉伸到 ItemTemplate 的末尾，并且需要适合所有文本。我正在努力实现这一目标：

但这就是我得到的：

XAML 代码是：

<DataTemplate x:Key="ItemTemplate">
        <Grid Height="84">
            <StackPanel Holding="ListViewItem_Holding">
                <TextBlock Text="{Binding Title}" FontFamily="Segoe WP" FontSize="21" />
                <StackPanel Margin="0,0,-3,0" Orientation="Horizontal">
                    <TextBlock Text="{Binding Post}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-1,0" Height="26" />
                    <TextBlock Text="{Binding Modified}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-3,0" SelectionChanged="TextBlock_SelectionChanged" />
                </StackPanel>
                <TextBlock Text="{Binding ID}" FontFamily="Segoe WP SemiLight" FontSize="18" Visibility="Collapsed" />
            </StackPanel>
        </Grid>
    </DataTemplate>

我该如何解决这个问题？我需要它，这样它才能正确拉伸，同时适合所有文本，无论方向如何。

【问题讨论】：

标签： xaml windows-phone-7 windows-phone-8 alignment textblock

【解决方案1】：

我个人会使用 Grid，因为它比 StackPanel 灵活得多，并且可以更好地处理不同的屏幕尺寸。像下面的东西

<Grid>
   <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
   </Grid.ColumnDefinitions>
   <TextBlock Text="Cant send: message" FontFamily="Segoe WP SemiLight" 
              FontSize="18" Margin="0,0,-1,0"
              TextWrapping="Wrap"/>
   <TextBlock Text="1:14a" Grid.Column="1" FontFamily="Segoe WP SemiLight" 
              TextWrapping="Wrap" FontSize="18"
              HorizontalAlignment="Right"                                    
              SelectionChanged="TextBlock_SelectionChanged"
              Margin="0,-15,0,0"/>
</Grid>

注意 2 列定义为等宽。您可以根据自己的需要进行调整。两个 TextBlocks 也有

TextWrapping="Wrap"

这意味着您的文本将转到可用空间（列宽），如果空间可用，则换行到下一行。

第二个 TextBlock 向右对齐，因此适当调整边距。

HorizontalAlignment="Right"

【讨论】：

谢谢你。还添加了这个：<ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> </Style> </ListView.ItemContainerStyle> 使它真正伸展并占据了几乎整个模板。

【解决方案2】：

您可以使用 Grid.RowDefinitions 和 Grid.ColumnDefinitions 来实现。根据您的图片，您有两列和一行的数据。因此，您可以在两列和一行上调整屏幕大小。您不需要使用 stackpanel 来实现这一点。

<Grid Height="84">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="User" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="21"  Grid.Column="0"/>
        <TextBlock Text="1:41a" FontFamily="Segoe WP SemiLight" FontSize="18" Grid.Column="1" HorizontalAlignment="Right"/>


    </Grid>

【讨论】：