Maui for android LTR RTL modes problem

Haviv Elbsz 1,886

This is a complete code that show my issue


Hello when runnig this this app the swich to RTL mode its not set focus
and not show caret cursor. but for LTR mode its work OK
how I fix this Thank you.


MainPage.xaml file
------------------


<?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="LTR_RTL_Switch.MainPage" 
             FlowDirection="LeftToRight" BackgroundColor="#107e71" >

    <ScrollView x:Name="topscroll">

        <VerticalStackLayout x:Name="vLayout" Margin="10" Padding="5" Spacing="5" BackgroundColor="#ECE5DD" >
            
            <HorizontalStackLayout >
 



               <CheckBox x:Name="L2RAlfaBetCKB" IsChecked="False"
                    CheckedChanged="L2RAlfaBetCKB_CheckedChanged"
                    HorizontalOptions="Center" VerticalOptions="Center" />

                <Label Text="Checked = RightToLeft Writing" FontAttributes="Bold"
                    HorizontalOptions="Start" VerticalOptions="Center" />
            </HorizontalStackLayout>

            <Border  StrokeThickness="1" Stroke="#107e71" >

                <ScrollView x:Name="editscroll" Orientation="Vertical" HeightRequest="400"
                   BackgroundColor="LightBlue" VerticalScrollBarVisibility="Always" >

                    <ScrollView Orientation="Horizontal" HorizontalScrollBarVisibility="Always" >

                        <Editor x:Name="InputTB"
                           FontSize="18" FlowDirection="LeftToRight"
                           AutoSize="TextChanges" TextChanged="InputTB_TextChanged"
                           IsSpellCheckEnabled="False"
                           FontAttributes="Bold" IsTextPredictionEnabled="False"
                           FontFamily="NCourier" 
                           MinimumWidthRequest="-1" >
                        </Editor>

                    </ScrollView>
                </ScrollView>

            </Border>

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
        
    </ScrollView>

</ContentPage>


MainPage.xaml.cs file
---------------------

namespace LTR_RTL_Switch;

public partial class MainPage : ContentPage
{
	int count = 0;
    bool bL2RAflipping = false;

    public MainPage()
	{
	  InitializeComponent();
	  //InputTB.Focus();
    }

	private void OnCounterClicked(object sender, EventArgs e)
	{
		count++;

		if (count == 1)
			CounterBtn.Text = $"Clicked {count} time";
		else
			CounterBtn.Text = $"Clicked {count} times";

		SemanticScreenReader.Announce(CounterBtn.Text);
	}

  //-----------------------------------------------------------------------------

   private void MainPage_Loaded(object sender, EventArgs e)
   {
     InputTB.Focus();
   }

  //-----------------------------------------------------------------------------

  private void L2RAlfaBetCKB_CheckedChanged(object sender, CheckedChangedEventArgs e)
  {

    if (L2RAlfaBetCKB.IsChecked == true)
    {
        bL2RAflipping = true;
        InputTB.FlowDirection = FlowDirection.RightToLeft;
    }
    else
    {
      bL2RAflipping = false;
      InputTB.FlowDirection = FlowDirection.LeftToRight;
    }

    InputTB.Focus();
  }

    //-----------------------------------------------------------------------------



    //private void L2RAlfaBetCKB_CheckedChanged(object sender, CheckedChangedEventArgs e)
    //{

    //}

    private void InputTB_TextChanged(object sender, TextChangedEventArgs e)
	{

    }
}

Haviv Elbsz 1,886 Reputation points

2023-03-10T13:19:20.25+00:00

In RTL mode when I tap in the editor to start writing the carate cursor not show and cannot writing in this mode but when switching to LTR mode all its OK how can I fix that

Accepted answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 35,021 Reputation points Microsoft Vendor

2023-03-13T05:57:13.8466667+00:00
Hello,

After my tests, the cause of this issue is the AutoSize property, and RTL works fine after removing this property.

<Editor x:Name="InputTB" FontSize="18" FlowDirection="LeftToRight" TextChanged="InputTB_TextChanged" IsSpellCheckEnabled="False" FontAttributes="Bold" IsTextPredictionEnabled="False" FontFamily="NCourier" MinimumWidthRequest="-1" > </Editor>

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Haviv Elbsz 1,886 Reputation points

2023-03-13T07:17:44.4666667+00:00

Hi Alec Liu . and thank you very much. but that solution change the style of text wrap before tapping a new line. without this change it's working for LTR with this style. it's important for me to keep this style. again I am very thankful to you. for your efforts.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 35,021 Reputation points Microsoft Vendor

2023-03-14T05:50:40.1366667+00:00

Upon closer investigation, the root cause of this problem was that the initial value of MinimumWidthRequest was set too small, causing autoszie to adjust the editor to be unseen.

You can delete the MinimumWidthRequest from xaml and refer to the following code to set a reasonable minimum width for the editor.

protected override void OnAppearing() { base.OnAppearing(); var mainDisplayInfo = DeviceDisplay.MainDisplayInfo; InputTB.MinimumWidthRequest = mainDisplayInfo.Width / 3; }

Haviv Elbsz 1,886 Reputation points

2023-03-14T09:49:41.05+00:00

Do I need also remove the autosize. and put this protected method in code behind?

Haviv Elbsz 1,886 Reputation points

2023-03-14T10:45:57.15+00:00

Hi Alec liu and thank you very very much it's working but there is a small phenomena in the working as follows:. in the app starting if firstly I start writing in RTL in this case Hebrew. the letters advanced backwards instead of forward. but if firstly I start writing in LTR in this case English write some letters and clear them and then I move to RTL the writing is ok. in other words if the user start in English and then move to RTL writing go ok. but if the user start writing in RTL he. Will be confused

Haviv Elbsz 1,886 Reputation points

2023-03-14T16:05:49.3566667+00:00

Hi Alec Liu. and thank you very very very much. it's working!!! Please can you explain mainDisplayInfo.Width / 3 (why? /3). why not use mainDisplayInfo.Density

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 35,021 Reputation points Microsoft Vendor

2023-03-15T05:21:41.79+00:00

Thanks for you feedback.

For your new issue, it is recommended that you create a new thread. This not only conforms to community norms, but also helps people with the same problem to retrieve it in the community.

Please can you explain mainDisplayInfo.Width / 3 (why? /3). why not use mainDisplayInfo.Density

Actually, this is just my personal habit, the purpose of /3 is to find a reasonable width size.
Sign in to comment

Maui for android LTR RTL modes problem

0 additional answers