Label wrapping with StackLayout
Solution 1
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.
Solution 2
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"/>
Related videos on Youtube
![stepheaw](https://i.stack.imgur.com/k9Q7Y.jpg?s=256&g=1)
stepheaw
Working with C#, Xamarin, Nodejs and firebase for the past few years.
Updated on January 06, 2021Comments
-
stepheaw over 3 years
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...
Right now it is looking like this...
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!
-
Chris W. over 8 yearsIs there any particular reason you have a Grid, embedded in a StackLayout, then with a StackLayout embedded within it? If not, Ditch all the StackLayouts, put two columns in your Grid, Column 0 Width Auto, Column 1 Width * with the 2 labels in their respective Columns and nowrap on your "certification board"
-
stepheaw over 5 yearsSo easy to get carried away with these xml layouts, thank you
-