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

Vaibhav Methuku 60 Reputation points
2024-04-19T05:22:22.3566667+00:00

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
        });
    }

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,959 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,946 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.

    0 comments No comments