MAUI NET does not support right-to-left (rtl) layouts like ScrollView frame and border

Question

MAUI NET does not support right-to-left (rtl) layouts like ScrollView frame and border

WAEL 0

Please Help

WAEL 0 Reputation points

2023-08-16T17:00:57.2333333+00:00

MAUI NET does not support right-to-left (rtl) layouts In Ios only
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-08-17T06:13:08.6766667+00:00

How did you set the layout? Are the frame and border wraped in the ScrollView? Would you mind sharing some code snippets about XAML?

I tried to change language and set rtf for ScrollView, the label in it will display normally. I cannot reproduce this issue. What's the MAUI version?

In addition, please try to wrap the border into Vertical/HorizontalStackLayout, and set rtf for Vertical/HorizontalStackLayout.

WAEL 0


<ScrollView Grid.Row="1" VerticalOptions="Start"  HeightRequest="110" BackgroundColor="Transparent"  HorizontalOptions="Fill"     Orientation="Horizontal"   >

    <StackLayout BackgroundColor="Transparent"  Padding="15,5,15,5"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"   Orientation="Horizontal">
        <Frame  IsClippedToBounds="True"    HasShadow="False" 
                      HorizontalOptions="Fill"    CornerRadius="12"    Padding="0"    VerticalOptions="Fill"  BackgroundColor="Transparent" >



            <Image    WidthRequest="110"     Aspect="Fill"  Source="{x:Static resources:AppResource.Cafiey}"  />



            <Frame.GestureRecognizers>
                <TapGestureRecognizer     Tapped="TapGestureRecognizer_Tapped_7"/>
            </Frame.GestureRecognizers>
        </Frame>

        <Frame    IsClippedToBounds="True"   HasShadow="False" 
                         HorizontalOptions="Fill"       VerticalOptions="Fill"   CornerRadius="12"    Padding="0"      BackgroundColor="Transparent" >


            <Image  WidthRequest="110"    Aspect="Fill" Source="{x:Static resources:AppResource.Sueyou}"     />


            <Frame.GestureRecognizers>
                <TapGestureRecognizer    Tapped="TapGestureRecognizer_Tapped_2"/>
            </Frame.GestureRecognizers>
        </Frame>

        <Frame  IsClippedToBounds="True"    HasShadow="False" 
                      HorizontalOptions="Fill"    CornerRadius="12"    Padding="0"    VerticalOptions="Fill"  BackgroundColor="Transparent" >



            <Image    WidthRequest="110"     Aspect="Fill"  Source="{x:Static resources:AppResource.VariousStores}"  />



            <Frame.GestureRecognizers>
                <TapGestureRecognizer     Tapped="TapGestureRecognizer_Tapped_8"/>
            </Frame.GestureRecognizers>
        </Frame>
        <Frame  IsClippedToBounds="True"   HasShadow="False" 
                      HorizontalOptions="Fill"    CornerRadius="12"    Padding="0"    VerticalOptions="Fill"   BackgroundColor="Transparent" >


            <Image  WidthRequest="110"     Aspect="Fill" Source="{x:Static resources:AppResource.Fazzz}"   />


            <Frame.GestureRecognizers>
                <TapGestureRecognizer     Tapped="TapGestureRecognizer_Tapped_3"/>
            </Frame.GestureRecognizers>
        </Frame>





    </StackLayout>

</ScrollView>

This code does not work on ios

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-08-18T09:43:05.4+00:00

Do you mean that the images won't be arranged in right-to-left order？ I try setting <Grid FlowDirection="RightToLeft"> and still cannot reproduce the issue.

Could describe more details about your expected behavior and how it doesn't work? And what's the MAUI version, VS version? And which iOS device are you testing on?

WAEL 0

target framework .NET 7.0

Visual Studio for Mac 17.6.3(build 421)

Simulator Screenshot - iPhone 14 - 2023-08-18 at 14.20.19

<?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="TestRTL.MainPage">

    <ScrollView FlowDirection="RightToLeft" Orientation="Horizontal">
        <HorizontalStackLayout >
            <Frame HorizontalOptions="Start" HeightRequest="100" WidthRequest="100" BackgroundColor="Transparent" Padding="0" HasShadow="False" >
                <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="80"
                WidthRequest="80"
                HorizontalOptions="Start" />

            </Frame>
            
             <Frame HorizontalOptions="Start" HeightRequest="100" WidthRequest="100" BackgroundColor="Transparent" Padding="0" HasShadow="False" >
                <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="80"
                WidthRequest="80"
                HorizontalOptions="Start" />

            </Frame>
             <Frame HorizontalOptions="Start" HeightRequest="100" WidthRequest="100" BackgroundColor="Transparent" Padding="0" HasShadow="False" >
                <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="80"
                WidthRequest="80"
                HorizontalOptions="Start" />

            </Frame>
             <Frame HorizontalOptions="Start" HeightRequest="100" WidthRequest="100" BackgroundColor="Transparent" Padding="0" HasShadow="False" >
                <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="80"
                WidthRequest="80"
                HorizontalOptions="Start" />

            </Frame>
             <Frame HorizontalOptions="Start" HeightRequest="100" WidthRequest="100" BackgroundColor="Transparent" Padding="0" HasShadow="False" >
                <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="80"
                WidthRequest="80"
                HorizontalOptions="Start" />

            </Frame>

        </HorizontalStackLayout>
    </ScrollView>

</ContentPage>

Rob Caplan - MSFT 6,037 Reputation points Microsoft Employee Moderator

2023-08-21T01:42:15.4666667+00:00

To report Maui bugs please post them with full and clear details in the Maui GitHub repo at https://GitHub.com/dotnet/Maui .

There are several RTL issues already reported there and fixed in .Net 8. From the details provided here, I can’t tell if your issue is covered already or if it is a new one.
WAEL 0 Reputation points

2023-08-23T13:24:31.2533333+00:00

https://github.com/dotnet/maui/discussions/16898

Your answer

WAEL 0 Reputation points

2023-08-16T17:00:57.2333333+00:00

MAUI NET does not support right-to-left (rtl) layouts In Ios only
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-08-17T06:13:08.6766667+00:00

How did you set the layout? Are the frame and border wraped in the ScrollView? Would you mind sharing some code snippets about XAML?

I tried to change language and set rtf for ScrollView, the label in it will display normally. I cannot reproduce this issue. What's the MAUI version?

In addition, please try to wrap the border into Vertical/HorizontalStackLayout, and set rtf for Vertical/HorizontalStackLayout.
WAEL 0 Reputation points

2023-08-17T20:47:17.5066667+00:00

<ScrollView Grid.Row="1" VerticalOptions="Start" HeightRequest="110" BackgroundColor="Transparent" HorizontalOptions="Fill" Orientation="Horizontal" > <StackLayout BackgroundColor="Transparent" Padding="15,5,15,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Horizontal"> <Frame IsClippedToBounds="True" HasShadow="False" HorizontalOptions="Fill" CornerRadius="12" Padding="0" VerticalOptions="Fill" BackgroundColor="Transparent" > <Image WidthRequest="110" Aspect="Fill" Source="{x:Static resources:AppResource.Cafiey}" /> <Frame.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_7"/> </Frame.GestureRecognizers> </Frame> <Frame IsClippedToBounds="True" HasShadow="False" HorizontalOptions="Fill" VerticalOptions="Fill" CornerRadius="12" Padding="0" BackgroundColor="Transparent" > <Image WidthRequest="110" Aspect="Fill" Source="{x:Static resources:AppResource.Sueyou}" /> <Frame.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/> </Frame.GestureRecognizers> </Frame> <Frame IsClippedToBounds="True" HasShadow="False" HorizontalOptions="Fill" CornerRadius="12" Padding="0" VerticalOptions="Fill" BackgroundColor="Transparent" > <Image WidthRequest="110" Aspect="Fill" Source="{x:Static resources:AppResource.VariousStores}" /> <Frame.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_8"/> </Frame.GestureRecognizers> </Frame> <Frame IsClippedToBounds="True" HasShadow="False" HorizontalOptions="Fill" CornerRadius="12" Padding="0" VerticalOptions="Fill" BackgroundColor="Transparent" > <Image WidthRequest="110" Aspect="Fill" Source="{x:Static resources:AppResource.Fazzz}" /> <Frame.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/> </Frame.GestureRecognizers> </Frame> </StackLayout> </ScrollView>

This code does not work on ios
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-08-18T09:43:05.4+00:00

Do you mean that the images won't be arranged in right-to-left order？ I try setting <Grid FlowDirection="RightToLeft"> and still cannot reproduce the issue.

Could describe more details about your expected behavior and how it doesn't work? And what's the MAUI version, VS version? And which iOS device are you testing on?
Rob Caplan - MSFT 6,037 Reputation points Microsoft Employee Moderator

2023-08-21T01:42:15.4666667+00:00

To report Maui bugs please post them with full and clear details in the Maui GitHub repo at https://GitHub.com/dotnet/Maui .

There are several RTL issues already reported there and fixed in .Net 8. From the details provided here, I can’t tell if your issue is covered already or if it is a new one.
WAEL 0 Reputation points

2023-08-23T13:24:31.2533333+00:00

https://github.com/dotnet/maui/discussions/16898

Share via

MAUI NET does not support right-to-left (rtl) layouts like ScrollView frame and border

Your answer