Category / Section
How to add a custom control as header of SfAccordionItem?
1 min read
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" >
<layout:SfAccordion.HeaderTemplate>
<DataTemplate>
<Grid>
<Button Content="{Binding Header}" Background="Yellow" Margin="10" Foreground="Red" FontSize="18"/>
</Grid>
</DataTemplate>
</layout:SfAccordion.HeaderTemplate>
<layout:SfAccordion.ContentTemplate >
<DataTemplate>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
</DataTemplate>
</layout:SfAccordion.ContentTemplate>
</layout:SfAccordion>
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"});
}
}
Screenshot
Sample: SfAccordionSample
