Getting Started with WPF SfAccordion

18 Nov 201819 minutes to read

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies and the NuGet package that need to be added as references to use the control in WPF application.

You can find more details about installing the NuGet package in a WPF application at the following link:

How to install NuGet packages

Create a simple application with SfAccordion

Follow these steps to create a WPF application that uses the SfAccordion control.

Create a project

  1. Open Visual Studio and select File → New → Project.
  2. Choose WPF App (.NET Framework) or WPF App (.NET) based on your target framework.
  3. Name the project (for example, SfAccordionSample) and click Create.

Add control through designer

You can add the SfAccordion control to an application by dragging it from the Toolbox and dropping it onto the designer surface. The required assembly references are added automatically. Before using the Toolbox, ensure that the Syncfusion WPF extensions are installed in Visual Studio.

WPF Accordion Control

Add control manually in XAML

To add the control manually in XAML, follow the given steps:

  1. Add the Syncfusion.SfAccordion.WPF assembly reference to the project.
  2. Import the Syncfusion WPF schema http://schemas.syncfusion.com/wpf in the XAML page.

  3. Add the SfAccordion control to the XAML page.

    <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        x:Class="SfAccordionSample.MainWindow"
        Title="SfAccordion Sample" Height="350" Width="525">
    <Grid>
        <!-- Adding SfAccordion control -->
        <syncfusion:SfAccordion x:Name="SfAccordion" HorizontalAlignment="Center"  VerticalAlignment="Center" Width="100"/>
    </Grid>
</Window>

Add control manually in C#

To add the control manually in C#, follow the given steps:

  1. Add the Syncfusion.SfAccordion.WPF assembly reference to the project.
  2. Import the Syncfusion.Windows.Controls.Layout namespace.

  3. Create an instance of SfAccordion and add it to the window.

    using System.Windows;
using Syncfusion.Windows.Controls.Layout;
   
namespace SfAccordionSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // Creating an instance of SfAccordion control
            SfAccordion accordion = new SfAccordion();
            // Adding SfAccordion as window content
            this.Content = accordion;
        }
    }
}

Add items using SfAccordionItem

You can populate the SfAccordion control by adding SfAccordionItem objects directly in XAML or programmatically through the Items collection.

<syncfusion:SfAccordion HorizontalAlignment="Center" Width="300" Height="200" VerticalAlignment="Center">
        <syncfusion:SfAccordionItem Header="Eric Joplin"/>
        <syncfusion:SfAccordionItem Header="Paul Vent"/>
        <syncfusion:SfAccordionItem Header="Clara Venus"/>
        <syncfusion:SfAccordionItem Header="Maria Even"/>
        <syncfusion:SfAccordionItem Header="Robin Ranee"/>
</syncfusion:SfAccordion>
using Syncfusion.Windows.Controls.Layout;

SfAccordion accordion = new SfAccordion();

//Instance of SfAccordionItem control
SfAccordionItem accordionItem1 = new SfAccordionItem();
SfAccordionItem accordionItem2 = new SfAccordionItem();
SfAccordionItem accordionItem3 = new SfAccordionItem();
SfAccordionItem accordionItem4 = new SfAccordionItem();
SfAccordionItem accordionItem5 = new SfAccordionItem();

//Setting header for SfAccordionItem
accordionItem1.Header = "Eric Joplin";
accordionItem2.Header = "Paul Vent";
accordionItem3.Header = "Clara Venus";
accordionItem4.Header = "Maria Even";
accordionItem5.Header = "Robin Ranee";

accordion.Items.Add(accordionItem1);
accordion.Items.Add(accordionItem2);
accordion.Items.Add(accordionItem3);
accordion.Items.Add(accordionItem4);
accordion.Items.Add(accordionItem5);

this.Content = accordion;

WPF Accordion Items

Bind data

SfAccordion supports data binding through the ItemsSource property and can be bound to any collection of .NET objects.

The following example demonstrates how to bind a collection of business objects to the SfAccordion control.

  • Model.cs

    using System.Windows.Media;
   
 public class Person
 {
     public ImageSource Image { get; set; }
     public string Name { get; set; }
     public string Position { get; set; }
     public string Organization { get; set; }
     public string DateOfBirth { get; set; }
     public string Location { get; set; }
     public string Phone { get; set; }
     public string Email { get; set; }
     public string TileColor { get; set; }
   
     public Person(string name, ImageSource image, string position, string organization, string birth, string location, string phone, string email)
     {
         Name = name;
         Image = image;
         Position = position;
         Organization = organization;
         DateOfBirth = birth;
         Location = location;
         Phone = phone;
         Email = email;
     }
 }

  • ViewModel.cs

    using System;
 using System.Collections.ObjectModel;
 using System.Windows.Media.Imaging;
   
 public class ViewModel
 {
     private ObservableCollection<Person> _employee;
     public ObservableCollection<Person> Employees
     {
         get { return _employee; }
         set { _employee = value; }
 	}
     public ViewModel()
     {
      	Employees = new ObservableCollection<Person>();
         Employees.Add(new Person("Eric Joplin", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_02.png")), "Chairman", "Management", "27/09/1973", "Boston", "+800 9899 9929", "[email protected]"));
         Employees.Add(new Person("Paul Vent", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_04.png")), "Chief Executive Officer", "Management", "27/09/1975", "New York", "+800 9899 9930", "[email protected]"));
         Employees.Add(new Person("Clara Venus", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_06.png")), "Chief Executive Assistant", "Management", "27/09/1978", "California", "+800 9899 9931", "[email protected]"));
         Employees.Add(new Person("Maria Even", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_11.png")), "Executive Manager", "Operational Unit", "27/09/1970", "New York", "+800 9899 9932", "[email protected]"));
         Employees.Add(new Person("Mark Zune", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_13.png")), "Senior Executive", "Operational Unit", "27/09/1983", "Boston", "+800 9899 9933", "[email protected]"));
         Employees.Add(new Person("Robin Ranee", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_16.png")), "Manager", "Customer Service", "27/09/1985", "New Jersey", "+800 9899 9934", "[email protected]"));
         Employees.Add(new Person("Chris Marker", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_21.png")), "Team Manager", "Customer Service", "27/09/1963", "California", "+800 9899 9935", "[email protected]"));
 		Employees.Add(new Person("Serra Sum", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_23.png")), "Coordinator", "Customer Service", "27/09/1961", "New York", "+800 9899 9936", "[email protected]"));
 		Employees.Add(new Person("Mathew Fleming", new BitmapImage(new Uri("pack://application:,,,/DataBinding;Component/Images/Emp_25.png")), "Recruitment Manager", "Human Resource", "27/09/1986", "Boston", "+800 9899 9937", "[email protected]"));
 	} 
 }

  • MainWindow.Xaml

To bind data to the SfAccordion, set the DataContext and provide a HeaderTemplate and ContentTemplate as shown below:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
           xmlns:local="clr-namespace:SfAccordionSample"
           x:Class="SfAccordionSample.MainWindow"
           Title="SfAccordion Sample" Height="350" Width="525">
       <Window.DataContext>
           <local:ViewModel/>
       </Window.DataContext>
       <Grid>
           <syncfusion:SfAccordion x:Name="accordion"
                                   ItemsSource="{Binding Employees}"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   SelectionMode="ZeroOrOne">
               <syncfusion:SfAccordion.HeaderTemplate>
                   <DataTemplate>
                       <Grid>
                           <TextBlock Text="{Binding Name}"
                                      Width="450"
                                      FontSize="18"
                                      VerticalAlignment="Center"
                                      Margin="8" />
                       </Grid>
                   </DataTemplate>
               </syncfusion:SfAccordion.HeaderTemplate>
               <syncfusion:SfAccordion.ContentTemplate>
                   <DataTemplate>
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="Auto"/>
                               <ColumnDefinition Width="*"/>
                           </Grid.ColumnDefinitions>
                           <Grid.RowDefinitions>
                               <RowDefinition Height="Auto"/>
                               <RowDefinition Height="Auto"/>
                               <RowDefinition Height="Auto"/>
                               <RowDefinition Height="Auto"/>
                           </Grid.RowDefinitions>
                           <TextBlock Text="Position "/>
                           <TextBlock Text="{Binding Position}" Grid.Column="1"/>
                           <TextBlock Text="Organization " Grid.Row="1"/>
                           <TextBlock Text="{Binding Organization}" Grid.Row="1" Grid.Column="1"/>
                           <TextBlock Text="Date Of Birth " Grid.Row="2"/>
                           <TextBlock Text="{Binding DateOfBirth}" Grid.Row="2" Grid.Column="1"/>
                           <TextBlock Text="Location " Grid.Row="3"/>
                           <TextBlock Text="{Binding Location}" Grid.Row="3" Grid.Column="1"/>
                       </Grid>
                   </DataTemplate>
               </syncfusion:SfAccordion.ContentTemplate>
           </syncfusion:SfAccordion>
       </Grid>
   </Window>

WPF Accordion Item Binding

Apply template to item header

Use the HeaderTemplate property to apply a common data template to all accordion item headers.

<syncfusion:SfAccordion x:Name="accordion">
        <syncfusion:SfAccordion.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock Text="{Binding}" Foreground="Red"/>
                    </Grid>
                </DataTemplate> 
        </syncfusion:SfAccordion.HeaderTemplate>
</syncfusion:SfAccordion>

WPF Accordion Header Template

Set content to children

You can set content for an SfAccordionItem using its Content property.

<syncfusion:SfAccordion Width="300" Height="300">
        <syncfusion:SfAccordionItem Header="WinRT" Content="Essential Studio for WinRT" />
        <syncfusion:SfAccordionItem Header="Windows Phone" Content="Essential Studio for Windows Phone 7"/>
        <syncfusion:SfAccordionItem Header="Silverlight" Content="Essential Studio for Silverlight"/>
        <syncfusion:SfAccordionItem Header="WPF" Content="Essential Studio for WPF"/>
</syncfusion:SfAccordion>

WPF Accordion Item Content

Theme

SfAccordion supports a variety of built-in themes. Refer to the following articles to learn how to apply themes:

WPF Accordion Themes