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>

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

我有一本书叫：“不给别人麻烦的微妙艺术”。您可能已经注意到，TextWrapping设置为WrapWholeWords。但这是应用程序的屏幕截图：

有两件事要注意：

文字未换行
数量遗失

如何指定要包装的文本块？还是如果不可能的话，至少在长文本的末尾显示省略号，以便不影响数量？

Answer 1

使用网格而不是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>

如何在网格视图中换行

1 个答案: