CODEWITHSUNDEEP
maui
Alex Wright
Alex Wright

Reputation: 627

How to change position of the app title in .NET MAUI?

I want to change the position of title to the middle or right side of the screen. I used the following code:

<Shell
    x:Class="CostManagement.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:CostManagement"
    Shell.FlyoutBehavior="Disabled"
    FlowDirection="RightToLeft">

    <ShellContent
        Title="Main Page"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

How can I change its position?

Upvotes: 1

Views: 1678

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10098

This can be customized by setting the Shell.FlyoutContent and use the CollectionView to define the appearance of the menu item like the title as you said. You can refer to the code sample below:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="CostManagement.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:CostManagement"
    FlyoutBackgroundColor="LightGray"
    FlyoutBehavior="Flyout"
    FlyoutWidth="400"
    FlyoutHeight="400">



   <Shell.FlyoutContent>
        <CollectionView BindingContext="{x:Reference shell}" ItemsSource="{Binding FlyoutItems}" IsGrouped="True">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid ColumnDefinitions="40,*" Padding="10">
                        <Image Source="{Binding Icon}"></Image>
                        <Label Grid.Column="1" Text="{Binding Title}"  TextColor="Black"></Label>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Shell.FlyoutContent>



</Shell>

Upvotes: 1

Related Questions