You can bind the Command to content of AccordionItem in .NET MAUI SfAccordion. C# public class ItemInfoRepository { public Command<object> ShowDetailsCommand { get; set; } public ItemInfoRepository() { ShowDetailsCommand = new Command<object>(OnShowDetailClicked); } private void OnShowDetailClicked(object obj) { var item = obj as ItemInfo; App.Current!.MainPage!.DisplayAlert(item!.Name, item.Description, "Ok"); } } XAML Binding the ViewModel Command to the ImageButton that is loaded inside the Content of AccordionItem. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:accordion="clr-namespace:Syncfusion.Maui.Accordion;assembly=Syncfusion.Maui.Expander" xmlns:local="clr-namespace:Accordion" x:Class="Accordion.MainPage"> <ContentPage.BindingContext> <local:ItemInfoRepository x:Name="viewModel"/> </ContentPage.BindingContext> <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem> <accordion:AccordionItem.Header> <Grid Padding="5,0,0,0" HeightRequest="50"> <Label Text="{Binding Name}" FontSize="20" /> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#C0C0C0" Padding="5,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="45" /> </Grid.ColumnDefinitions> <Label Text="{Binding Description}" VerticalOptions="Center"/> <Grid Grid.Column="1" Padding="10" BackgroundColor="#C0C0C0"> <ImageButton BackgroundColor="{OnPlatform WinUI=#C0C0C0}" HeightRequest="30" WidthRequest="30" Source="Details.png" Command="{Binding Path=BindingContext.ShowDetailsCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}"/> </Grid> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> </ContentPage> View sample in GitHub Conclusion I hope you enjoyed learning about how to bind command in .NET MAUI Accordion. You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
You can get the index of AccordionItem when expanding in .NET MAUI SfAccordion. You can get the index from the ExpandingAndCollapsingEventArgs of the Expanding event. public class BehaviorExt : Behavior<SfAccordion> { SfAccordion Accordion; protected override void OnAttachedTo(SfAccordion bindable) { Accordion = bindable; Accordion.Expanding += Accordion_Expanding; base.OnAttachedTo(bindable); } private void Accordion_Expanding(object sender, ExpandingAndCollapsingEventArgs e) { App.Current.MainPage.DisplayAlert("", "AccordionItem expanded at index " + e.Index, "Ok"); } } View sample in GitHub Conclusion I hope you enjoyed learning about how to retrieve the expanding accordion item index in SfAccordion in .NET MAUI . You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
You can show or hide the AccordionItem in MAUI Accordion by adding or removing the data from ViewModel bound collection dynamically. public class BehaviorExt: Behavior<ContentPage> { Contact? deletedItem = null; SfAccordion? accordion; Button? button; protected override void OnAttachedTo(ContentPage bindable) { base.OnAttachedTo(bindable); accordion = bindable.FindByName<SfAccordion>("Accordion"); button= bindable.FindByName<Button>("HideOrShow"); button.Clicked += OnHideOrShow; } private void OnHideOrShow(object? sender, EventArgs e) { var items = (sender as Button)!.BindingContext as ContactViewModel; if (deletedItem == null) { deletedItem = items!.ContactsInfo![2]; items.ContactsInfo.RemoveAt(2); } else { items!.ContactsInfo!.Insert(2, deletedItem); deletedItem = null; } } } Output View sample in GitHub Conclusion I hope you enjoyed learning how to show or hide Accordion Item in .NET MAUI. You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
You can perform swiping action on the AccordionItem by integrating the .NET MAUI SwipeView in .NET MAUI Accordion. Define the SwipeView in the AccordionItem.Header and AccordionItem.Content and bind the Command to the SwipeItem. <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem HeaderBackground="{Binding HeaderColor}"> <accordion:AccordionItem.Header> <SwipeView BackgroundColor="Transparent"> <SwipeView.LeftItems> <SwipeItems> <SwipeItem Text="Favourite" BackgroundColor="#98acf8" Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}"/> </SwipeItems> </SwipeView.LeftItems> <Grid> <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </SwipeView> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> Change the BackgroundColor of the Header in the command execution handler. public class ItemInfoRepository { public Command<object> FavouriteCommand { get; set; } public ItemInfoRepository() { FavouriteCommand = new Command<object>(OnFavouriteClicked); } private void OnFavouriteClicked(object obj) { (obj as ItemInfo).HeaderColor = (obj as ItemInfo).HeaderColor == Color.Transparent ? Color.FromHex("#cee397") : Color.Transparent; } } Output View sample in GitHub Conclusion I hope you enjoyed learning about how perform swiping functionality in .NET MAUI Accordion. You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
In .NET MAUI Accordion, you can customize the ripple effects applied when tapping the header , by modifying the theme key resources for the Accordion. XAML In below code snippet that demonstrates how to set the ripple background to transparent within your XAML file. <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Accordion;assembly=Syncfusion.Maui.Expander" xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core" x:Class="AccordionMAUI.MainPage"> <ContentPage.Resources> <syncTheme:SyncfusionThemeDictionary> <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> <ResourceDictionary> <x:String x:Key="SfAccordionTheme">CustomTheme</x:String> <Color x:Key="SfAccordionHeaderRippleBackground">Transparent</Color> </ResourceDictionary> </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> </syncTheme:SyncfusionThemeDictionary> </ContentPage.Resources> View Sample in GitHub Conclusion: I hope you enjoyed learning about how to disable the ripple effect in header of .NET MAUI Accordion. You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI Accordion (SfAccordion) allows you to display the WebView in Accordion by setting the WebView height in .NET MAUI <syncfusion:SfAccordion ExpandMode="SingleOrNone"> <syncfusion:SfAccordion.Items> <syncfusion:AccordionItem> <syncfusion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text=".NET MAUI" Margin="5" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <WebView HeightRequest="250" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="https://dotnet.microsoft.com/en-us/apps/maui" /> </StackLayout> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> <syncfusion:AccordionItem> <syncfusion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text="Syncfusion" Margin="5" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <WebView HeightRequest="400" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="https://www.syncfusion.com/" /> </StackLayout> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> <syncfusion:AccordionItem> <syncfusion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text="Accordion" Margin="5" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <WebView HeightRequest="400" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="https://help.syncfusion.com/maui/accordion/getting-started" /> </StackLayout> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> </syncfusion:SfAccordion.Items> </syncfusion:SfAccordion> View sample in GitHub Output Conclusion I hope you enjoyed learning about how to use WebView in SfAccordion in .NET MAUI . You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
Expanding or collapsing items in a .NET MAUI SfAccordion can be achieved programmatically by binding a model property to the AccordionItem.IsExpanded property. This allows for dynamic control of the accordion’s state within your application. IsExpanded model property is bound to IsExpanded property of AccordionItem to expand or collapse when update property value programmatically. XAML <DataTemplate> <syncfusion:AccordionItem IsExpanded="{Binding IsExpand}"> <syncfusion:AccordionItem.Header> <Grid HeightRequest="60"> <Label Text="{Binding Name}" FontSize="Medium"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <Grid> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="50"/> </Grid.RowDefinitions> <Label Text="{Binding Description}"/> <Button x:Name="btn" Grid.Row="1" Text="{Binding Name}" Command="{Binding Path=BindingContext.ButtonCommand, Source={x:Reference Accordion}}" CommandParameter="{x:Reference btn}"/> </Grid> </Grid> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> </DataTemplate> Implementing the Command to Toggle Expansion In your view model or code-behind, implement a command that toggles the IsExpand property of your model. This command can be bound to a button or invoked from other event handlers. C# public class ItemInfoRepository { public Command<object> ExpandCollapse { get; set; } public ItemInfoRepository() { ExpandCollapse = new Command<object>(OnExpandCollapse); } private void OnExpandCollapse(object obj) { var item = (obj as Button).BindingContext as ItemInfo; item.IsExpand = !item.IsExpand; } } View Sample in Github Conclusion I hope you enjoyed learning about how to expand or collapse programatically in .NET MAUI Accordion. You can refer to our .NET MAUI SfAccordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. 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, Direct-Trac, or feedback portal. We are always happy to assist you!
A quick start project that helps you to create an Angular 7 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 7+ TypeScript 2.6+ Angular 7 Accordion – Introduction The Angular 7 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 7 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@7.0.5 Note:If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 7 Accordion You can add the Angular 7 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. There are more options to explore with Angular 7 Accordion.
A quick start project that helps you to create an Angular 6 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 6+ TypeScript 2.6+ Angular 6 Accordion – Introduction The Angular 6 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 6 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@6.2.7 Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 6 Accordion You can add the Angular 6 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. There are more options to explore with Angular 6 Accordion.
A quick start project that helps you to create an Angular 5 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 5+ TypeScript 2.6+ Angular 5 Accordion – Introduction The Angular 5 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 5 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@1.5.6 Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 5 Accordion You can add the Angular 5 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. There are more options to explore with Angular 5 Accordion.
Our Angular Accordion component allows you render structural directives using structural directives in your application like regular Angular components. This section explains how to use them to render this Accordion in your project. <ng-template> Accordion is provided with the <ng-template> support for both its header and content properties. You can use this ng-template to render both these properties. You can also render another component in the Accordion control. <ejs-accordion> <e-accordionitems> <e-accordionitem expanded="true"> <ng-template #header> <div>Calender</div> </ng-template> <ng-template #content> <div> <ejs-calendar></ejs-calendar> </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>DatePicker</div> </ng-template> <ng-template #content> <div> <ejs-datepicker></ejs-datepicker> </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>DateTimePicker</div> </ng-template> <ng-template #content> <div> <ejs-datetimepicker></ejs-datetimepicker> </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the demo sample. <ng-for> The ng-for is like for loop; it is used to iterate the element. You can use the ng-for conditional structural directive in our Accordion as demonstrated in the following code. <ejs-accordion expandMode="Single"> <e-accordionitems> <e-accordionitem *ngFor="let item of serviceList;"> <ng-template #header> <div id="header">{{item.name}}</div> </ng-template> <ng-template #content> <li *ngFor="let sub of item.subdata">{{sub.name}}</li> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the sample. <ng-if> The ng-if is the simplest structural directive; it takes Boolean values to make the element appear or disappear in DOM. This is also supported in our Angular Accordion directive and item directives. <ejs-accordion expandMode="Single"> <e-accordionitems> <e-accordionitem *ngFor="let item of serviceList;"> <ng-template #header [ngIf]="item.render"> <div id="header">{{item.name}}</div> </ng-template> <ng-template #content [ngIf]="item.render"> <li *ngFor="let sub of item.subdata">{{sub.name}}</li> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the sample. You can use the above all directives (<ng-if>, <ng-for>, and <ng-template>) to render the Accordion control. In this following sample, the Accordion items are iterated using the <ng-for> directive, and the item is checked using <ng-if>. Finally, the data is shown using <ng-template>. <ejs-accordion expandMode="Single"> <e-accordionitems> <e-accordionitem *ngFor="let item of serviceList;"> <ng-template #header> <div id="header">{{item.name}}</div> </ng-template> <ng-template #content [ngIf]="item.render"> <li *ngFor="let sub of item.subdata">{{sub.name}}</li> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the sample.
A quick start project that helps you to create an Angular 8 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 8+ TypeScript 3.4+ Angular 8 Accordion – Introduction The Angular 8 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 8 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@8.1.1 Note:If you would like to follow and run the application in Angular 5 or Angular 6 or Angular 7, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 8 Accordion You can add the Angular 8 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 4 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 4+ TypeScript 2.6+ Angular 4 Accordion – Introduction The Angular 4 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 4 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@1.4 Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 4 Accordion You can add the Angular 4 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. There are more options to explore with Angular 4 Accordion.
A quick start project that helps you to create an Angular 9 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 9+ TypeScript 3.7+ Angular 9 Accordion – Introduction The Angular 9 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 9 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 6 or Angular 7 or Angular 8, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 9 Accordion You can add the Angular 9 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ Declarations: [AppComponent], imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
You can load the SfAccordion to the SfNavigationDrawer in Xamarin.Forms Accordion XAML Load the SfAccordion into the SfNavigationDrawer.DrawerContentView and bind the ViewModel property to the SfNavigationDrawer.IsOpen property to open the drawer. Add hamburger icon to the Image with Image.GestureRecognizer and bind the ViewModel command to the TapGestureRecognizer.Command to toggle the drawer. <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" IsOpen="{Binding IsDrawerOpen, Mode=TwoWay}" DrawerHeaderHeight="160" DrawerFooterHeight="0" > <navigationdrawer:SfNavigationDrawer.ContentView> <Grid x:Name="mainContentView" BackgroundColor="White"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition/> </Grid.RowDefinitions> <Grid BackgroundColor="#e8e8e8" > <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image x:Name="hamburgerButton" Source="hamburger.png" HeightRequest="50" WidthRequest="40" Margin="5,0,0,0" HorizontalOptions="Start"> <Image.GestureRecognizers> <TapGestureRecognizer Command="{Binding ToggleDrawerCommand}"/> </Image.GestureRecognizers> </Image> <Label x:Name="headerLabel" Grid.Column="1" HeightRequest="50" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="#385170" /> </Grid> <Label Grid.Row="1" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center" Text="Content View" FontSize="14"/> </Grid> </navigationdrawer:SfNavigationDrawer.ContentView> <navigationdrawer:SfNavigationDrawer.DrawerHeaderView> <Grid BackgroundColor="Black"> <Image Source="Burger.jpg" HeightRequest="110" Margin="0,10,0,0" VerticalOptions="Center" HorizontalOptions="Center" Aspect="AspectFill"/> </Grid> </navigationdrawer:SfNavigationDrawer.DrawerHeaderView> <navigationdrawer:SfNavigationDrawer.DrawerContentView> <ContentView BackgroundColor="#323f4c"> <ContentView.Content> <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone" HeaderIconPosition="End"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem HeaderBackgroundColor="#1f2933" IconColor="#cbd2d9"> <accordion:AccordionItem.Header> <Grid> <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand" HeightRequest="50" TextColor="#cbd2d9" VerticalTextAlignment="Center"/> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid Padding="5,0,0,0" BackgroundColor="#3e4c59"> <Label Text="{Binding Description}" TextColor="#cbd2d9" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> </ContentView.Content> </ContentView> </navigationdrawer:SfNavigationDrawer.DrawerContentView> </navigationdrawer:SfNavigationDrawer> C# Change the IsOpen value in the command execution method to true. public class ItemInfoRepository : INotifyPropertyChanged { private bool isDrawerOpen; public Command ToggleDrawerCommand { get; set; } public bool IsDrawerOpen { get { return isDrawerOpen; } set { isDrawerOpen = value; this.OnPropertyChanged("IsDrawerOpen"); } } public ItemInfoRepository() { ToggleDrawerCommand = new Command(OpenDrawer); } private void OpenDrawer(object obj) { IsDrawerOpen = true; } } View sample in GitHub Conclusion I hope you enjoyed learning about how to use SfAccordion in SfNavigationDrawer in Xamarin.Forms.You can refer to our Xamarin.Forms Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin.Forms Accordion example to understand how to create and manipulate data.For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.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, Direct-trac, or feedback portal. We are always happy to assist you!
In WPF, render the SfScheduler within the SfAccordion control. XAML SfScheduler control is added in the ContentTemplate of the Accordion. <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.1*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <accordion:SfAccordion x:Name="SfAccordion" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="500" Height="500" SelectionMode="ZeroOrMore"> <accordion:SfAccordionItem Header="Header"/> <accordion:SfAccordion.HeaderTemplate> <DataTemplate> <Grid> <TextBlock Text="Click to view scheduler" Foreground="Black"/> </Grid> </DataTemplate> </accordion:SfAccordion.HeaderTemplate> <accordion:SfAccordion.ContentTemplate> <DataTemplate> <Grid> <syncfusion:SfScheduler/> </Grid> </DataTemplate> </accordion:SfAccordion.ContentTemplate> </accordion:SfAccordion> </Grid> View sample in GitHub
A quick start project that helps you to create an Angular 11 Accordion with minimal code configuration. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Node.js (latest version) Angular 11 Angular CLI Typescript 4+ Visual Studio Code for Editor Angular 11 Accordion – Introduction The Angular 11 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template. Dependencies Before starting with this project, the Angular 11 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine. npm install -g @angular/cli@11.2.3 Note:If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command `ng new` and navigate to that folder. ng new angular11-app cd angular11-app Install the ej2-angular-navigations package through the npm install command. npm install @syncfusion/ej2-angular-navigations --save Adding Angular 11 Accordion You can add the Angular 11 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. There are more options to explore with Angular 11 Accordion.
You can customize the Xamarin.Forms SfAccordion header icon based on the expanded state by using the converter. XAML Bind the IsExpanded property to show different icons for expand and collapse. Set the HeaderIconPosition to None for the AccordionItem to hide the default header icon. <syncfusion:SfAccordion Grid.Row="1" HeaderIconPosition="None"> <syncfusion:SfAccordion.Items> <syncfusion:AccordionItem x:Name="accordionItem1"> <syncfusion:AccordionItem.Header> <Grid HeightRequest="50"> <Label TextColor="#495F6E" Text="Cheese burger" VerticalTextAlignment="Center" Padding="5,0,0,0"/> <Image Margin="10" HorizontalOptions="End" Source="{Binding IsExpanded,Source={x:Reference accordionItem1},Converter={StaticResource ExpanderIconConverter}}" HeightRequest="20" WidthRequest="20"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> <Label TextColor="#303030" Text="Hamburger accompanied with melted cheese. The term itself is a portmanteau of the words cheese and hamburger. The cheese is usually sliced, then added a short time before the hamburger finishes cooking to allow it to melt." VerticalTextAlignment="Center"/> </Grid> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> </syncfusion:SfAccordion.Items> </syncfusion:SfAccordion> C# Return image based on the IsExpanded property value. public class ExpanderIconConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) return ImageSource.FromResource("AccordionXamarin.Images.ArrowDown.png"); else return ImageSource.FromResource("AccordionXamarin.Images.ArrowUp.png"); } } View sample in GitHub ConclusionI hope you enjoyed learning about how to customize the header icon in Xamarin.Froms Accordion (SfAccordion).You can refer to our Xamarin.Forms Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.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, Direct-Trac, or feedback portal. We are always happy to assist you!
You can use FontAwesome icons in Xamarin.Forms Accordion. Please follow the steps below to work with FontAwesome icons, STEP 1: Download the font icons on FontAwesome.com. You can also refer to the document here. STEP 2: Place the ttf/otf file in the shared code project and set the Build action as follows, Project Location Build action Android Assets AndroidAsset iOS Resources BundleResource UWP Assets Content In addition, add the name of the font file to the info.plist file of iOS project. <key>UIAppFonts</key> <array> <string>ExpanderIcons.ttf</string> </array> To use custom fonts in Xamarin.Forms, refer to the document here. STEP 3: Define the font as StaticResource, in the ResourceDictionary. <ContentPage.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesome"> <On Platform="Android" Value="FontAwesomeRegular.otf#Regular" /> <On Platform="iOS" Value="FontAwesome5Free-Regular" /> <On Platform="UWP" Value="/Assets/FontAwesomeRegular.otf#Font Awesome 5 Free" /> </OnPlatform> </ResourceDictionary> </ContentPage.Resources> STEP 4: Bind the FontFamily to the FontImageSource of Button.ImageSource using resource key. Also, bind the icon value to the Glyph property. You can also use Button.Command to update the icon at run time. <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone" HeaderIconPosition="Start"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem > <accordion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand" HeightRequest="50" VerticalTextAlignment="Center"/> <Button Grid.Column="1" HeightRequest="50" WidthRequest="50" Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Transparent"> <Button.ImageSource> <FontImageSource Glyph="{Binding FavouriteIcon}" FontFamily="{StaticResource FontAwesome}" Color="#ea2c62" Size="18" /> </Button.ImageSource> </Button> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> STEP 5: Change the icon in the Button execution handler. public class ItemInfoRepository { public Command<object> FavouriteCommand { get; set; } public ItemInfoRepository() { FavouriteCommand = new Command<object>(OnFavouriteClicked); } private void OnFavouriteClicked(object obj) { var item = obj as ItemInfo; item.FavouriteIcon = item.FavouriteIcon == "\uf005" ? "\uf004" : "\uf005"; } } View sample in GitHub ConclusionI hope you enjoyed learning about how to use font awesome icons in Xamarin.Forms Accordion (SfAccordion).You can refer to our Xamarin.Forms Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.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, Direct-Trac, or feedback portal. We are always happy to assist you!
The SfAccordion allows you to bind ItemSource to the reactive UI ViewModel which is a composable and cross-platform model-view-viewmodel framework for all .NET platforms. To achieve this, follow the below steps: STEP 1: Install the ReactiveUI and ReactiveUI.XamForms in your project. STEP 2: Create ViewModel which should implement ReactiveObject. public class ViewModel : ReactiveObject { private ObservableCollection<ContactInfo> contacts; #region Properties public ObservableCollection<ContactInfo> Contacts { get { return this.contacts; } set { this.RaiseAndSetIfChanged(ref contacts, value); } } public Command<object> TapCommand { get; set; } #endregion #region Constructor public ViewModel() { Contacts = new ObservableCollection<ContactInfo>(); TapCommand = new Command<object>(OnTapped); Contacts.Add(new ContactInfo() { Type = "A", Contacts = new ObservableCollection<Contact>() { new Contact() { ContactName = "Adam" }, new Contact { ContactName = "Aaron" } } }); Contacts.Add(new ContactInfo() { Type = "B", Contacts = new ObservableCollection<Contact>() { new Contact() { ContactName = "Bolt" }, new Contact { ContactName = "Bush" } } }); Contacts.Add(new ContactInfo() { Type = "C", Contacts = new ObservableCollection<Contact>() { new Contact() { ContactName = "Clark" }, new Contact { ContactName = "Clara" } } }); } #endregion #region Private Methods private void OnTapped(object obj) { var data = obj as Contact; App.Current.MainPage.DisplayAlert("Message", "Tapped Accoridon item is : " + data.ContactName, "Ok"); } #endregion } STEP 3: ContentPage should inherit from ReactiveContentPage<TViewModel> and we are going to use ReactiveUI Binding to bind our ViewModel to our View. XMAL public partial class MainPage : ReactiveContentPage<ViewModel> { public MainPage(ViewModel viewModel) { } } C# <?xml version="1.0" encoding="utf-8" ?> <rxui:ReactiveContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AccordionXamarin" xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms" xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="AccordionXamarin.MainPage" x:TypeArguments="local:ViewModel" > <ContentPage.Content> <StackLayout> <syncfusion:SfAccordion x:Name="Accordion" BindableLayout.ItemsSource="{Binding Contacts}" ExpandMode="SingleOrNone" > <BindableLayout.ItemTemplate> <DataTemplate> <syncfusion:AccordionItem > <syncfusion:AccordionItem.Header > <Grid HeightRequest="60"> <Label Text="{Binding Type}" BackgroundColor="Aqua" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <Grid x:Name="mainGrid" Padding="4" HeightRequest="135" > <sflistview:SfListView AllowGroupExpandCollapse="True" IsScrollingEnabled="False" x:Name="listView" IsScrollBarVisible="False" AutoFitMode="DynamicHeight" ItemSpacing="3" ItemsSource="{Binding Contacts}" > <sflistview:SfListView.ItemTemplate> <DataTemplate> <Grid HeightRequest="60" Padding="1" > <Label Text="{Binding ContactName}" BackgroundColor="LightBlue"/> <Grid.GestureRecognizers> <TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Accordion}}" CommandParameter="{Binding .}" /> </Grid.GestureRecognizers> </Grid> </DataTemplate> </sflistview:SfListView.ItemTemplate> </sflistview:SfListView> </Grid> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </syncfusion:SfAccordion> </StackLayout> </ContentPage.Content> </rxui:ReactiveContentPage> STEP 4: View can be connected in one-way dependent manner to the ViewModel through bindings. You can set the BindingContext for the SfAccordion in MainPage.cs itself in code behind like below. public partial class MainPage : ReactiveContentPage<ViewModel> { public MainPage(ViewModel viewModel) { ViewModel = viewModel; InitializeComponent(); } } View Sample in GitHub
You can use Nito.MVVM in Xamarin.Forms SfAccordion. Please refer to the steps below to work with Nito.MVVM, STEP 1: Install the Nito.MVVM.Async Nuget package to the shared code project. STEP 2: Define the AsyncCommand to populate the data in the ViewModel. namespace AccordionXamarin { public class ItemInfoRepository : INotifyPropertyChanged { public IAsyncCommand LoadDataCommand { get; set; } public ItemInfoRepository() { LoadDataCommand = new AsyncCommand(ExecuteLoadData); } private async Task ExecuteLoadData(object args) { ... } } } STEP 3: Populate asynchronous data for the Accordion in the LoadData method. In the command execution method, invoke the LoadData method in the NotifyTask.Create method that executes the LoadData action asynchronously. You can get the populated data from the NotifyTask.Result. If the task is completed, set the result to the collection. Invoke the PropertyChanged event to notify the collection update.namespace AccordionXamarin { public class ItemInfoRepository : INotifyPropertyChanged { public ObservableCollection<ItemInfo> Info { get; set; } private async Task ExecuteLoadData(object args) { var notifyTask = NotifyTask.Create(LoadData); if (notifyTask.IsCompleted) { Info = notifyTask.Result as ObservableCollection<ItemInfo>; OnPropertyChanged(nameof(Info)); } } private async Task<ObservableCollection<ItemInfo>> LoadData() { var info = new ObservableCollection<ItemInfo> { new ItemInfo() { Name = "Cheese burger", Description = "Hamburger accompanied with melted cheese. The term itself is a portmanteau of the words cheese and hamburger. The cheese is usually sliced, then added a short time before the hamburger finishes cooking to allow it to melt." }, ... }; return info; } } } STEP 4: Bind the ViewModel collection to the BindableLayout.ItemsSource of the Accordion. <StackLayout> <Button Text="Load Accordion" Command="{Binding LoadDataCommand}" HeightRequest="50"/> <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ExpandMode="SingleOrNone"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem> <accordion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> </StackLayout> View sample in GitHub
You can use DataTemplateSelector to customize the AccordionItem in Xamarin.Forms SfAccordion. Refer to the BindableLayout.TemplateSelector document from here. C# Define custom DataTemplateSelector for Accordion. Here, we custome the index-based AccordionItem. In the OnSelectTemplate method, return templates based on the index. namespace AccordionXamarin { public class AccordionTemplateSelector : DataTemplateSelector { public DataTemplate DefaultTemplate { get; set; } public DataTemplate CustomTemplate { get; set; } protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { return (item as ItemInfo).ID % 2 == 0 ? CustomTemplate : DefaultTemplate; } } } XAML Define templates for the AccordionItem in the resource and use the set it to the BindableLayout.ItemTemplateSelector using the StaticResource key. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AccordionXamarin" xmlns:accordion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms" x:Class="AccordionXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}"> <ContentPage.BindingContext> <local:ItemInfoRepository/> </ContentPage.BindingContext> <ContentPage.Resources> <ResourceDictionary> <local:AccordionTemplateSelector x:Key="accordionTemplateSelector"> <local:AccordionTemplateSelector.CustomTemplate> <DataTemplate> <accordion:AccordionItem HeaderBackgroundColor="#949cdf"> <accordion:AccordionItem.Header> <Grid Padding="10,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="60"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Text="--" FontAttributes="Bold" CornerRadius="5" BackgroundColor="Transparent" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/> <Label TextColor="#495F6E" Text="{Binding Name}" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="StartAndExpand" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </local:AccordionTemplateSelector.CustomTemplate> <local:AccordionTemplateSelector.DefaultTemplate> <DataTemplate> <accordion:AccordionItem > <accordion:AccordionItem.Header> <Grid> <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </local:AccordionTemplateSelector.DefaultTemplate> </local:AccordionTemplateSelector> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" BindableLayout.ItemTemplateSelector="{StaticResource accordionTemplateSelector}" ExpandMode="SingleOrNone"> </accordion:SfAccordion> </ContentPage.Content> </ContentPage> View sample in GitHub
You can swipe the AccordionItem by integrating the Xamarin.Forms SwipeView in Xamarin.Forms SfAccordion. XAML Define the SwipeView in the AccordionItem.Header and AccordionItem.Content to swipe the items. You can also bind the Command to the SwipeItem. <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" ExpandMode="SingleOrNone"> <BindableLayout.ItemTemplate> <DataTemplate> <accordion:AccordionItem HeaderBackgroundColor="{Binding HeaderColor}"> <accordion:AccordionItem.Header> <SwipeView BackgroundColor="Transparent"> <SwipeView.LeftItems> <SwipeItems> <SwipeItem Text="Favourite" BackgroundColor="#98acf8" Command="{Binding Path=BindingContext.FavouriteCommand, Source={x:Reference accordion}}" CommandParameter="{Binding .}"/> </SwipeItems> </SwipeView.LeftItems> <Grid> <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/> </Grid> </SwipeView> </accordion:AccordionItem.Header> <accordion:AccordionItem.Content> <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0"> <Label Text="{Binding Description}" VerticalOptions="Center"/> </Grid> </accordion:AccordionItem.Content> </accordion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </accordion:SfAccordion> C# Change the BackgroundColor of the HeaderBackgroundColor in the command execution handler. public class ItemInfoRepository { public Command<object> FavouriteCommand { get; set; } public ItemInfoRepository() { FavouriteCommand = new Command<object>(OnFavouriteClicked); } private void OnFavouriteClicked(object obj) { (obj as ItemInfo).HeaderColor = (obj as ItemInfo).HeaderColor == Color.Transparent ? Color.FromHex("#cee397") : Color.Transparent; } } View sample in GitHub
You can search for both SfAccordion and SfListView loaded inside AccordionItem.Content in Xamarin.Forms. To load the SfListView inside Accordion, refer to the article from here. XAML SearchBar is loaded at the top of the page to search for SfAccordion. The SfListView is loaded inside the BindableLayout.ItemTemplate. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AccordionXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms" xmlns:sfListView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" xmlns:converter="clr-namespace:AccordionXamarin.Converter" xmlns:helper="clr-namespace:AccordionXamarin.Helper" x:Class="AccordionXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}"> ... <ContentPage.Content> <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <SearchBar x:Name="searchBar" HeightRequest="50"/> <syncfusion:SfAccordion x:Name="OuterAccordion" ExpandMode="SingleOrNone" Margin="5" BindableLayout.ItemsSource="{Binding Info}"> <BindableLayout.ItemTemplate> <DataTemplate> <syncfusion:AccordionItem x:Name="AccordionItem"> <syncfusion:AccordionItem.Header> <Grid HeightRequest="50" RowSpacing="0"> <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <sfListView:SfListView x:Name="listView" SelectedItem="{Binding SelectedItem}" HeightRequest="{Binding Varieties, Converter={StaticResource HeightConverter}, ConverterParameter={x:Reference listView}}" ItemSize="50" ItemsSource="{Binding Varieties}" ItemSpacing="1"> <sfListView:SfListView.ItemTemplate> <DataTemplate> ... </DataTemplate> </sfListView:SfListView.ItemTemplate> </sfListView:SfListView> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </syncfusion:SfAccordion> </StackLayout> </ContentPage.Content> </ContentPage> C# In the SearchBar.TextChanged event, filter items based on the NewTextValue property of TextChangedEventArgs. You can filter items based on the collection bound to both the Accordion and the ListView. Filtered items set to Accordion using the BindableLayout.SetItemsSource method. You can expand the AccordionItem to show the searched ListViewItem by setting the IsExpanded property to true. namespace AccordionXamarin.Helper { public class Behavior : Behavior<ContentPage> { SfAccordion Accordion; SearchBar SearchBar; protected override void OnAttachedTo(ContentPage bindable) { Accordion = bindable.FindByName<SfAccordion>("OuterAccordion"); SearchBar = bindable.FindByName<SearchBar>("searchBar"); SearchBar.TextChanged += SearchBar_TextChanged; base.OnAttachedTo(bindable); } private void SearchBar_TextChanged(object sender, TextChangedEventArgs e) { var viewModel = new ItemInfoRepository(); var accordionItems = viewModel.Info; if (string.IsNullOrEmpty(e.NewTextValue)) { BindableLayout.SetItemsSource(Accordion, accordionItems); return; } var filteredSource = accordionItems.Where(x => (x.Name.ToLower()).StartsWith(e.NewTextValue.ToLower())).ToList<ItemInfo>(); if(filteredSource.Count == 0) { List<Variety> listfilteredSource = null; for (int i = 0; i < accordionItems.Count; i++) { var item = accordionItems[i]; listfilteredSource = item.Varieties.Where(x => (x.Name.ToLower()).StartsWith(e.NewTextValue.ToLower())).ToList<Variety>(); if (listfilteredSource.Count > 0) { var list = accordionItems.Where(x => x.Name.Contains(item.Name.ToString())); BindableLayout.SetItemsSource(Accordion, list); if (!Accordion.Items[0].IsExpanded) Accordion.Items[0].IsExpanded = true; return; } } } BindableLayout.SetItemsSource(Accordion, filteredSource); } } } Output View sample in GitHubConclusionI hope you enjoyed learning about how to search for both Accordion and ListView in Xamarin.FormsYou can refer to our Xamarin.Forms Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.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, Direct-Trac, or feedback portal. We are always happy to assist you!
You can add button inside ListViewItem and handle both ItemTapped and Button click action in Xamarin.Forms SfListView. XAML Load Button control inside the SfListView.ItemTemplate and bind SfListView.TapCommand and Button.Command. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage"> <ContentPage.BindingContext> <local:AccordionViewModel/> </ContentPage.BindingContext> <ContentPage.Content> <Grid x:Name="mainGrid" BackgroundColor="#F0F0F0" Padding="4"> <sflistview:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemsSource="{Binding ContactsInfo}" SelectionMode ="None" TapCommand="{Binding ItemTappedCommand}" IsScrollBarVisible="False"> <sflistview:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="2" Margin="1" x:Name="viewCell" BackgroundColor="#F0F0F0" > <Frame x:Name="frame" CornerRadius="2" Padding="1" Margin="1" OutlineColor="White"> ... <Label Grid.Row="0" LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" FontSize="16"/> <Label Grid.Row="1" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding CallTime}" FontSize="12"/> <Button Grid.Row="2" Text="Details" x:Name="button" Command="{Binding Source={x:Reference listView}, Path=BindingContext.ButtonCommand}" CommandParameter="{Binding .}"/> </Grid> <Grid Grid.Row="0" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"> <Image Source="{Binding PhoneImage}" Opacity="0.60" HeightRequest="20" WidthRequest="20" HorizontalOptions="Center" VerticalOptions="Center" /> </Grid> </Grid> </Grid> <Grid IsVisible="{Binding IsVisible, Mode=TwoWay}" ColumnSpacing="0" RowSpacing="0" Grid.Row="1" BackgroundColor="White" HorizontalOptions="FillAndExpand" Padding="5" VerticalOptions="FillAndExpand"> ... </Grid> </Grid> </Frame> </Grid> </DataTemplate> </sflistview:SfListView.ItemTemplate> </sflistview:SfListView> </Grid> </ContentPage.Content> </ContentPage> C# Expand the Accordion view in the TapCommand method and display the contact details in the ButtonCommand method. public class AccordionViewModel { public ObservableCollection<Contact> ContactsInfo { get; set; } internal Contact TappedItem { get; set; } public Command<object> ButtonCommand { get; set; } public Command<object> ItemTappedCommand { get; set; } public AccordionViewModel() { ButtonCommand = new Command<object>(OnButtonTapped); ItemTappedCommand = new Command<object>(OnItemTapped); } private void OnItemTapped(object obj) { var ItemData = (obj as Syncfusion.ListView.XForms.ItemTappedEventArgs).ItemData as Contact; if (this.TappedItem == null) { //Expands when tap on the item at first. ItemData.IsVisible = true; this.TappedItem = ItemData; } else { if (ItemData != this.TappedItem) { //Expands when tap on the another item. this.TappedItem.IsVisible = false; ItemData.IsVisible = true; this.TappedItem = ItemData; } else { this.TappedItem.IsVisible = false; this.TappedItem = null; } } } private void OnButtonTapped(object obj) { var item = obj as Contact; App.Current.MainPage.DisplayAlert(""+item.ContactName, "" + item.CallTime, "Ok"); } } Output View sample in GitHub
