Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Label wrapping with StackLayout

I'm using Xamarin and creating my view with XAML and I cannot for the life of me get this label to wrap the way I want it to. If the label gets to the edge of the screen, I want it to wrap like this...

This is the way I want it to look

Right now it is looking like this...

This is how it is showing up

Here is my code:

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

This doesn't need to be in a grid; this was just the method I was trying for now. My only requirement is that 'Certification Board' is a label, and I have to pass in a value that word wraps when it gets to the end of the screen. Any help would be awesome, Thanks!

like image 599
stepheaw Avatar asked Oct 15 '15 18:10

stepheaw


2 Answers

Put a LineBreakMode="NoWrap" tag in your labels. This way you can avoid the wrap.

But if you don't have enough space, the word will be cut.

like image 94
Leonardo Lima Almeida Avatar answered Sep 20 '22 15:09

Leonardo Lima Almeida


You can achieve the desired look by combining both of the Labels contained in your horizontally aligned StackLayout into a single Label and setting LineBreakMode="WordWrap". XAML has a great feature known as StringFormat. You can use this to prepend the static "Certification Board:" text to the bound Certification property. Your Label should look like this:

<Label Text="{Binding Certification, StringFormat='Board Certification:{0:F0}'}" LineBreakMode="WordWrap"/> 
like image 22
sarahr Avatar answered Sep 19 '22 15:09

sarahr