How to disable/Remove the hamburger menu icon in Maui - .Net 8

Vaibhav Methuku 60

I had added flyout in my maui project (not shell). By default I can able to see the hamburger menu icon in Window. I want to remove that icon. and want add a custom icon.

Thanks,
Vaibhav Methuku.

Untitled

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage
    x:Class=" Ecolab.IndustrialApps.TVDApp.TVD.Views.RootPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:appInfo="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials"
    xmlns:cc="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.CustomControls"
    xmlns:cv="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.CustomViews"
    xmlns:ext="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Resources.AppIcon"
    xmlns:ext_img="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images"
    xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
    xmlns:pages="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Views"
    xmlns:res="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Resources"
    xmlns:tcoApp="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD"
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Name="flyout"
    Padding="50"
    BackgroundColor="Transparent"
    FlyoutLayoutBehavior="Popover">
    <FlyoutPage.Resources>
        <DataTemplate x:Key="MobileTemplate">
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <StackLayout
                        x:Name="MenuItemsStack"
                        Padding="13,15,0,15"
                        BackgroundColor="{DynamicResource ClrAccEcolabBlue}"
                        Orientation="Horizontal"
                        Spacing="8">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer
                                BindingContext="{Binding Source={x:Reference menuItemsCollection}, Path=BindingContext}"
                                Command="{Binding SwitchViewCommand}"
                                CommandParameter="{Binding Source={x:Reference MenuItemsStack}, Path=BindingContext}" />
                        </StackLayout.GestureRecognizers>
                        <Label
                            Padding="0,6,0,0"
                            AutomationId="autoimgScenarioHome"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{Binding Image}"
                            VerticalOptions="CenterAndExpand" />
                        <Label
                            Padding="3,7,0,0"
                            AutomationId="autolblProjectHome"
                            Style="{StaticResource MenuLabelStyle}"
                            Text="{Binding Name}"
                            VerticalOptions="CenterAndExpand" />
                        <StackLayout.Triggers>
                            <DataTrigger
                                Binding="{Binding IsSelected}"
                                TargetType="StackLayout"
                                Value="false">
                                <Setter Property="BackgroundColor" Value="{DynamicResource ClrAccProjectText}" />
                            </DataTrigger>
                        </StackLayout.Triggers>
                    </StackLayout>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
        <DataTemplate x:Key="WinUITemplate">
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <cv:PointerOverStackLayout
                        x:Name="MenuItemsStack"
                        Padding="13,15,0,15"
                        IsSelected="{Binding IsSelected}"
                        Orientation="Horizontal"
                        PointOverColor="{DynamicResource ClrAccLightBlue}"
                        SelectedColor="{DynamicResource ClrEcolabBlue}"
                        Spacing="8">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer
                                BindingContext="{Binding Source={x:Reference menuItemsCollection}, Path=BindingContext}"
                                Command="{Binding SwitchViewCommand}"
                                CommandParameter="{Binding Source={x:Reference MenuItemsStack}, Path=BindingContext}" />
                        </StackLayout.GestureRecognizers>
                        <Label
                            Padding="0,6,0,0"
                            AutomationId="autoimgScenarioHome"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{Binding Image}"
                            VerticalOptions="CenterAndExpand" />
                        <Label
                            Padding="3,7,0,0"
                            AutomationId="autolblProjectHome"
                            Style="{StaticResource MenuLabelStyle}"
                            Text="{Binding Name}"
                            VerticalOptions="CenterAndExpand" />
                    </cv:PointerOverStackLayout>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </FlyoutPage.Resources>
    <Page.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="{StaticResource ClrAccDeepBlue}" />
    </Page.Behaviors>
    <FlyoutPage.Flyout>
        <ContentPage
            x:Name="flyoutPage"
            Title="Master"
            IconImageSource="{ext_img:ImageResource Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images.Ecolab.png}}"
            NavigationPage.HasNavigationBar="False">
            <Grid
                BackgroundColor="{StaticResource ClrAccDarkBlue}"
                ColumnSpacing="1"
                RowSpacing="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="{OnIdiom 0.06*, Phone=0.1*}" />
                    <RowDefinition Height="0.65*" />
                    <RowDefinition Height="0.4*" />
                    <RowDefinition Height="0.09*" />
                </Grid.RowDefinitions>
                <HorizontalStackLayout
                    Grid.Row="0"
                    Padding="16,0,0,2"
                    Spacing="8"
                    VerticalOptions="EndAndExpand">
                    <HorizontalStackLayout>
                        <Image
                            Margin="40,0,0,0"
                            HeightRequest="70"
                            Source="{OnPlatform Android='ecolablogo.png',
                                                iOS={ext_img:ImageResource Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images.Ecolab.png},
                                                WinUI={ext_img:ImageResource Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images.Ecolab.png}}"
                            WidthRequest="70">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding SwitchViewCommand}" />
                            </Image.GestureRecognizers>
                        </Image>
                        <BoxView
                            Margin="12,0,10,0"
                            BackgroundColor="White"
                            HeightRequest="16"
                            WidthRequest="1.3" />
                        <Label
                            Margin="0,0,0,2"
                            FontFamily="AppRobotoMediumFont"
                            FontSize="17"
                            Text="TVD Calculator"
                            TextColor="White"
                            VerticalOptions="CenterAndExpand" />
                    </HorizontalStackLayout>
                </HorizontalStackLayout>
                <telerik:RadListView
                    x:Name="menuItemsCollection"
                    Grid.Row="1"
                    Margin="{OnIdiom '0,0,0,0',
                                     Phone='0,16,0,0'}"
                    BackgroundColor="{StaticResource ClrAccDarkBlue}"
                    ItemTemplate="{OnPlatform Android={StaticResource MobileTemplate},
                                              iOS={StaticResource MobileTemplate},
                                              WinUI={StaticResource WinUITemplate}}"
                    ItemsSource="{Binding MenuItemsList}">
                    <telerik:RadListView.PressedItemStyle>
                        <telerik:ListViewItemStyle
                            BackgroundColor="Transparent"
                            BorderColor="Transparent"
                            BorderLocation="Bottom"
                            TextCellTextColor="Transparent" />
                    </telerik:RadListView.PressedItemStyle>
                </telerik:RadListView>
                <StackLayout
                    Grid.Row="2"
                    Margin="0,0,0,0"
                    HorizontalOptions="FillAndExpand"
                    Spacing="10"
                    VerticalOptions="EndAndExpand">
                    <HorizontalStackLayout
                        Padding="14,12,0,12"
                        IsVisible="{OnIdiom 'True',
                                            Phone='False'}"
                        Spacing="9">
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnPhone_Tapped" />
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label
                            AutomationId="autoimgSyncNow"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconPhone}"
                            VerticalOptions="Center" />
                        <Label
                            Margin="1,0,0,0"
                            AutomationId="autolblSystemOnline"
                            Style="{DynamicResource MenuLabelStyle}"
                            Text="{x:Static res:AppResources.ScanText}"
                            VerticalOptions="Center" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="{DynamicResource ClrAccLightBlue}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                    </HorizontalStackLayout>
                    <HorizontalStackLayout Padding="14,12,0,12" Spacing="9">
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding SyncNowCommand}" />
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label
                            AutomationId="autoimgSyncNow"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconSync}"
                            VerticalOptions="Center" />
                        <Label
                            Margin="1,0,0,0"
                            AutomationId="autolblSyncUpToDate"
                            Style="{StaticResource MenuLabelStyle}"
                            Text="{x:Static res:AppResources.MenuSync}"
                            VerticalOptions="Center" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="{DynamicResource ClrAccLightBlue}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                    </HorizontalStackLayout>
                    <HorizontalStackLayout Padding="14,12,0,12" Spacing="9">
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer />
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label
                            AutomationId="autoimgOnline"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconCloud}"
                            VerticalOptions="Center">
                            <Label.Triggers>
                                <DataTrigger
                                    Binding="{Binding Source={x:Static tcoApp:App.Instance}, Path=ConnectivityText}"
                                    TargetType="Label"
                                    Value="{x:Static res:AppResources.SystemOffline}">
                                    <Setter Property="Text" Value="{x:Static ext:IconFont.IconCloud_off}" />
                                </DataTrigger>
                            </Label.Triggers>
                        </Label>
                        <Label
                            Margin="1,0,0,0"
                            AutomationId="autolblSystemOnline"
                            Style="{DynamicResource MenuLabelStyle}"
                            Text="{Binding Source={x:Static tcoApp:App.Instance}, Path=ConnectivityText}"
                            VerticalOptions="Center" />
                    </HorizontalStackLayout>
                </StackLayout>
                <Grid Grid.Row="3" ColumnDefinitions="Auto,*">
                    <Label
                        x:Name="versionLbl"
                        Padding="3,0,0,0"
                        HorizontalOptions="StartAndExpand"
                        IsVisible="{OnIdiom 'True',
                                            Phone='False'}"
                        Style="{DynamicResource MenuLabelStyle}"
                        Text="{Binding AppVersion}"
                        VerticalTextAlignment="Start">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding VersionCommand}" />
                        </Label.GestureRecognizers>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Property="TextColor" Value="{DynamicResource ClrAccLightBlue}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="TextColor" Value="{DynamicResource ClrWhite}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                    </Label>
                    <cv:PointerOverStackLayout
                        x:Name="infoStack"
                        Grid.Column="1"
                        HorizontalOptions="CenterAndExpand"
                        Orientation="Horizontal"
                        Spacing="9">
                        <Label
                            x:Name="versionString"
                            Margin="0,3,0,0"
                            Style="{DynamicResource MenuLabelStyle}"
                            Text="{Binding AppVersion}"
                            VerticalTextAlignment="Start" />
                        <Label
                            x:Name="infoIcon"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconInformationOutline}" />
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding VersionCommand}" />
                        </StackLayout.GestureRecognizers>
                        <cv:PointerOverStackLayout.Triggers>
                            <DataTrigger
                                Binding="{Binding Source={x:Reference infoStack}, Path=IsPointerOver}"
                                TargetType="cv:PointerOverStackLayout"
                                Value="true">
                                <Setter TargetName="versionString" Property="Label.TextColor" Value="{DynamicResource ClrAccLightBlue}" />
                                <Setter TargetName="infoIcon" Property="Label.TextColor" Value="{DynamicResource ClrAccLightBlue}" />
                            </DataTrigger>
                        </cv:PointerOverStackLayout.Triggers>
                    </cv:PointerOverStackLayout>
                </Grid>
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnTab_Tapped" />
                </Grid.GestureRecognizers>
            </Grid>
        </ContentPage>
    </FlyoutPage.Flyout>
</FlyoutPage>

Here's the piece of code..

	public RootPage()
	{

		InitializeComponent();
        ModifyFlyout();
		App.RootPage = this;
	}
	
    public void ModifyFlyout()
    {
        Microsoft.Maui.Handlers.FlyoutViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if WINDOWS
            handler.PlatformView.GotFocus += (s, e) =>
            {
                handler.PlatformView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftCompact;
                handler.PlatformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0, 0, 0, 0);
				handler.PlatformView.CornerRadius = new Microsoft.UI.Xaml.CornerRadius(0,0,0,0);
				handler.PlatformView.IsTitleBarAutoPaddingEnabled = false;
			
            };
#endif
        });
    }

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-22T05:59:48.8433333+00:00
Hello,

I want to remove that icon. and want add a custom icon.

This icon can be changed by setting the Shell.FlyoutIcon bindable property.

<Shell ... FlyoutIcon="flyouticon.png"> ... </Shell>

For more details, please see .NET MAUI Shell flyout - .NET MAUI | Microsoft Learn

Best Regards,

Wenyan Zhang

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.
Vaibhav Methuku 60 Reputation points

2024-04-22T06:02:25.3+00:00

I had added flyout in my maui project (not shell). I'm not using shell
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-22T08:00:33.03+00:00

OK, I got it, and I converted the answer to comment.

On which platform? iOS or Android or Windows?
Vaibhav Methuku 60 Reputation points

2024-04-22T08:08:39.21+00:00

In windows
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-23T06:22:13.46+00:00
If you set FlyoutPage.Flyout like the following, please check if you can set the IconImageSource for the FlyoutMenuPage, refer to FlyoutPage - .NET MAUI | Microsoft Learn

<FlyoutPage.Flyout> <local:FlyoutMenuPage x:Name="flyoutPage" /> </FlyoutPage.Flyout>

Setting IconImageSource

<ContentPage ... IconImageSource="hamburger.png" Title="Personal Organiser"> </ContentPage>
Vaibhav Methuku 60 Reputation points

2024-04-23T06:30:53.19+00:00

In windows by default on adding the flyout I can able to see the hamburger menu icon

as show in the above image. I want remove the default one and want to add a custom icon at my desired place as shown in the above image.
I hope this will help in understanding the requirement.

Thanks
Vaibhav Methuku.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-23T06:36:33.6633333+00:00

All four menu icons, right? Could you share some code snippets about how you use the FlyOutpage and how you set the FlyoutPage.Flyout and FlyoutPage.Detail?

Vaibhav Methuku 60

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage
    x:Class=" Ecolab.IndustrialApps.TVDApp.TVD.Views.RootPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:appInfo="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials"
    xmlns:cc="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.CustomControls"
    xmlns:cv="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.CustomViews"
    xmlns:ext="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Resources.AppIcon"
    xmlns:ext_img="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images"
    xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
    xmlns:pages="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Views"
    xmlns:res="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD.Resources"
    xmlns:tcoApp="clr-namespace:Ecolab.IndustrialApps.TVDApp.TVD"
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Name="flyout"
    Padding="50"
    BackgroundColor="Transparent"
    FlyoutLayoutBehavior="Popover">
    <FlyoutPage.Resources>
        <DataTemplate x:Key="MobileTemplate">
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <StackLayout
                        x:Name="MenuItemsStack"
                        Padding="13,15,0,15"
                        BackgroundColor="{DynamicResource ClrAccEcolabBlue}"
                        Orientation="Horizontal"
                        Spacing="8">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer
                                BindingContext="{Binding Source={x:Reference menuItemsCollection}, Path=BindingContext}"
                                Command="{Binding SwitchViewCommand}"
                                CommandParameter="{Binding Source={x:Reference MenuItemsStack}, Path=BindingContext}" />
                        </StackLayout.GestureRecognizers>
                        <Label
                            Padding="0,6,0,0"
                            AutomationId="autoimgScenarioHome"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{Binding Image}"
                            VerticalOptions="CenterAndExpand" />
                        <Label
                            Padding="3,7,0,0"
                            AutomationId="autolblProjectHome"
                            Style="{StaticResource MenuLabelStyle}"
                            Text="{Binding Name}"
                            VerticalOptions="CenterAndExpand" />
                        <StackLayout.Triggers>
                            <DataTrigger
                                Binding="{Binding IsSelected}"
                                TargetType="StackLayout"
                                Value="false">
                                <Setter Property="BackgroundColor" Value="{DynamicResource ClrAccProjectText}" />
                            </DataTrigger>
                        </StackLayout.Triggers>
                    </StackLayout>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
        <DataTemplate x:Key="WinUITemplate">
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <cv:PointerOverStackLayout
                        x:Name="MenuItemsStack"
                        Padding="13,15,0,15"
                        IsSelected="{Binding IsSelected}"
                        Orientation="Horizontal"
                        PointOverColor="{DynamicResource ClrAccLightBlue}"
                        SelectedColor="{DynamicResource ClrEcolabBlue}"
                        Spacing="8">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer
                                BindingContext="{Binding Source={x:Reference menuItemsCollection}, Path=BindingContext}"
                                Command="{Binding SwitchViewCommand}"
                                CommandParameter="{Binding Source={x:Reference MenuItemsStack}, Path=BindingContext}" />
                        </StackLayout.GestureRecognizers>
                        <Label
                            Padding="0,6,0,0"
                            AutomationId="autoimgScenarioHome"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{Binding Image}"
                            VerticalOptions="CenterAndExpand" />
                        <Label
                            Padding="3,7,0,0"
                            AutomationId="autolblProjectHome"
                            Style="{StaticResource MenuLabelStyle}"
                            Text="{Binding Name}"
                            VerticalOptions="CenterAndExpand" />
                    </cv:PointerOverStackLayout>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </FlyoutPage.Resources>
    <Page.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="{StaticResource ClrAccDeepBlue}" />
    </Page.Behaviors>
    <FlyoutPage.Flyout>
        <ContentPage
            x:Name="flyoutPage"
            Title="Master"
            IconImageSource="{ext_img:ImageResource Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images.Ecolab.png}}"
            NavigationPage.HasNavigationBar="False">
            <Grid
                BackgroundColor="{StaticResource ClrAccDarkBlue}"
                ColumnSpacing="1"
                RowSpacing="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="{OnIdiom 0.06*, Phone=0.1*}" />
                    <RowDefinition Height="0.65*" />
                    <RowDefinition Height="0.4*" />
                    <RowDefinition Height="0.09*" />
                </Grid.RowDefinitions>
                <HorizontalStackLayout
                    Grid.Row="0"
                    Padding="16,0,0,2"
                    Spacing="8"
                    VerticalOptions="EndAndExpand">
                    <HorizontalStackLayout>
                        <Image
                            Margin="40,0,0,0"
                            HeightRequest="70"
                            Source="{OnPlatform Android='ecolablogo.png',
                                                iOS={ext_img:ImageResource Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images.Ecolab.png},
                                                WinUI={ext_img:ImageResource Ecolab.IndustrialApps.TVDApp.TVD.Resources.Images.Ecolab.png}}"
                            WidthRequest="70">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding SwitchViewCommand}" />
                            </Image.GestureRecognizers>
                        </Image>
                        <BoxView
                            Margin="12,0,10,0"
                            BackgroundColor="White"
                            HeightRequest="16"
                            WidthRequest="1.3" />
                        <Label
                            Margin="0,0,0,2"
                            FontFamily="AppRobotoMediumFont"
                            FontSize="17"
                            Text="TVD Calculator"
                            TextColor="White"
                            VerticalOptions="CenterAndExpand" />
                    </HorizontalStackLayout>
                </HorizontalStackLayout>
                <telerik:RadListView
                    x:Name="menuItemsCollection"
                    Grid.Row="1"
                    Margin="{OnIdiom '0,0,0,0',
                                     Phone='0,16,0,0'}"
                    BackgroundColor="{StaticResource ClrAccDarkBlue}"
                    ItemTemplate="{OnPlatform Android={StaticResource MobileTemplate},
                                              iOS={StaticResource MobileTemplate},
                                              WinUI={StaticResource WinUITemplate}}"
                    ItemsSource="{Binding MenuItemsList}">
                    <telerik:RadListView.PressedItemStyle>
                        <telerik:ListViewItemStyle
                            BackgroundColor="Transparent"
                            BorderColor="Transparent"
                            BorderLocation="Bottom"
                            TextCellTextColor="Transparent" />
                    </telerik:RadListView.PressedItemStyle>
                </telerik:RadListView>
                <StackLayout
                    Grid.Row="2"
                    Margin="0,0,0,0"
                    HorizontalOptions="FillAndExpand"
                    Spacing="10"
                    VerticalOptions="EndAndExpand">
                    <HorizontalStackLayout
                        Padding="14,12,0,12"
                        IsVisible="{OnIdiom 'True',
                                            Phone='False'}"
                        Spacing="9">
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnPhone_Tapped" />
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label
                            AutomationId="autoimgSyncNow"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconPhone}"
                            VerticalOptions="Center" />
                        <Label
                            Margin="1,0,0,0"
                            AutomationId="autolblSystemOnline"
                            Style="{DynamicResource MenuLabelStyle}"
                            Text="{x:Static res:AppResources.ScanText}"
                            VerticalOptions="Center" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="{DynamicResource ClrAccLightBlue}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                    </HorizontalStackLayout>
                    <HorizontalStackLayout Padding="14,12,0,12" Spacing="9">
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding SyncNowCommand}" />
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label
                            AutomationId="autoimgSyncNow"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconSync}"
                            VerticalOptions="Center" />
                        <Label
                            Margin="1,0,0,0"
                            AutomationId="autolblSyncUpToDate"
                            Style="{StaticResource MenuLabelStyle}"
                            Text="{x:Static res:AppResources.MenuSync}"
                            VerticalOptions="Center" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="{DynamicResource ClrAccLightBlue}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                    </HorizontalStackLayout>
                    <HorizontalStackLayout Padding="14,12,0,12" Spacing="9">
                        <HorizontalStackLayout.GestureRecognizers>
                            <TapGestureRecognizer />
                        </HorizontalStackLayout.GestureRecognizers>
                        <Label
                            AutomationId="autoimgOnline"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconCloud}"
                            VerticalOptions="Center">
                            <Label.Triggers>
                                <DataTrigger
                                    Binding="{Binding Source={x:Static tcoApp:App.Instance}, Path=ConnectivityText}"
                                    TargetType="Label"
                                    Value="{x:Static res:AppResources.SystemOffline}">
                                    <Setter Property="Text" Value="{x:Static ext:IconFont.IconCloud_off}" />
                                </DataTrigger>
                            </Label.Triggers>
                        </Label>
                        <Label
                            Margin="1,0,0,0"
                            AutomationId="autolblSystemOnline"
                            Style="{DynamicResource MenuLabelStyle}"
                            Text="{Binding Source={x:Static tcoApp:App.Instance}, Path=ConnectivityText}"
                            VerticalOptions="Center" />
                    </HorizontalStackLayout>
                </StackLayout>
                <Grid Grid.Row="3" ColumnDefinitions="Auto,*">
                    <Label
                        x:Name="versionLbl"
                        Padding="3,0,0,0"
                        HorizontalOptions="StartAndExpand"
                        IsVisible="{OnIdiom 'True',
                                            Phone='False'}"
                        Style="{DynamicResource MenuLabelStyle}"
                        Text="{Binding AppVersion}"
                        VerticalTextAlignment="Start">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding VersionCommand}" />
                        </Label.GestureRecognizers>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Property="TextColor" Value="{DynamicResource ClrAccLightBlue}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Property="TextColor" Value="{DynamicResource ClrWhite}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                    </Label>
                    <cv:PointerOverStackLayout
                        x:Name="infoStack"
                        Grid.Column="1"
                        HorizontalOptions="CenterAndExpand"
                        Orientation="Horizontal"
                        Spacing="9">
                        <Label
                            x:Name="versionString"
                            Margin="0,3,0,0"
                            Style="{DynamicResource MenuLabelStyle}"
                            Text="{Binding AppVersion}"
                            VerticalTextAlignment="Start" />
                        <Label
                            x:Name="infoIcon"
                            Style="{DynamicResource MenuFontIconLabelStyle}"
                            Text="{x:Static ext:IconFont.IconInformationOutline}" />
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding VersionCommand}" />
                        </StackLayout.GestureRecognizers>
                        <cv:PointerOverStackLayout.Triggers>
                            <DataTrigger
                                Binding="{Binding Source={x:Reference infoStack}, Path=IsPointerOver}"
                                TargetType="cv:PointerOverStackLayout"
                                Value="true">
                                <Setter TargetName="versionString" Property="Label.TextColor" Value="{DynamicResource ClrAccLightBlue}" />
                                <Setter TargetName="infoIcon" Property="Label.TextColor" Value="{DynamicResource ClrAccLightBlue}" />
                            </DataTrigger>
                        </cv:PointerOverStackLayout.Triggers>
                    </cv:PointerOverStackLayout>
                </Grid>
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnTab_Tapped" />
                </Grid.GestureRecognizers>
            </Grid>
        </ContentPage>
    </FlyoutPage.Flyout>
</FlyoutPage>

Untitled

Hope this will help.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-24T07:13:05.2333333+00:00

From the screenshot, it looks like you set NavigationView PaneDisplayMode="LeftCompact", do you use handler and find the NavigationView?

Vaibhav Methuku 60

Here's the piece of code..

	public RootPage()
	{

		InitializeComponent();
        ModifyFlyout();
		App.RootPage = this;
	}
	
    public void ModifyFlyout()
    {
        Microsoft.Maui.Handlers.FlyoutViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if WINDOWS
            handler.PlatformView.GotFocus += (s, e) =>
            {
                handler.PlatformView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftCompact;
                handler.PlatformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0, 0, 0, 0);
				handler.PlatformView.CornerRadius = new Microsoft.UI.Xaml.CornerRadius(0,0,0,0);
				handler.PlatformView.IsTitleBarAutoPaddingEnabled = false;
			
            };
#endif
        });
    }

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-25T06:33:47.81+00:00

There are not any public properties or methods to change the position of the flyout icon on the FlyoutPage. The only way is to customize FlyoutViewHandlerand the RootNavigationView, then find the specific Icon view in the Windows UI rendering and modify those position.

But there's no guarantees that won't be changed later on, because it's not something that's technically delayed publicly accessible by the Maui API designers.
Vaibhav Methuku 60 Reputation points

2024-04-25T07:28:55.6633333+00:00

I just want remove the hamburger menu icon from that place. Do we need to write handler for that.?

1 answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,421 Reputation points Microsoft Vendor

2024-04-26T09:19:23.2266667+00:00
Hello,

I just want remove the hamburger menu icon from that place. Do we need to write handler for that.?

No, please set the IsPaneToggleButtonVisible property for the platformview and refer to the following code:

The RootPage and the ModifyFlyout method:

public RootPage() { InitializeComponent(); ModifyFlyout(); App.RootPage = this; } public void ModifyFlyout() { Microsoft.Maui.Handlers.FlyoutViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) => { #if WINDOWS handler.PlatformView.GotFocus += (s, e) => { ... handler.PlatformView.IsPaneToggleButtonVisible = false; }; #endif }); }

Best Regards,

Wenyan Zhang

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.

0 comments No comments
Sign in to comment