如何在网格视图中换行文本

Question

我在做图书馆管理软件。

我有以下 xaml:

<GridView ItemsSource="{x:Bind Path=ViewModel.Books, Mode=OneWay}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Book">

                <StackPanel Margin="5" HorizontalAlignment="Center">

                    <Image Width="200" Height="200" Source="{x:Bind Path=CoverImageLocation, Mode=OneWay}" /> 

                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <StackPanel>
                            <TextBlock FontSize="16" Text="{x:Bind Path=Title, Mode=OneWay}" 
                                       TextWrapping="WrapWholeWords"/>
                            <TextBlock FontSize="10" Text="{x:Bind Path=Author, Mode=OneWay}" 
                                       Margin="0, 3, 0, 0" TextWrapping="WrapWholeWords"/>
                        </StackPanel>

                        <TextBlock FontSize="20" Text="{x:Bind Path=Quantity, Mode=OneWay}"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                    </StackPanel>
                </StackPanel>

            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

文本块中的文本是从数据库中获取的。我觉得不需要实施细节。文本块分别代表书名、作者和数量。

我有一本书名为：'The subtle art of not giving a f*ck'。您可能已经注意到，TextWrapping 设置为 WrapWholeWords。但这是应用程序的屏幕截图：

有两点需要注意：

文本未换行
缺少数量

如何指定换行文本块？或者，如果这不可能，至少在长文本的末尾显示省略号，这样数量就不会受到影响？

Answer 1

使用 Grid 而不是 StackPanel 以使用 TextTrimming 属性.

进行适当的文本修剪

<DataTemplate x:DataType="data:Book">
    <StackPanel Margin="5" HorizontalAlignment="Center">
        <Image Width="200" Height="200" Source="{x:Bind Path=CoverImageLocation, Mode=OneWay}" /> 
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <StackPanel>
                <TextBlock FontSize="16" Text="{x:Bind Path=Title, Mode=OneWay}" 
                          TextTrimming="CharacterEllipsis"/>
                <TextBlock FontSize="10" Text="{x:Bind Path=Author, Mode=OneWay}" 
                           Margin="0, 3, 0, 0" TextWrapping="WrapWholeWords"/>
            </StackPanel>
            <TextBlock FontSize="20" Text="{x:Bind Path=Quantity, Mode=OneWay}"
                       Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
        </Grid>
    </StackPanel>
</DataTemplate>

如何在网格视图中换行文本

How to wrap text in grid view

xaml

uwp

uwp-xaml