MAUI: Issue with FlowDirection

Question

MAUI: Issue with FlowDirection

Sreenivasan, Sreejith 435

My home page is a FlyoutPage and its FlowDirection is RightToLeft, because I need to open the flyout(menu pop up) from the right side. The detail page is TabbedPage with 3 children. The first child is an AlertsPage and if we click on any alert it will open a new page named it as AlertDetailPage. I have UI issues on this AlertDetailPage.

Please check the below screenshots:

Issue 1: Back arrow is showing right of title instead of left and more icon is showing left instead of right.

Issue 2: When we click on more icon it shows 2 options like below, it is right aligned, it should be aligned to left.

If I remove the FlyoutPage's FlowDirection, all the above UI issues are gone, but the menu is opening from left side. How can I fix this issue? I need to open the menu from right side and need to fix the above alignment issues.

I tried setting FlowDirection LeftToRight for AlertDetailPage xaml, cs and FlyoutPage.Detail, MenuPage but none of them works.

Jack Dang (WICLOUD CORPORATION) 6,300 Reputation points Microsoft External Staff Moderator

2025-11-28T08:29:57.6966667+00:00

Hi @Sreenivasan, Sreejith ,

To address this issue, I recommend creating a simplified demo. Even if the demo doesn’t reproduce the problem, I can review the code to help troubleshoot the behavior, similar to how your previous issues were resolved.
Sreenivasan, Sreejith 435 Reputation points

2025-12-01T08:15:05.11+00:00

Hi @Jack Dang (WICLOUD CORPORATION)

I have created a demo but I couldn't completely recreate the problem on it. Is there any other way to share the demo other than GitHub?
Jack Dang (WICLOUD CORPORATION) 6,300 Reputation points Microsoft External Staff Moderator

2025-12-01T08:33:08.75+00:00

Hi @Sreenivasan, Sreejith ,

Kindly check your private messages.
Sreenivasan, Sreejith 435 Reputation points

2025-12-05T08:29:19.1466667+00:00

@Jack Dang (WICLOUD CORPORATION) Did you get a chance to check this issue?
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-05T10:03:56.3866667+00:00

Hello, I’m currently covering this case on behalf of Jack. Please review your private message for further details.

Michael Le (WICLOUD CORPORATION) 7,020 Microsoft External Staff Moderator

Hello @Sreenivasan, Sreejith ,

The root problem is that DashboardMasterPage (FlyoutPage) has FlowDirection="RightToLeft", which cascades down to all child elements. What I have tried to do is force left-to-right flow direction at every single level.

However, this approach is not ideal because it requires changes in many places (XAML and code-behind), and it is hard to maintain. Also, I am not sure if I have covered all the places where FlowDirection needs to be forced to LeftToRight.

Your implementation of the details page is different from mine, so make sure to adapt the code snippets accordingly.

FlyoutPage (RTL - for menu) ← ROOT (kept as RTL for menu design)
    ↓
    └─ DetailNavigationPage (FORCED LTR) ← Layer 1: XAML
        ↓
        └─ DashboardTabPage (FORCED LTR) ← Layer 2: XAML
            ↓
            └─ AlertPage (NavigationPage - FORCED LTR) ← Layer 3: Runtime
                ↓
                └─ AlertDetailPage (FORCED LTR) ← Layer 4: XAML + Runtime
                    ↓
                    └─ ActionSheet Popup (FORCED LTR) ← Layer 5: Service

DashboardMasterPage.xaml

<NavigationPage x:Name="DetailNavigationPage" 
                FlowDirection="LeftToRight"  ← FORCED LTR
                BarBackgroundColor="{StaticResource Primary}"
                BarTextColor="White">

DashboardTabPage.xaml

<TabbedPage ... FlowDirection="LeftToRight" ...>  ← FORCED LTR

AlertDetailPage.xaml

<views:BaseContentPage ... FlowDirection="LeftToRight">  ← FORCED LTR

AlertDetailPage.xaml.cs

private void ForceLeftToRightLayout()
{
    this.FlowDirection = FlowDirection.LeftToRight;                    // ← Page

    if (this.Parent is NavigationPage navPage)
    {
        navPage.FlowDirection = FlowDirection.LeftToRight;             // ← NavigationPage

        if (navPage.Parent is VisualElement parentVisual)
        {
            parentVisual.FlowDirection = FlowDirection.LeftToRight;    // ← NavigationPage's Parent
        }
    }

    var mainPage = Application.Current?.MainPage;
    if (mainPage is FlyoutPage flyoutPage && flyoutPage.Detail is NavigationPage detailNav)
    {
        detailNav.FlowDirection = FlowDirection.LeftToRight;           // ← Detail NavigationPage
    }
}

DialogService.cs

public async Task<string> ShowChoices(...)
{
    page.FlowDirection = FlowDirection.LeftToRight;                   // ← Force LTR

    if (page is FlyoutPage fp && fp.Detail is NavigationPage detailNav)
    {
        detailNav.FlowDirection = FlowDirection.LeftToRight;          // ← NavigationPage
        page = detailNav.CurrentPage;
        page.FlowDirection = FlowDirection.LeftToRight;               // ← Current Page
    }
    return await page.DisplayActionSheet(...);  // Now displays LTR
}

NavigationService.cs

public async Task Push<TVM, TParameter>(TParameter param) ...
{
    await Navigate<TVM>(page =>
    {
        page.FlowDirection = FlowDirection.LeftToRight;               // ← New page
        var currentPage = Application.Current?.MainPage;

        if (currentPage is FlyoutPage fp && fp.Detail is NavigationPage detailNav)
        {
            detailNav.FlowDirection = FlowDirection.LeftToRight;      // ← NavigationPage
        }
        return Navigation.PushAsync(page, UseAnimations);
    }, vm => vm.InitParam = param);
}

BaseContentPage.cs

public BaseContentPage()
{
    FlowDirection = FlowDirection.LeftToRight;  // ← Already there
}

User's image

I hope this helps.

Sreenivasan, Sreejith 435 Reputation points

2025-12-18T08:02:08.49+00:00

@Michael Le (WICLOUD CORPORATION) I tried your solution and below is the result.

After adding the changes home tab and alerts tab are loading fine initially like below: Alerts tab showing first and more showing last in footer of home tab and on header archive showing first and menu showing last on alert tab

When choose an alert it shows the same issue: arrow on last and more icon on first.

If I click on more icon(3 dots icon), at that moment the back arrow will switch to left and more icon switched to right like below.

But at the same time the footer tabs are also changing: more will start showing on first and alerts is going to last. Also archive showing last and menu showing first on alert tab.
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-18T08:34:52.87+00:00
The top toolbar and bottom tab bar are tightly coupled in the visual tree, so changing one affects the other. This makes it very difficult to achieve:

Top toolbar = LTR

Bottom tab bar = RTL

A viable solution is to use a custom toolbar inside the details page, similar to the one you have in the resource page.
Sreenivasan, Sreejith 435 Reputation points

2025-12-18T08:56:32.5033333+00:00

@Michael Le (WICLOUD CORPORATION) I am also think about the same, adding a custom toolbar. Let me try and update you.
Sreenivasan, Sreejith 435 Reputation points

2025-12-18T09:56:34.82+00:00

@Michael Le (WICLOUD CORPORATION) Could you please update the solution with this new suggestion.
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-18T10:00:46.2033333+00:00

I have updated the answer.

Answer accepted by question author

0 additional answers

Your answer

Jack Dang (WICLOUD CORPORATION) 6,300 Reputation points Microsoft External Staff Moderator

2025-11-28T08:29:57.6966667+00:00

Hi @Sreenivasan, Sreejith ,

To address this issue, I recommend creating a simplified demo. Even if the demo doesn’t reproduce the problem, I can review the code to help troubleshoot the behavior, similar to how your previous issues were resolved.
Sreenivasan, Sreejith 435 Reputation points

2025-12-01T08:15:05.11+00:00

Hi @Jack Dang (WICLOUD CORPORATION)

I have created a demo but I couldn't completely recreate the problem on it. Is there any other way to share the demo other than GitHub?
Jack Dang (WICLOUD CORPORATION) 6,300 Reputation points Microsoft External Staff Moderator

2025-12-01T08:33:08.75+00:00

Hi @Sreenivasan, Sreejith ,

Kindly check your private messages.
Sreenivasan, Sreejith 435 Reputation points

2025-12-05T08:29:19.1466667+00:00

@Jack Dang (WICLOUD CORPORATION) Did you get a chance to check this issue?
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-05T10:03:56.3866667+00:00

Hello, I’m currently covering this case on behalf of Jack. Please review your private message for further details.
Sreenivasan, Sreejith 435 Reputation points

2025-12-18T08:02:08.49+00:00

@Michael Le (WICLOUD CORPORATION) I tried your solution and below is the result.

After adding the changes home tab and alerts tab are loading fine initially like below: Alerts tab showing first and more showing last in footer of home tab and on header archive showing first and menu showing last on alert tab

When choose an alert it shows the same issue: arrow on last and more icon on first.

If I click on more icon(3 dots icon), at that moment the back arrow will switch to left and more icon switched to right like below.

But at the same time the footer tabs are also changing: more will start showing on first and alerts is going to last. Also archive showing last and menu showing first on alert tab.
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-18T08:34:52.87+00:00

The top toolbar and bottom tab bar are tightly coupled in the visual tree, so changing one affects the other. This makes it very difficult to achieve:

Top toolbar = LTR

Bottom tab bar = RTL

A viable solution is to use a custom toolbar inside the details page, similar to the one you have in the resource page.
Sreenivasan, Sreejith 435 Reputation points

2025-12-18T08:56:32.5033333+00:00

@Michael Le (WICLOUD CORPORATION) I am also think about the same, adding a custom toolbar. Let me try and update you.
Sreenivasan, Sreejith 435 Reputation points

2025-12-18T09:56:34.82+00:00

@Michael Le (WICLOUD CORPORATION) Could you please update the solution with this new suggestion.
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-18T10:00:46.2033333+00:00

I have updated the answer.

Answer 1

Hello @Sreenivasan, Sreejith ,

You can take a look at this implementation:

Inside AlertDetailPage.xaml

<Grid RowDefinitions="Auto,*">
    <!-- Row 0: Custom Toolbar -->
    <Grid BackgroundColor="Primary" 
          HeightRequest="56" 
          FlowDirection="LeftToRight">

        <ColumnDefinitions>
            <ColumnDefinition Width="56" />   <!-- Back -->
            <ColumnDefinition Width="*" />     <!-- Title -->
            <ColumnDefinition Width="56" />    <!-- Menu -->
        </ColumnDefinitions>

        <!-- 3 Elements in toolbar -->
        <!-- Back Button (Always on Left in LTR) -->
        <Button Grid.Column="0"
                Text="←"
                FontSize="28"
                BackgroundColor="Transparent"
                TextColor="White"
                Padding="0"
                Margin="8,0,0,0"
                Clicked="OnBackButtonClicked"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                WidthRequest="40"
                HeightRequest="40" />

        <!-- Title -->
        <Label Grid.Column="1"
                Text="{Binding CurrentNotification.Title}"
                TextColor="White"
                FontSize="18"
                FontAttributes="Bold"
                VerticalOptions="Center"
                HorizontalOptions="Start"
                Margin="8,0,8,0"
                LineBreakMode="TailTruncation"
                MaxLines="1" />

        <!-- Three-Dot Menu Button (Always on Right in LTR) -->
        <ImageButton Grid.Column="2"
                        Source="gui_three_dots.png"
                        BackgroundColor="Transparent"
                        Padding="12"
                        Command="{Binding MoreCommand}"
                        VerticalOptions="Center"
                        HorizontalOptions="Center"
                        WidthRequest="40"
                        HeightRequest="40" />       
    </Grid>

    <!-- Row 1: Page Content -->
    <ScrollView Grid.Row="1">
        ...
    </ScrollView>
</Grid>

Code behind AlertDetailPage.xaml.cs

public AlertDetailPage()
{
    InitializeComponent();
    // Hide default NavigationBar
    NavigationPage.SetHasNavigationBar(this, false);
}

private async void OnBackButtonClicked(object sender, EventArgs e)
{
    await Navigation.PopAsync();
}

Also, you would need to handle the issue where opening an action sheet popup from the AlertDetailPage's three-dot menu was changing the bottom tab bar's FlowDirection from RTL to LTR.

Add this inside your DialogService.cs

// Navigate hierarchy to find presenting page (skips TabbedPage)
private Page GetPresentingPage()
{
    var mainPage = Application.Current?.MainPage;
    if (mainPage is FlyoutPage flyout)
    {
        if (flyout.Detail is NavigationPage detailNav)
        {
            // If Detail contains a TabbedPage, get the current tab's content
            if (detailNav.CurrentPage is TabbedPage tabbedPage)
            {
                var currentTab = tabbedPage.CurrentPage;
                // If current tab is a NavigationPage, get its current page
                if (currentTab is NavigationPage tabNav)
                {
                    return tabNav.CurrentPage; // AlertDetailPage
                }
                return currentTab;
            }
            return detailNav.CurrentPage;
        }
    }
    return mainPage;
}

public async Task<string> ShowChoices(string title, string cancel, 
                                       string destruction, params string[] buttons)
{
    var presentingPage = GetPresentingPage();
    // Store original FlowDirection values
    var originalPageFlow = presentingPage.FlowDirection;
    var originalParentFlow = FlowDirection.MatchParent;
    NavigationPage parentNav = null;
    if (presentingPage.Parent is NavigationPage nav)
    {
        parentNav = nav;
        originalParentFlow = nav.FlowDirection;
    }
    try
    {
        // Force LTR only on presenting page and its NavigationPage
        presentingPage.FlowDirection = FlowDirection.LeftToRight;
        if (parentNav != null)
        {
            parentNav.FlowDirection = FlowDirection.LeftToRight;
        }
        return await presentingPage.DisplayActionSheet(
            title, 
            cancel ?? "DialogCancel".Localized(), 
            destruction, 
            buttons);
    }
    finally
    {
        // Restore original FlowDirection values
        presentingPage.FlowDirection = originalPageFlow;
        if (parentNav != null)
        {
            parentNav.FlowDirection = originalParentFlow;
        }
    }
}

Sreenivasan, Sreejith 435 Reputation points

2025-12-18T10:03:15.68+00:00

@Michael Le (WICLOUD CORPORATION) Thank you very much for this solution.
Michael Le (WICLOUD CORPORATION) 7,020 Reputation points Microsoft External Staff Moderator

2025-12-18T10:05:32.8+00:00

I suspect it still needs some adjustments. Please let me know if you have any questions.

Share via

MAUI: Issue with FlowDirection

0 additional answers

Your answer