使用 StackLayout 包装标签答案

【问题标题】：Label wrapping with StackLayout使用 StackLayout 包装标签
【发布时间】：2015-10-15 18:18:21
【问题描述】：

我正在使用 Xamarin 并使用 XAML 创建我的视图，但我无法在我的一生中得到这个标签来包装我想要的方式。如果标签到达屏幕边缘，我希望它像这样包裹......

现在是这个样子……

这是我的代码：

<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" BindingContext="{Binding CurrentProviderDetails}" Padding="20,20,20,20" >
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
<!--Certification Board-->
  <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" Grid.Row="0" Grid.Column="0" >
    <Label Text="Certification Board: " FontSize="13" HorizontalOptions="Fill" VerticalOptions="CenterAndExpand" />
    <Label Text="{Binding Certification}" VerticalOptions="CenterAndExpand"  HorizontalOptions="Center" Font="17" LineBreakMode="WordWrap"/>
  </StackLayout>
 </Grid>
</StackLayout>

这不需要在网格中；这只是我现在尝试的方法。我唯一的要求是“认证委员会”是一个标签，当它到达屏幕末尾时，我必须传入一个自动换行的值。任何帮助都会很棒，谢谢！

【问题讨论】：

您有一个网格，嵌入在 StackLayout 中，然后在其中嵌入了 StackLayout，有什么特别的原因吗？如果没有，放弃所有的 StackLayouts，在你的 Grid 中放置两列，第 0 列宽度自动，第 1 列宽度 * 在它们各自的列中使用 2 个标签，并且在“认证板”上不要换行
很容易被这些 xml 布局迷住，谢谢

标签： xaml xamarin label word-wrap

【解决方案1】：

在标签中添加 LineBreakMode="NoWrap" 标签。这样你就可以避免换行了。

但是如果你没有足够的空间，这个词就会被剪掉。

【讨论】：

【解决方案2】：

您可以通过将水平对齐的 StackLayout 中包含的两个标签组合成一个标签并设置 LineBreakMode="WordWrap" 来获得所需的外观。 XAML 有一个很棒的特性，称为 StringFormat。您可以使用它来将静态“认证委员会：”文本添加到绑定的认证属性。您的标签应如下所示：

<Label Text="{Binding Certification, StringFormat='Board Certification:{0:F0}'}" LineBreakMode="WordWrap"/>

【讨论】：

【解决方案3】：

在网格中添加两列并移除标签周围的 stacklayout，如下所示

<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" BindingContext="{Binding CurrentProviderDetails}" Padding="20,20,20,20" >
    <Grid>
           <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
             <!--Certification Board-->
             <Label Grid.Row="0" Grid.Column="0" Text="Certification Board: " FontSize="13" HorizontalOptions="FillAndExpand" />
             <Label Grid.Row="0" Grid.Column="1" Text="{Binding Certification}" HorizontalOptions="FillAndExpand" Font="17"/>
     </Grid>
</StackLayout>

你可以像下面这样添加更多行

<Label Grid.Row="1" Grid.Column="0" Text="Certification Name: " FontSize="13" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding CertificationName}" HorizontalOptions="FillAndExpand" Font="17"/>

【讨论】：