xamarinxamarin.formsmenuflyoutxamarin.shell

Xamarin Forms Shell Flyout with multiple columns


I have a business requirement to build a flyout menu with multiple columns. The menu will have all the basic flyout behaviors bit it has to have a narrow static column on the left side with 3 buttons in it and then have the regular scrollable flyout menu next to it. Is it possible at this time to do a completely custom layout within xamarin forms shell for the flyout?

enter image description here


Solution

  • You could use the FlyoutContentTemplate to do that.

     <Shell.FlyoutContentTemplate>
        <DataTemplate>
           
            <StackLayout Orientation="Horizontal">
                <StackLayout BackgroundColor="Purple">
                    <Button Text="home" />
                    <Button Text="dash" />
                    <Button Text="chat" />
                </StackLayout>
                <CollectionView
                    BindingContext="{x:Reference shell}"
                    IsGrouped="True"
                    ItemsSource="{Binding FlyoutItems}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Label
                                FontSize="Large"
                                Text="{Binding Title}"
                                TextColor="Black" />
    
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
    
            </StackLayout>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>
    

    enter image description here