Step 2 of 4: Customizing the C1Accordion Control

In the last step, you created a Silverlight project and added a C1Accordion control to it. In this step, you will customize the behavior and appearance of the C1Accordion control.

Complete the following steps:

1.   Add Height="250" to the <c1:C1Accordion> tag to set the height of the control. The XAML markup appears as follows:

<c1:C1Accordion Height="250">

2.   Add Width="400" to the <c1:C1Accordion> tag to set the width of the control. The XAML markup appears as follows:

<c1:C1Accordion Height="250" Width="400">

3.   Add ExpandDirection="Left" to the <c1:C1Accordion> tag so that the C1Accordion control will expand from the bottom rather than expanding from the top, which is its default. The XAML markup appears follows:

<c1:C1Accordion Height="250" Width="400" ExpandDirection="Left">

4.   Add Fill="True" to the <c1:C1Accordion> tag so that each pane will expand to fill the specified width of the C1Accordion control. The XAML markup appears follows:

<c1:C1Accordion Height="250" Width="400" ExpandDirection="Left"Fill="True">

5.   Add AllowCollapseAll="False" to the <c1:C1Accordion> tag to prevent users from collapsing all panes at the same time. The XAML markup appears follows:

<c1:C1Accordion Height="250" Width="400" ExpandDirection="Left"Fill="True" AllowCollapseAll="False">

In this step, you customized the appearance and behavior of the C1Accordion control. In the next step, you will add customized accordion panes to the control.


Send us comments about this topic.
Copyright © GrapeCity, inc. All rights reserved.