Skip to content

Commit 7c6593c

Browse files
Gowtham-SF4769Gowtham-SF4769
committed
MAUI-978225-[others][maui]: updated README file.
1 parent 3311e8c commit 7c6593c

File tree

1 file changed

+81
-1
lines changed

1 file changed

+81
-1
lines changed

‎README.md‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,81 @@
1-
**[View document in Syncfusion Xamarin Knowledge base](https://www.syncfusion.com/kb/12180/how-to-bind-itemsource-using-reactive-mvvm-in-xamarin-forms-accordion-sfaccordion)**
1+
## binding-reactive-mvvm-accordion-xamarin
2+
3+
This sample demonstrates how to bind item sources using Reactive MVVM with Syncfusion's SfAccordion control in a Xamarin.Forms project. The sample wires a ReactiveUI view model into a XAML page that hosts an `SfAccordion` where each `AccordionItem` shows a grouped list using `SfListView`.
4+
5+
To learn more about SfAccordion, check out the official user guide topics:
6+
7+
- [Getting Started with Xamarin Accordion (SfAccordion)](https://help.syncfusion.com/xamarin/accordion/getting-started)
8+
9+
**KB Link:** **[View document in Syncfusion Xamarin Knowledge base](https://www.syncfusion.com/kb/12180/how-to-bind-itemsource-using-reactive-mvvm-in-xamarin-forms-accordion-sfaccordion)**
10+
11+
## Overview
12+
13+
In this example:
14+
15+
- The page is a `ReactiveContentPage<TViewModel>` from ReactiveUI.XamForms and receives its `ViewModel` via constructor injection.
16+
- The `SfAccordion` control is bound to a collection (`Contacts`) on the view model using `BindableLayout.ItemsSource`.
17+
- Each accordion item contains a header and a content area. The content area uses `Syncfusion.ListView` (`SfListView`) to render child contacts. The `TapGestureRecognizer` on each child forwards taps to a command on the page's binding context.
18+
19+
## XAML
20+
```
21+
<syncfusion:SfAccordion x:Name="Accordion" BindableLayout.ItemsSource="{Binding Contacts}" ExpandMode="SingleOrNone" >
22+
<BindableLayout.ItemTemplate>
23+
<DataTemplate>
24+
<syncfusion:AccordionItem >
25+
<syncfusion:AccordionItem.Header >
26+
<Grid HeightRequest="60">
27+
<Label Text="{Binding Type}" BackgroundColor="Aqua" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
28+
</Grid>
29+
</syncfusion:AccordionItem.Header>
30+
<syncfusion:AccordionItem.Content>
31+
<Grid x:Name="mainGrid" Padding="4" HeightRequest="135" >
32+
<sflistview:SfListView AllowGroupExpandCollapse="True" IsScrollingEnabled="False" x:Name="listView" IsScrollBarVisible="False" AutoFitMode="DynamicHeight"
33+
ItemSpacing="3" ItemsSource="{Binding Contacts}" >
34+
<sflistview:SfListView.ItemTemplate>
35+
<DataTemplate>
36+
<Grid HeightRequest="60" Padding="1" >
37+
<Label Text="{Binding ContactName}" BackgroundColor="LightBlue"/>
38+
<Grid.GestureRecognizers>
39+
<TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Accordion}}" CommandParameter="{Binding .}" />
40+
</Grid.GestureRecognizers>
41+
</Grid>
42+
</DataTemplate>
43+
</sflistview:SfListView.ItemTemplate>
44+
</sflistview:SfListView>
45+
</Grid>
46+
</syncfusion:AccordionItem.Content>
47+
</syncfusion:AccordionItem>
48+
</DataTemplate>
49+
</BindableLayout.ItemTemplate>
50+
</syncfusion:SfAccordion>
51+
```
52+
53+
## C#
54+
```
55+
public partial class MainPage : ReactiveContentPage<ViewModel>
56+
{
57+
public MainPage(ViewModel viewModel)
58+
{
59+
ViewModel = viewModel;
60+
InitializeComponent();
61+
}
62+
}
63+
```
64+
65+
## How it works
66+
67+
- ReactiveUI integration: The view inherits from `ReactiveContentPage<T>` so it can access reactive bindings and commands easily.
68+
- Accordion binding: `BindableLayout.ItemsSource` binds the `Contacts` collection on the view model to create one `AccordionItem` per group.
69+
- Nested list: Each accordion item content contains an `SfListView` bound to the group's `Contacts` collection to display members.
70+
- Commands: The child list item uses a `TapGestureRecognizer` that targets `TapCommand` on the `Accordion` page's `BindingContext` so tapping an item raises a view-model command with the tapped item as parameter.
71+
72+
##### Conclusion
73+
I hope you enjoyed learning about how to bind ItemSource using Reactive MVVM in Xamarin.Forms Accordion (SfAccordion)
74+
75+
You can refer to our [Xamarin.Forms Accordion feature tour](https://www.syncfusion.com/xamarin-ui-controls/xamarin-accordion) page to know about its other groundbreaking feature representations and [documentation](https://help.syncfusion.com/xamarin/accordion/getting-started), and how to quickly get started for configuration specifications. You can also explore our [Xamarin.Forms Accordion example](https://www.syncfusion.com/demos/xamarin) to understand how to create and manipulate data.
76+
77+
For current customers, you can check out our Document Processing Libraries from the [License and Downloads](https://www.syncfusion.com/account/login) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our controls.
78+
79+
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!
80+
81+

0 commit comments

Comments
 (0)