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>

Read more: C# Corner

Posted via email from .NET Info