Xamarin Forms master detail page flow direction in Arabic

mhmdmhmd Member ✭✭

I have a Master-Detail Page in my project, I've set the phone language to Arabic and everything is working fine the master page is on the right and the icon is on the right. But the thing is the TitleView (toolbaritems) are pushed a little bit to the right when the phone is set to Arabic. I tried this without Master-Detail page project and the TitleView is working fine and it is in the exact place.

With Master Detail Page:

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:local="clr-namespace:AppXamarin.Pages"
                  x:Class="AppXamarin.Pages.MasterMainPage" NavigationPage.HasNavigationBar="False" NavigationPage.HasBackButton="False" FlowDirection="{x:Static Device.FlowDirection}">
    <MasterDetailPage.Master>
        <local:MasterPage x:Name ="masterPage" FlowDirection="{x:Static Device.FlowDirection}"/>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage FlowDirection="{x:Static Device.FlowDirection}">
            <x:Arguments>
                <local:MenuPage></local:MenuPage>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

MenuPage Xaml file:

         <NavigationPage.TitleView>
                <Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Tapped="cart_Clicked"/>
                    </Grid.GestureRecognizers>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
                        <Image.HeightRequest>
                            <OnIdiom Phone="25" Tablet="35"/>
                        </Image.HeightRequest>
                        <Image.WidthRequest>
                            <OnIdiom Phone="25" Tablet="35"/>
                        </Image.WidthRequest>
                    </Image>
                    <Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
                        <Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
                    </Frame>
                </Grid>
            </NavigationPage.TitleView>

Result:

Without Master Detail Page:

    <NavigationPage.TitleView>
     <Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
                <!--<Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="cart_Clicked"/>
                </Grid.GestureRecognizers>-->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
                    <Image.HeightRequest>
                        <OnIdiom Phone="25" Tablet="35"/>
                    </Image.HeightRequest>
                    <Image.WidthRequest>
                        <OnIdiom Phone="25" Tablet="35"/>
                    </Image.WidthRequest>
                </Image>
                <Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
                    <Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
                </Frame>
            </Grid>
            <!--</Grid>-->
        </NavigationPage.TitleView>

Result:

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post a basic demo so that we can test with it?

  • akhilgeorge303akhilgeorge303 Member ✭✭

    manifest :

    MainView.xaml

  • akhilgeorge303akhilgeorge303 Member ✭✭

    manifest :

     <application android:label="Sanaap" android:icon="@mipmap/launcher_foreground" android:theme="@style/MainTheme" android:supportsRtl="true">
    

    MainView.xaml

    <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Sanaap.App.Views.MenuView" 
                 FlowDirection="RightToLeft"
                 Title="Main">
    
Sign In or Register to comment.