Intersoft ClientUI Documentation
How-to: Customize Item Appearance in UXAccordion
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Advanced Content Controls Overview > UXAccordion > How-to: Customize Item Appearance in UXAccordion

This example shows how to customize item appearance in UXAccordion.

Example

Description

Item container type of UXAccordion is UXAccordionItem. Similar with others ItemsControl you can customize the items appearance of ItemsControl through ItemContainerStyle property. To learn more about how to customize style, see Styles and Templates Overview.

The following example shows how to customize item appearance in UXAccordion using ItemContainerStyle.

To learn how to customize the UXAccordionItem see How-to Customize Item Appearance in UXAccordion.

Code

XAML
Copy Code 
<UserControl.Resources>
    <Style x:Key="UXAccordionOptionStyle1" TargetType="Intersoft:UXAccordionOption">            
        <Setter Property="FontSize" Value="9"></Setter>            
        <Setter Property="FontStyle" Value="Italic"></Setter>            
    </Style>
</UserControl.Resources>    

<Grid x:Name="LayoutRoot" Background="White">
    <Intersoft:UXAccordion HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="200" OptionContainerStyle="{StaticResource UXAccordionOptionStyle1}">
        <Intersoft:UXAccordionItem Header="Co-Workers">
            <Intersoft:UXAccordionOption Content="Anton"/>
            <Intersoft:UXAccordionOption Content="Brad"/>
            <Intersoft:UXAccordionOption Content="David"/>
            <Intersoft:UXAccordionOption Content="Duke"/>
            <Intersoft:UXAccordionOption Content="Lisa"/>
        </Intersoft:UXAccordionItem>
        <Intersoft:UXAccordionItem Header="Friends">
            <Intersoft:UXAccordionOption Content="Jane"/>
            <Intersoft:UXAccordionOption Content="John"/>
            <Intersoft:UXAccordionOption Content="Luke"/>                
        </Intersoft:UXAccordionItem>
        <Intersoft:UXAccordionItem Header="Family">
            <Intersoft:UXAccordionOption Content="Adam"/>
            <Intersoft:UXAccordionOption Content="Anna"/>
            <Intersoft:UXAccordionOption Content="Eden"/>
            <Intersoft:UXAccordionOption Content="Eva"/>                                    
        </Intersoft:UXAccordionItem>
    </Intersoft:UXAccordion>    
</Grid>
See Also
UXAccordionItem Class

Concepts

Content Controls Overview

Other Resources

Locating the Samples in Local Installation
Walkthroughs and How-to Topics