时间戳

首页 > 解决方案 > Xamarin Forms 标签不会在 WPF 平台上换行

xamarin.forms - Xamarin Forms 标签不会在 WPF 平台上换行

问题描述

在我的 Xamarin Forms 应用程序中，我有一个简单的 ListView，绑定到一个集合。每个集合项由我在标签中显示的两个字符串组成。字符串可能不适合一行，在这种情况下，它们应该换行并占用多行。

我将代码减少到最低限度，以便在此处发布：

<ScrollView Orientation="Vertical">
    <ListView x:Name="lv" ItemsSource="{Binding MessageItems}" HasUnevenRows="True" Margin="10,10,30,10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasShadow="True" BorderColor="#0A2966" Margin="10,10,10,10">
                        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                            <Label x:Name="ShortText" LineBreakMode="NoWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                Short Text
                            </Label>
                            <Label x:Name="LongText" LineBreakMode="WordWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="{Binding MessageText}">
                                This is a long message. It is so long it is going to wrap to the next line. It goes on and on and on to demonstrate word wrapping.
                            </Label>
                        </StackLayout>
                    </Frame>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

这一切都在 UWP 中按预期工作：

UWP - 长文本按预期包装

但在 WPF 中，它只是将每个标签显示在一行上，如果不适合则将其截断：

在此处输入图像描述

我已经LineBreakMode="WordWrap"在 XAML 中指定了，即使它是默认值，但文本仍然不换行。

Xamarin 论坛中似乎有多个关于标签未包装的讨论，例如这个https://forums.xamarin.com/discussion/79278/word-wrap-on-label-doesnt-appear-to-be-working，但他们没有为我提供和回答。

Github 上有一个错误，它似乎准确地描述了我的问题 ( https://github.com/xamarin/Xamarin.Forms/issues/3558 )，但它被标记为已解决，并且该修复程序已经合并了一段时间。我认为它已经包含在最新版本的 Xamarin Forms 中，但我不知道如何检查。

我正在使用 Xamarin Forms 4.8.0.1534（最新版本），并且我还尝试了几种不同的 4.8.x 和 4.7.x 构建，但均未成功。

标签： xamarin.forms

解决方案

这里的罪魁祸首是<Frame>元素。我通过简化您的示例代码、删除一个或另一个部分来确定这一点。<StackLayout>直接放置在内部<ViewCell>（没有干预<Frame>）可以修复布局并使Label文本按预期换行。

当然，如果你这样做，你也会失去标签周围漂亮的视觉边框。不用担心。我们可以绘制另一个边框并为其设置正确的大小和位置，使其看起来像包裹了您的内容。这里的技巧是使用 Grid 并将 the<Frame>和 the<StackLayout>放入 Grid 的第 0 行第 0 列。

经过上述两个更改后，我们最终得到：

<ScrollView Orientation="Vertical">
    <ListView x:Name="lv" ItemsSource="{Binding MessageItems}" HasUnevenRows="True" Margin="10,10,30,10">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="10,10,10,10">
                        <Frame VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasShadow="True" BorderColor="#0A2966"/>
                        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="20">
                            <Label x:Name="ShortText" LineBreakMode="NoWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                Short Text
                            </Label>
                            <Label x:Name="LongText" LineBreakMode="WordWrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="{Binding MessageText}">
                                This is a long message. It is so long it is going to wrap to the next line. It goes on and on and on.
                            </Label>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

现在标签在 WPF 和 UWP 中都按预期换行，并且边框仍然显示。

推荐阅读