Build Interactive Content Slider using Accordion Control in Silverlight 4

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.

Note: You need to add a reference to the System.Windows.Controls.Toolkit to your project.
 

In this code sample, I create an interactive user interface with the help of the Accordion control. 

Here is an example of Accordion:

<UserControl x:Class="SilverlightApplication7.MainPage"  xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"

                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

                    mc:Ignorable="d" xmlns:layoutPrimitivesToolkit="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Layout.Toolkit" Height="293">

    <Grid x:Name="LayoutRoot" Width="800" Height="294" VerticalAlignment="Top" HorizontalAlignment="Left">

        <layoutToolkit:Accordion  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ExpandDirection="Right" Cursor="Arrow">

            <layoutToolkit:AccordionItem Header="CONSULTING AND STAFFING" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9">

                <layoutToolkit:AccordionItem.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FFF71717" Offset="0"/>

                        <GradientStop Color="#FFCC2D6E" Offset="1"/>

                    </LinearGradientBrush>

                </layoutToolkit:AccordionItem.Background>

                <Canvas Background="White" Height="290" Width="713">

                    <Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">

                                <GradientStop Color="#FFFDF9FD" Offset="0.883"/>

                                <GradientStop Color="#FFD22051" Offset="0.996"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Image Source="1.jpg" Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329" Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>

                    <TextBlock TextWrapping="Wrap" Foreground="#FFF13421" LineHeight="21.333" FontSize="32" FontFamily="Sakkal Majalla" Text="Consulting And Staffing" FontWeight="Bold" Height="42" Width="266" TextAlignment="Center" Canvas.Top="3" Canvas.Left="-4">

                    <TextBlock.Effect>

                           <DropShadowEffect Color="#FFD0CECE"/>

                    </TextBlock.Effect>

                    </TextBlock>

                    <Button Content="Learn More &gt;&gt;"

                    Background="#FFE51B2E" FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="#FFE51B2E" Foreground="#FF190678" Height="37" VerticalAlignment="Top" Width="118" Canvas.Left="36" Canvas.Top="194"/>

                    <TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252" LineHeight="21.333" FontSize="14.667" FontFamily="Verdana" Text="Adapt brings over 20 years of Software Development experience with all kinds of disciplines, technologies, and industries including Banking, Finance, Healthcare ..." TextAlignment="left" HorizontalAlignment="Left" Width="250" Canvas.Left="8" Canvas.Top="49" FontWeight="Bold"/>                   

                </Canvas>

            </layoutToolkit:AccordionItem>

            <layoutToolkit:AccordionItem Header="SOFTWARE DEVELOPMENT" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9">

                <layoutToolkit:AccordionItem.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FFE7E723" Offset="0"/>

                        <GradientStop Color="#FFE7E723" Offset="1"/>

                    </LinearGradientBrush>

                </layoutToolkit:AccordionItem.Background>

                <Canvas Background="White" Height="290" Width="713">

                    <Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">

                                <GradientStop Color="#FFFDF9FD" Offset="0.883"/>

                                <GradientStop Color="#FFC8D220" Offset="0.996"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Image Source="2.jpg" Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329" Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>

                    <TextBlock TextWrapping="Wrap" Foreground="#FFF1E921" LineHeight="21.333" FontSize="32" FontFamily="Sakkal Majalla" Text="Software Development" FontWeight="Bold" Height="42" Width="266" TextAlignment="Center" Canvas.Top="3" Canvas.Left="-5">

                    <TextBlock.Effect>

                           <DropShadowEffect Color="#FFD0CECE"/>

                    </TextBlock.Effect>

                    </TextBlock>

                    <Button Content="Learn More &gt;&gt;"

                    Background="#FFA39D0A" FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="Yellow" Foreground="#FF785A06" Height="37" VerticalAlignment="Top" Width="121" Canvas.Left="48" Canvas.Top="194"/>

                    <TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252" LineHeight="21.333" FontSize="14.667" FontFamily="Verdana" Text="Adapt brings over 20 years of Software Development experience with all kinds of disciplines, technologies, and industries including Banking, Finance, Healthcare ..." TextAlignment="Left" HorizontalAlignment="Left" Width="250" Canvas.Left="7" Canvas.Top="49" FontWeight="Bold"/>

                </Canvas>

            </layoutToolkit:AccordionItem>                                       

                     <layoutToolkit:AccordionItem Header="PROJECT MANAGEMENT" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9">

                <layoutToolkit:AccordionItem.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FF4775D4" Offset="0"/>

                        <GradientStop Color="#FF4775D4" Offset="1"/>

                    </LinearGradientBrush>

                </layoutToolkit:AccordionItem.Background>

                <Canvas Background="White" Height="290" Width="713">

                    <Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Width="713" d:LayoutOverrides="VerticalAlignment">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">

                                <GradientStop Color="#FFFDF9FD" Offset="0.883"/>

                                <GradientStop Color="#FF2023D2" Offset="0.996"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Image Source="3.jpg" Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329" Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>

                    <TextBlock TextWrapping="Wrap" Foreground="#FF2167F1" LineHeight="21.333" FontSize="32" FontFamily="Sakkal Majalla" Text="Project Management" FontWeight="Bold" Height="42" Width="226" TextAlignment="Center" Canvas.Left="7" Canvas.Top="3">

                    <TextBlock.Effect>

                           <DropShadowEffect Color="#FFD0CECE"/>

                    </TextBlock.Effect>

                    </TextBlock>

                    <Button Content="Learn More &gt;&gt;"

                     Background="#FF0A52A3" FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="#FF5F47DA" Foreground="#FF3D21C6" Height="37" VerticalAlignment="Top" Width="128" Canvas.Left="41" Canvas.Top="194"/>

                    <TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252" LineHeight="21.333" FontSize="14.667" FontFamily="Verdana" Text="Adapt brings over 20 years of Software Development experience with all kinds of disciplines, technologies, and industries including Banking, Finance, Healthcare ..." TextAlignment="Left" HorizontalAlignment="Left" Width="250" Canvas.Left="11" Canvas.Top="49" FontWeight="Bold"/>

                </Canvas>

            </layoutToolkit:AccordionItem>

            <layoutToolkit:AccordionItem Header="TECHNICAL TRAINING" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFFBF9F9">

                <layoutToolkit:AccordionItem.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FF71BA49" Offset="0"/>

                        <GradientStop Color="#FF3C8314" Offset="1"/>

                    </LinearGradientBrush>

                </layoutToolkit:AccordionItem.Background>

                <Canvas Background="White" Height="290" Width="713">

                    <Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">

                        <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">

                                <GradientStop Color="#FFFDF9FD" Offset="0.883"/>

                                <GradientStop Color="#FF20D233" Offset="0.996"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Image Source="4.jpg" Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329" Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>

                    <TextBlock TextWrapping="Wrap" Foreground="#FF4FC41C" LineHeight="21.333" FontSize="32" FontFamily="Sakkal Majalla" Text="Technical Training" FontWeight="Bold" Height="42" Width="193" TextAlignment="Center" Canvas.Left="9" Canvas.Top="3">

                    <TextBlock.Effect>

                           <DropShadowEffect Color="#FFD0CECE"/>

                    </TextBlock.Effect>

                    </TextBlock>

                    <Button Content="Learn More &gt;&gt;"

                    Background="#FF0AA31A" FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="Green" Foreground="#FF067822" Height="37" VerticalAlignment="Top" Width="131" Canvas.Left="21" Canvas.Top="194"/>

                    <TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252" LineHeight="21.333" FontSize="14.667" FontFamily="Verdana" Text="Adapt brings over 20 years of Software Development experience with all kinds of disciplines, technologies, and industries including Banking, Finance, Healthcare ..." TextAlignment="Left" HorizontalAlignment="Left" Width="244" Canvas.Left="14" Canvas.Top="49" FontWeight="Bold"/>

                </Canvas>

            </layoutToolkit:AccordionItem>

                     <layoutToolkit:AccordionItem Header="EMERGING ENTERPRISES" FontSize="18.667" FontWeight="Bold" FontFamily="Segoe UI" Foreground="#FFF3EEE9">

                <layoutToolkit:AccordionItem.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                       <GradientStop Color="#FFE94F48" Offset="0"/>

                           <GradientStop Color="#FFDE8123" Offset="1"/>

                    </LinearGradientBrush>

                </layoutToolkit:AccordionItem.Background>

                <Canvas Background="White" Height="290" Width="713">

                    <Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">

                        <Rectangle.Fill>

                           <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">

                                <GradientStop Color="#FFFDF9FD" Offset="0.883"/>

                                <GradientStop Color="#FFDE8223" Offset="0.996"/>

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Image Source="5.jpg" Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329" Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>

                    <TextBlock TextWrapping="Wrap" Foreground="#FFC48F1C" LineHeight="21.333" FontSize="32" FontFamily="Sakkal Majalla" Text="Emerging Enterprises" FontWeight="Bold" Height="42" Width="244" TextAlignment="Center" Canvas.Top="3" Canvas.Left="3">

                    <TextBlock.Effect>

                           <DropShadowEffect Color="#FFD0CECE"/>

                    </TextBlock.Effect>

                    </TextBlock>

                    <Button Content="Learn More &gt;&gt;"

                    Background="#FFA3650A" FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="#FFA3650A" Foreground="#FF783506" Height="37" VerticalAlignment="Top" Width="125" Canvas.Left="21" Canvas.Top="194"/>

                    <TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252" LineHeight="21.333" FontSize="14.667" FontFamily="Verdana" Text="Adapt brings over 20 years of Software Development experience with all kinds of disciplines, technologies, and industries including Banking, Finance, Healthcare ..." TextAlignment="Left" HorizontalAlignment="Left" Width="244" Canvas.Left="14" Canvas.Top="49" FontWeight="Bold"/>

                </Canvas>

            </layoutToolkit:AccordionItem>

                    

        </layoutToolkit:Accordion>

 

    </Grid>

</UserControl>

 

Just build and run this application. If you copy the code, you may need to add your own images.

As you can see from the following images, there are 5 accordion items. If you click on an item, the content related to that item will load and you will see a smooth slider effect.

Image 1.

Image 2.

Image 3.



Image 4.



Image 5.

Summary

In this article, I demonstrated the use of an Accordion control available in Silverlight 4. You an see using this control, you can design RIA applications and give them a makeover the way you like.