Question How to move text to a new line on the phone?

StarLight

New member
Joined
May 21, 2024
Messages
1
Programming Experience
1-3
Hi everyone, I'm just starting to work with .Net MAUI and I need to make a chatbot application. But there was a problem that the output of messages from the phone is not displayed correctly.

I display the list of messages through ListView, which is located in a Grid cell:
XML:
<ListView x:Name="MessageListView" Grid.Column="1" Grid.Row="0">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <StackLayout Grid.Column="{Binding IsUserMessage, Converter={StaticResource BoolToGridColumnConverter}}"
                                 BackgroundColor="{Binding IsUserMessage, Converter={StaticResource BoolToColorConverter}}"
                                 HorizontalOptions="{Binding IsUserMessage, Converter={StaticResource BoolToHorizontalOptionsConverter}}"
                                 Margin="5">
                        <Label Text="{Binding Sender}" FontAttributes="Bold" HorizontalOptions="Start" />
                        <Label Text="{Binding UserMessage}"
                               HorizontalOptions="Start"
                               LineBreakMode="WordWrap"
                               MaxLines="20"
                               MaximumWidthRequest="250"
                               FontFamily="OpenSansSemibold" />
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

And if in this case on PC everything looks normal, lines are transferred, if the text is too long, then through the phone only 1 line is displayed, the rest of the text is not shown.

Can you tell me how to fix this?
 

Attachments

  • изображение_2024-05-21_164942865.png
    изображение_2024-05-21_164942865.png
    15.2 KB · Views: 4
  • изображение_2024-05-21_165520636.png
    изображение_2024-05-21_165520636.png
    24.4 KB · Views: 4
Back
Top Bottom