CODEWITHSUNDEEP
xamlxamarin.forms
Chris Kooken
Chris Kooken

Reputation: 33870

Xamarin Forms weird issue with label text wrap and margin

I am having a weird issue with text wrapping on a Label in Xamarin.Forms. As you can see in the screenshot below, the text is getting cut off when I have a margin or padding set on the label. When there is no padding/margin, the whole content is displayed. The actual text of the cut off content is:

"Ryan you can "end stream" whenever you are done". This particular character length does not get wrapped. If I have less characters it seems to display fine, and if I have more characters it displays fine.

This is all inside of a Grid layout, inside of a ListView. Here is the relevant XAML that creates the blue box.

<Grid Grid.Row="0" Margin="10,0" Padding="5" HorizontalOptions="Start" VerticalOptions="FillAndExpand">
      <BoxView BackgroundColor="DeepSkyBlue" CornerRadius="10" HorizontalOptions="FillAndExpand" />
      <Label Margin="10" LineBreakMode="WordWrap" HorizontalTextAlignment="End" Text="{Binding Message}" TextColor="White" FontSize="Small" VerticalTextAlignment="Center" VerticalOptions="FillAndExpand" />
</Grid>

enter image description here

Upvotes: 0

Views: 1495

Answers (1)

Michal Diviš
Michal Diviš

Reputation: 2206

Try this. I'm basically doing the same thing you are, just interested if this will work when you put it in your app.

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni ad reprehenderit eius dolorum, laborum consectetur.</x:String>
            <x:String>This is a test message. Seems like there may be an issue with word wrap.</x:String>
            <x:String>Ryan you can &quot;end stream&quot; whenever you are done.</x:String>
            <x:String>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste cumque officiis laboriosam suscipit a corporis soluta obcaecati distinctio delectus, possimus facilis asperiores, amet consequatur quam, deleniti iusto debitis nihil laudantium dicta at!</x:String>
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="5">
                <BoxView BackgroundColor="DeepSkyBlue" CornerRadius="10" />
                <Label
                    Margin="10"
                    FontSize="Title"
                    HorizontalTextAlignment="End"
                    LineBreakMode="WordWrap"
                    Text="{Binding .}"
                    TextColor="White"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Here's what I'm getting with this code:

my result

Upvotes: 0

Related Questions