CODEWITHSUNDEEP
xamarinxamarin.formsmenuflyoutxamarin.shell
Sev
Sev

Reputation: 912

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

Upvotes: -1

Views: 410

Answers (1)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

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

Upvotes: 2

Related Questions