CODEWITHSUNDEEP
xamlxamarin.formsxamarin.forms.shell
George M Ceaser Jr
George M Ceaser Jr

Reputation: 1781

How to change the width / height of Shell Flyout menu

I am using a Shell Flyoutmenu in my Xamarin Forms application. Thing are fine except that my options in the menu are very short and the tray goes very wide and long. Is there a way to change the width and height of the FlyoutMenu? I tried adding a WidthRequest to the shell object itself to adjust the width but it did not seem to make a difference. Here is what my flyout currently looks like.

Screen Shot

Here is the AppShell.xaml file contents

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:views="clr-namespace:UniversalCheckInApp.Views"
   x:Class="UniversalCheckInApp.AppShell"
   BackgroundColor="#1E1F26" 
   FlyoutBackgroundColor="#D0E1F9">

<Shell.FlyoutHeader>
    <StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4">
        <Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
               VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" />
    </StackLayout>
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
    <DataTemplate>
        <StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" >
            <Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
                   HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
                   TextDecorations="Underline"/>
        </StackLayout>
    </DataTemplate>
</Shell.ItemTemplate>

<FlyoutItem Title="Configuration" >

    <ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration"  >
        <views:NetworkConfiguration />
    </ShellContent>

    <ShellContent x:Name="scDataConfiguration" Title="Data Configuration">
        <views:FormFieldConfiguration />
    </ShellContent>
</FlyoutItem>

<FlyoutItem Title="Collect Data">
    <ShellContent x:Name="scCollectData" Title="Collect Data">
        <views:DataCollection />
    </ShellContent>
</FlyoutItem>


<FlyoutItem Title="About">
    <ShellContent x:Name="scAbout" Title="About">
        <views:About />
    </ShellContent>
</FlyoutItem>

Upvotes: 2

Views: 4537

Answers (3)

MoonenM
MoonenM

Reputation: 36

You can use FlyoutWidth as a property of the shell.

<Shell
    x:Class="Example.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    FlyoutBehavior="Locked"
    FlyoutWidth="200"

    <ShellContent Title="Home" 
                    ContentTemplate="{DataTemplate views:MainPage}"/>

</Shell>

Upvotes: 0

Cfun
Cfun

Reputation: 9691

On Xamarin.Forms 5.0.0.1829-pre6 the two attached properties Shell.FlyoutWidth and Shell.FlyoutHeight of type double have been added allowing to set the width and height of the Shell flyout.

Upvotes: 2

George M Ceaser Jr
George M Ceaser Jr

Reputation: 1781

So according to the comment from Elvis Xia at MSFT - this is not possible. I have abandoned the use of the Shell Flyout menu in my app so I did not open an issue with MSFT as Elvis suggested. If this is important to other people, I suggest you raise the issue with MSFT so the feature can be included in a future release.

Upvotes: 1

Related Questions