We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add a custom control as header of SfAccordionItem?

Platform: UWP |
Control: SfAccordion |
.NET Framework: 4

User can add a custom control on to header of SfAccordionItems. It can be achieved by adding custom control inside of HeaderTemplate of Accordion control. Here we have added the button on header of SfAccordionItems. The following code demonstrates the same.


Code Example: [Xaml]


<layout:SfAccordion   SelectionMode="ZeroOrMore" Height="500" Width="300" AccentBrush="Green" 
BorderBrush="Maroon" VerticalAlignment="Center" ItemsSource="{Binding Collection}" 
DisplayMemberPath="Header"  >
<Button Content="{Binding Header}" Background="Yellow" Margin="10" Foreground="Red" FontSize="18"/>
<layout:SfAccordion.ContentTemplate >
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" />


Code Example: [C#]


public class Model
private string header;
public string Header
get { return header; }
set { header = value; }
private string description;
public string Description
get { return description; }
set { description = value; }
public class ViewModel
private ObservableCollection<Model> collection;
public ObservableCollection<Model> Collection
get { return collection; }
set { collection = value; }
public ViewModel()
Collection = new ObservableCollection<Model>();
Collection.Add(new Model() { Header = "WPF", Description = "Essential Studio for WPF" });
Collection.Add(new Model() { Header = "Silverlight", Description = "Essential Studio for Silverlight" });
Collection.Add(new Model() { Header = "Windows Phone", Description = "Essential Studio for Windows Phone"});
Collection.Add(new Model() { Header = "WinRT ", Description = "Essential Studio for WinRT" });
Collection.Add(new Model() { Header = "WindowsForms", Description = "Essential Studio for Windows Forms"});






Sample: SfAccordionSample


2X faster development

The ultimate UWP UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile