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

This example shows how to customize option appearance in UXAccordion.

Example

Description

The item container type of UXAccordion is UXAccordionItem, while the item container type for UXAccordionItem is UXAccordionOption. You can customize the options appearance of UXAccordion through OptionContainerStyle property similar with what you do to style the UXAccordionItem using ItemContainerStyle.

Code

XAML
Copy Code 
<UserControl Resources>
    <Style x:Key="UXAccordionItemStyle1" TargetType="Intersoft:UXAccordionItem">
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0"/>

                    <GradientStop Color="#FFF97E00" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="FontSize" Value="13.333"></Setter>            
    </Style>
</UserControl.Resources>    

<Grid x:Name="LayoutRoot" Background="White">
    <Intersoft:UXAccordion HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="200" ItemContainerStyle="{StaticResource UXAccordionItemStyle1}">
        <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
UXAccordion Class

Concepts

Content Controls Overview

Other Resources

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