Intersoft ClientUI Documentation
How-to: Customize Option Appearance in UXAccordion
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Controls > Control Library > Advanced Content Controls Overview > UXAccordion > How-to: Customize Option Appearance in UXAccordion

Glossary Item Box

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

©2012. All Rights Reserved.