Skip to content

Commit 1b8dfe0

Browse files
Gowtham-SF4769Gowtham-SF4769
committed
MAUI-978225-[others][maui]: updated README file.
1 parent 8860e7d commit 1b8dfe0

File tree

1 file changed

+108
-1
lines changed

1 file changed

+108
-1
lines changed

‎README.md‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,109 @@
11
# create-application-using-flyout-page-with-.net-maui-expander
2-
This example demonstrates about how to create the application using FlyoutPage with .NET MAUI Expander (SfExpander).
2+
3+
This sample demonstrates how to build a MAUI application that uses a FlyoutPage together with the Syncfusion Expander control (SfExpander) to create a collapsible menu inside the Flyout.
4+
5+
The project shows a typical master-detail layout where the Flyout (menu) is implemented as a ContentPage containing multiple `SfExpander` controls. Each expander has a Header (icon + text) and a Content section with menu items. The Detail is a simple content page wrapped in a `NavigationPage` so the app can navigate between pages while keeping the Flyout available.
6+
7+
To learn more about `SfExpander`, check out the official user guide topics:
8+
9+
- Syncfusion Expander UG: [Getting Started with Xamarin Expander (SfExpander)](https://help.syncfusion.com/xamarin/expander/getting-started
10+
)
11+
## Overview
12+
13+
Key points covered by this sample:
14+
15+
- How to wire up a `FlyoutPage` with a custom Flyout view (`ExpanderFlyoutMaster`) and a Detail page (`ExpanderFlyoutDetail`).
16+
- How to use `Syncfusion.Maui.Expander.SfExpander` to provide collapsible groups inside the Flyout.
17+
- Basic layout techniques using `Grid`, `StackLayout`, and `ScrollView` to create a responsive menu.
18+
- An example `NavigationPage` usage to host the Detail content.
19+
20+
21+
## XAML snippets (from the sample)
22+
23+
ExpanderFlyoutPage.xaml:
24+
25+
```
26+
<FlyoutPage.Flyout>
27+
<pages:ExpanderFlyoutMaster/>
28+
</FlyoutPage.Flyout>
29+
<FlyoutPage.Detail>
30+
<NavigationPage>
31+
<x:Arguments>
32+
<pages:ExpanderFlyoutDetail/>
33+
</x:Arguments>
34+
</NavigationPage>
35+
</FlyoutPage.Detail>
36+
```
37+
38+
ExpanderFlyoutDetail.xaml:
39+
40+
```
41+
<StackLayout Padding="10">
42+
<Label Text="This is a detail page."/>
43+
</StackLayout>
44+
```
45+
46+
ExpanderFlyoutMaster.xaml (menu with multiple expanders):
47+
48+
```
49+
<Grid>
50+
<Grid.RowDefinitions>
51+
<RowDefinition Height="150"/>
52+
<RowDefinition Height="*"/>
53+
</Grid.RowDefinitions>
54+
<Grid BackgroundColor="#f54291" HeightRequest="150" Padding="20" Grid.Row="0">
55+
<Grid.ColumnDefinitions>
56+
<ColumnDefinition Width="70"/>
57+
<ColumnDefinition Width="*"/>
58+
</Grid.ColumnDefinitions>
59+
<Image Source="userimage.png" HeightRequest="70" WidthRequest="70" Margin="10,10,10,10"/>
60+
<Label Text="John" Grid.Column="1" FontSize="Large" VerticalOptions="Center" HorizontalOptions="Start" Padding="20"/>
61+
</Grid>
62+
<ScrollView BackgroundColor="#EDF2F5" VerticalScrollBarVisibility="Always" Grid.Row="1">
63+
<StackLayout>
64+
<syncfusion:SfExpander HeaderIconPosition="End">
65+
<syncfusion:SfExpander.Header>
66+
<Grid HeightRequest="50">
67+
<Grid.ColumnDefinitions>
68+
<ColumnDefinition Width="50"/>
69+
<ColumnDefinition Width="*"/>
70+
</Grid.ColumnDefinitions>
71+
<Image Source="home.png" HeightRequest="25" WidthRequest="25" HorizontalOptions="Center" VerticalOptions="Center"/>
72+
<Label Text="Home" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" />
73+
</Grid>
74+
</syncfusion:SfExpander.Header>
75+
76+
<syncfusion:SfExpander.Content>
77+
<StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF">
78+
<Label HeightRequest="50" Text="Tasks" TextColor="#303030" VerticalTextAlignment="Center" />
79+
<Label HeightRequest="50" Text="Settings" TextColor="#303030" VerticalTextAlignment="Center" />
80+
</StackLayout>
81+
</syncfusion:SfExpander.Content>
82+
</syncfusion:SfExpander>
83+
84+
<!-- Additional expanders omitted for brevity -->
85+
</StackLayout>
86+
</ScrollView>
87+
</Grid>
88+
```
89+
90+
## How it works
91+
92+
1. The `FlyoutPage` composes two areas: `Flyout` and `Detail`. The Flyout hosts `ExpanderFlyoutMaster`, which contains the menu UI. The Detail is a `NavigationPage` that initially navigates to `ExpanderFlyoutDetail`.
93+
94+
2. Each `SfExpander` has a `Header` and `Content`. The Header typically contains an icon and a label laid out with a `Grid`. Tapping the header expands or collapses the content area showing menu items.
95+
96+
3. Wrapping the menu items in a `ScrollView` ensures the menu is scrollable on smaller devices.
97+
98+
4. The sample uses simple Label elements as menu entries. In a production app you would attach tap gestures, commands, or use Buttons to trigger navigation.
99+
100+
101+
## Conclusion
102+
103+
I hope you enjoyed learning about how to create the application using FlyoutPage with .NET MAUI Expander (SfExpander).
104+
105+
You can refer to our [Xamarin.Forms Expander feature tour page](https://www.syncfusion.com/xamarin-ui-controls/xamarin-expander) to know about its other groundbreaking feature representations and [documentation](https://help.syncfusion.com/xamarin/expander/getting-started), and how to quickly get started for configuration specifications.
106+
107+
For current customers, you can check out our components from the [License and Downloads](https://www.syncfusion.com/sales/ui-component-suite) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our other controls.
108+
109+
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums/) or [Direct-Trac](https://support.syncfusion.com/create). We are always happy to assist you!

0 commit comments

Comments
 (0)