Xamarin Forms 标签不会在 WPF 平台上换行

Posted 2023-02-27

【中文标题】Xamarin Forms 标签不会在 WPF 平台上换行

【英文标题】：Xamarin Forms label does not wrap on WPF platform

【发布时间】：2020-10-11 03:41:13

【问题描述】：

在我的 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 中按预期工作：

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

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

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 WPF 处于测试阶段。直到几周前我才知道它的存在。所有这些跨平台闪亮的新技术只有一个问题：它们有很多错误。

【参考方案1】：

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

当然，如果你这样做，你也会失去标签周围漂亮的视觉边框。不用担心。我们可以绘制另一个边框并为其设置正确的大小和位置，使其看起来像是包裹了您的内容。这里的技巧是使用 Grid 并将 <Frame> 和 <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 中都按预期换行，并且边框仍然显示。

【讨论】：

谢谢！在我们的实际应用中尝试过这个，而不是简化的示例，它就像一个魅力。

【参考方案2】：

XF WPF 仍处于 BETA ... 还有许多其他关于标签的问题，例如 spans fontsize ....

关于您的问题，我猜是 ListView 控件。它的开发已经停止，微软积极推荐CollectionView或BindableLayout。

【讨论】：

谢谢你，法布里斯。我们使用 Xamarin Forms WPF 已经有一段时间了。这是一项成熟的技术，效果很好。 ListView 是一项更为成熟的技术，已在无数 XF 应用程序中使用。

好，很高兴听到这个消息，我从 Listview 开始工作；它从来没有以同样的方式出现两次（HasUnevenRows 设置为 true），ViewCell 没有正确调整大小......无论如何我不会阻止你，直到现在我还在使用 WPF :)