使用StackLayout进行标签包装

时间:2015-10-15 18:18:21

标签: xaml xamarin label textwrapping

我正在使用Xamarin并使用XAML创建我的视图而我无法为我的生活获取此标签以我想要的方式包装。如果标签到达屏幕的边缘,我希望它像这样包裹......

This is the way I want it to look

现在它看起来像这样......

This is how it is showing up

这是我的代码:

<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>

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

3 个答案:

答案 0 :(得分:13)

放一个LineBreakMode =&#34; NoWrap&#34;标签中的标签。这样你可以避免换行。

但如果你没有足够的空间,这个词就会被删除。

答案 1 :(得分:2)

通过将水平对齐的StackLayout中包含的两个标签组合到一个Label中并设置LineBreakMode =“WordWrap”,可以实现所需的外观。 XAML有一个很棒的功能,叫做StringFormat。您可以使用它将静态“认证委员会:”文本添加到绑定的认证属性。 您的标签应如下所示:

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

答案 2 :(得分:0)

将两列添加到您的网格并删除标签周围的堆栈布局,如下所示

<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"/>