Silverlight Create Accordion in VB.NET

In this you will see how to create a simple accordion in silverlight.
  • 2214
 

 Accordion: The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.

Accodion means everal buttons or labels are stacked upon one another. At most one of them can be "active". When a button is active the space below the button is used to display a paned window. The pane is usually constrained by the width of labels. When opened it shifts labels under the clicked label down according to the height of that window. Only one button or pane combination can be active at any one time; when a button is selected any other active panes cease to be active and are hidden. The active pane may have scrollbars.

Example of an simple Accordion
 
    <UserControl.Resources>
        <Style x:Key="AccordionButtonStyle1"TargetType="layoutPrimitivesToolkit:AccordionButton">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="Template">               
            
</Setter>
        </Style>
        <Style x:Key="AccordionItemStyle1" TargetType="layoutToolkit:AccordionItem">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Blue"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="layoutToolkit:AccordionItem">
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"VerticalAlignment="{TemplateBinding VerticalAlignment}" Background=
                            {
TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ExpansionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Collapsed">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Storyboard.TargetName="ExpandSite" 
Storyboard.TargetProperty=

                                                (ExpandableContentControl.Percentage)">
                                                <SplineDoubleKeyFrame KeySpline="0.2,0,0,1"KeyTime="00:00:00.3" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00.3"Duration="00:00:00"
 Storyboard.TargetName="ExpandSite"
                                                Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Expanded">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Storyboard.TargetName="ExpandSite" 
Storyboard.TargetProperty
=
                                                (ExpandableContentControl.Percentage)">
                                                <SplineDoubleKeyFrame KeySpline="0.2,0,0,1"KeyTime="00:00:00.3" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="LockedStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Locked">                                       <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton"
                                                Storyboard.TargetProperty="IsEnabled">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unlocked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton"
                                                Storyboard.TargetProperty="IsEnabled">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ExpandDirectionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="ExpandDown">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="rd1" 
Storyboard.TargetProperty
="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="cd0" 
Storyboard.TargetProperty
="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ExpandUp">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton" 
Storyboard.TargetProperty
=
                                            (Grid.Row)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" 
Storyboard.TargetProperty
=
                                            (Grid.Row)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="rd0"
 Storyboard.TargetProperty="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="cd0"
 Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ExpandLeft">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton" 
Storyboard.TargetProperty
="    
                                             (Grid.ColumnSpan)">

                                                
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" 
Storyboard.TargetProperty
=
                                            (Grid.ColumnSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton"
 Storyboard.TargetProperty=
                                            (Grid.RowSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" 
Storyboard.TargetProperty
=
                                            (Grid.RowSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton" Storyboard.TargetProp
                                            (Grid.Column)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty=
                                            (Grid.Row)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="rd0" 
Storyboard.TargetProperty
="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="cd0"
 Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ExpandRight">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton"
 Storyboard.TargetProperty=
                                            (Grid.ColumnSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite"
 Storyboard.TargetProperty=
                                            (Grid.ColumnSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty=
                                            (Grid.RowSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty=
                                            (Grid.RowSpan)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty=
                                            (Grid.Row)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty=
                                            (Grid.Column)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0"Storyboard.TargetName="cd1" Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="1,1,1,1" Padding="{TemplateBinding Padding}">
                                <Grid>
                                    <Grid.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Bisque"/>
                                            <GradientStop Color="Bisque" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Grid.RowDefinitions>
                                        <RowDefinition x:Name="rd0" Height="Auto"/>
                                        <RowDefinition x:Name="rd1" Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="cd0" Width="Auto"/>
                                        <ColumnDefinition x:Name="cd1" Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <layoutPrimitivesToolkit:AccordionButton x:Name="ExpanderButton"HorizontalAlignment="{TemplateBinding HorizontalAlignment
" Margin="0,0,0,0" Style="{StaticResource AccordionButtonStyle1}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding
Background}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"FontStretch="{TemplateBinding FontStretch}" FontStyle
{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}" IsTabStop="True" Padding="0,0,0,0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding
Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Grid.Row="0" IsChecked="{TemplateBinding IsSelected}"/>
                                    <layoutPrimitivesToolkit:ExpandableContentControl x:Name="ExpandSite"HorizontalAlignment="{TemplateBinding
HorizontalAlignment}" Margin="0,0,0,0" Style="{TemplateBinding ExpandableContentControlStyle}"VerticalAlignment="{TemplateBinding VerticalAlignment}"
FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding
FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBindingForeground}" HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}" IsTabStop="False" VerticalContentAlignment="{TemplateBindingVerticalContentAlignment}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="1" Percentage="0"RevealMode="{TemplateBinding ExpandDirection}"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
 
    <Grid x:Name="LayoutRoot" Background="Blue" Width="640">
        <layoutToolkit:Accordion Margin="121,65,122,56" VerticalAlignment="Stretch"HorizontalAlignment="Stretch" ItemContainerStyle="{StaticResource
            AccordionItemStyle1}">
            <layoutToolkit:AccordionItem Header="Button One" FontFamily="Verdana"FontSize="13.333">
                
            
</layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="Button Two" FontFamily="Verdana"FontSize="13.333">
                
            
</layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="Button Three" FontFamily="Verdana"FontSize="13.333">
                
            
</layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="Button Four" FontFamily="Verdana"FontSize="13.333">
               
            
</layoutToolkit:AccordionItem>
            <layoutToolkit:AccordionItem Header="Button Five" FontFamily="Verdana"FontSize="13.333">
 
            </layoutToolkit:AccordionItem>
        </layoutToolkit:Accordion>
 
    </Grid>
</
UserControl>

Output Window

a.gif
 

Conclusion

Hope this article helps you to understand that how a accordion control creates in silverlight.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.