Xaml

Question

我正在尝试创建一个 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>

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

Answer 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 列定义为等宽。您可以根据需要进行调整。此外，两个 TextBlock 都有

TextWrapping="Wrap"

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

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

HorizontalAlignment="Right"

Answer 2

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

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

Xaml - 文本块对齐

Xaml - Textblock Alignment

textblock

alignment

windows-phone-7

windows-phone-8