CODEWITHSUNDEEP
.netformsxamarinmaui
Kevin Le
Kevin Le

Reputation: 43

Words Not Wrapping?

I have currently set the following properties to a button, and I want it to word wrap. I want the text to fit inside the button dynamically and not run off the button but it's still running off the button... any ideas?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="quiz_app.Views.StudyPage"
             Title="Study">
    <StackLayout BackgroundColor="White"
                 Padding="100"
                 HorizontalOptions="CenterAndExpand"
                 VerticalOptions="CenterAndExpand">
        <VerticalStackLayout>
            <Button
                 Text="How much wood could a woodchuck chuck if a woodchuck could chuck wood?"
                 FontSize="40"
                 TextColor="Black"
                 FontFamily="Helvetica"
                 BackgroundColor="#CCFFCC"
                 VerticalOptions="CenterAndExpand" 
                 HorizontalOptions="CenterAndExpand"
                 BorderWidth="5"
                 HeightRequest="400"
                 BorderColor="#82D682"
                 LineBreakMode='WordWrap'>
            </Button>
        </VerticalStackLayout>
    </StackLayout>
</ContentPage>

Upvotes: 0

Views: 87

Answers (3)

Stephen Quan
Stephen Quan

Reputation: 26214

The status of this issue has changed, if you refer to https://github.com/dotnet/maui/issues/9102 you will see that LineBreakMode in Button has been "fixed". There is a side effect though, it appears that the text is wrapped not perfectly centered:

Actual:

WoodChuck1.png

Expected:

WoodChuck2.png

I raise a discussion forum https://github.com/dotnet/maui/discussions/27592 to discuss this.

I have been looking at workarounds and I noticed the other answers here have opted not to use Button but a Border+Label with a TapGestureRecognizer. The downside of this workaround is the loss of accessible keyboard-shortcuts.

To keep the best of both worlds, I have mashed up Grid+Border+Label+Button. The correct visual representation is provided by Border+Label. The correct user interaction with accessible keyboard shortcuts is supplied by an invisible Button. The Grid mashes up the two so that both the Border+Label and the Button are the same geometric size and position.

<Grid HorizontalOptions="Center" WidthRequest="250">
    <Border
        Padding="10,10,10,10"
        BackgroundColor="{Binding BackgroundColor, x:DataType=Button, Source={Reference myButton}}"
        Stroke="{Binding BorderColor, x:DataType=Button, Source={Reference myButton}}"
        StrokeShape="RoundRectangle 10,10,10,10">
        <Label
            HorizontalTextAlignment="Center"
            Text="{Binding Text, x:DataType=Button, Source={Reference myButton}}"
            TextColor="{Binding TextColor, x:DataType=Button, Source={Reference myButton}}"
            VerticalOptions="Center" />
    </Border>
    <Button
        x:Name="myButton"
        BackgroundColor="#CCFFCC"
        BorderColor="#82D682"
        BorderWidth="5"
        FontFamily="Helvetica"
        HorizontalOptions="CenterAndExpand"
        LineBreakMode="WordWrap"
        Opacity="0"
        Text="How much wood could a woodchuck chuck if a woodchuck could chuck wood?"
        TextColor="Black"
        VerticalOptions="CenterAndExpand" />
</Grid>

Upvotes: 0

Julian
Julian

Reputation: 8924

Just for completeness sake:

A possible solution using a TapGestureRecognizer could look as follows:

<Label
    Text="How much wood could a woodchuck chuck if a woodchuck could chuck wood?"
    FontSize="40"
    TextColor="Black"
    FontFamily="Helvetica"
    BackgroundColor="#CCFFCC"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand"
    HeightRequest="400"
    LineBreakMode='WordWrap'>
    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding SomeCommand}" />
    </Label.GestureRecognizers>
<Label>

Upvotes: 2

Kevin Le
Kevin Le

Reputation: 43

Thank you @ewerspej for the alternative but I could not get the GestureRecognizer to work for some reason it wasn't recognizing it as a member so I just wrapped a label inside of a border and that did what I wanted to do.

Edited code below:

<Border>
    <Label
        Text="How much wood could a woodchuck chuck if a woodchuck could chuck wood?"
        FontSize="40"
        TextColor="Black"
        FontFamily="Helvetica"
        BackgroundColor="#CCFFCC"
        VerticalOptions="CenterAndExpand" 
        HorizontalOptions="CenterAndExpand"
        HeightRequest="400"
        LineBreakMode='WordWrap'>
    </Label>
</Border>

Upvotes: 0

Related Questions