Adding a Control to the Header

Any accordion pane header element is able to accept a WPF control. In this topic, you will add a Button control to the header in XAML and in code.

This topic assumes that you have added a C1Accordion control with at least one C1AccordionItem item to your project.

In XAML

To add a Button control to the header in XAML, place the following XAML markup between the <c1ext:C1AccordionItem> and </c1ext:C1AccordionItem> tags:

XAML	Copy Code
<c1ext:C1AccordionItem.Header> <Button Content="Button" Height="Auto" Width="50"/> </c1ext:C1AccordionItem.Header>

In Code

To add a Button control to the header in code, complete the following steps:

Enter Code view and add the following code beneath the InitializeComponent() method:

Visual Basic	Copy Code
'Create the Button control Dim NewButton As New Button() NewButton.Content = "Button" 'Set the Button Control's Width and Height properties NewButton.Width = 50 NewButton.Height = Double.NaN 'Add the Button to the header C1AccordionItem1.Header = (NewButton)

Visual Basic

Copy Code

'Create the Button control

Dim NewButton As New Button()

NewButton.Content = "Button"

'Set the Button Control's Width and Height properties

NewButton.Width = 50

NewButton.Height = Double.NaN

'Add the Button to the header

C1AccordionItem1.Header = (NewButton)

C#	Copy Code
InitializeComponent(); //Create the Button control Button NewButton = new Button(); NewButton.Content = "Button"; //Set the Button Control's Width and Height properties NewButton.Width = 50; NewButton.Height = Double.NaN; //Add the Button to the header c1AccordionItem1.Header = (NewButton);

Copy Code

InitializeComponent();

//Create the Button control

Button NewButton = new Button();

NewButton.Content = "Button";

//Set the Button Control's Width and Height properties

NewButton.Width = 50;

NewButton.Height = Double.NaN;

//Add the Button to the header

c1AccordionItem1.Header = (NewButton);

Run the program.

This Topic Illustrates the Following:

As a result of this topic, the control will appear in the header. The final result will resemble the following image: