How to Create a Silverlight Control Like the Telerik CoverFlow Control Part 1 – XAML

Written by Andrew Ivanov Monday, 16 April 2012

If you have seen the Telerik CoverFlow control, then you, just as I, have thought “how is it implemented?” In this post, I will begin to show how you can implement a similar control.

Since the component contains items, we will use a base class ListBox.

public class CoverFlow : ListBox

{

  public CoverFlow()

{

        this.DefaultStyleKey = typeof(CoverFlow);

}

}

The rest is all code today! In the Generiс.xaml, we will define styles and templates for ListBox and ListBoxItem.

<Style TargetType=”local:CoverFlow”>

   <Setter Property=”ItemsPanel”>

      <Setter.Value>

         <ItemsPanelTemplate>

            <Grid/>

         </ItemsPanelTemplate>

      </Setter.Value>

   </Setter>

   <Setter Property=”ItemContainerStyle” Value=”{StaticResource ListBoxItemStyle}” />

   <Setter Property=”ItemTemplate” Value=”{StaticResource ListBoxItemTemplate}” />

</Style>

<Style x:Key=”ListBoxItemStyle” TargetType=”ListBoxItem”>

   <Setter Property=”Padding” Value=”3″ />

   <Setter Property=”HorizontalContentAlignment” Value=”Left” />

<Setter Property=”VerticalContentAlignment” Value=”Top” />

   <Setter Property=”Background” Value=”Transparent” />

   <Setter Property=”BorderThickness” Value=”1″/>

   <Setter Property=”TabNavigation” Value=”Local” />

   <Setter Property=”Template”>

      <Setter.Value>

         <ControlTemplate TargetType=”ListBoxItem”>

           <Grid Background=”{TemplateBinding Background}”>

               <VisualStateManager.VisualStateGroups>

                  <VisualStateGroup x:Name=”CommonStates”>

                     <VisualState x:Name=”Normal” />

                     <VisualState x:Name=”MouseOver” />

                     <VisualState x:Name=”Disabled”>

                        <Storyboard>

                        <DoubleAnimation Storyboard.TargetName=”contentPresenter” Storyboard.TargetProperty=”Opacity” Duration=”0″ To=”.55″ />

                        </Storyboard>

                     </VisualState>

                  </VisualStateGroup>

                  <VisualStateGroup x:Name=”SelectionStates”>

                     <VisualState x:Name=”Unselected” />

                     <VisualState x:Name=”Selected” />

                  </VisualStateGroup>

                  <VisualStateGroup x:Name=”FocusStates”>

                     <VisualState x:Name=”Focused” />

                     <VisualState x:Name=”Unfocused”/>

                  </VisualStateGroup>

               </VisualStateManager.VisualStateGroups>

               <Rectangle x:Name=”fillColor” Opacity=”0″ Fill=”#FFBADDE9″ IsHitTestVisible=”False” RadiusX=”1″ RadiusY=”1″/>

               <Rectangle x:Name=”fillColor2″ Opacity=”0″ Fill=”#FFBADDE9″ IsHitTestVisible=”False” RadiusX=”1″ RadiusY=”1″/>

               <ContentPresenter

                  x:Name=”contentPresenter”

                  Content=”{TemplateBinding Content}”

                  ContentTemplate=”{TemplateBinding ContentTemplate}”

                  HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”

                  Margin=”{TemplateBinding Padding}”/>

               <Rectangle x:Name=”FocusVisualElement” Stroke=”#FF6DBDD1″ StrokeThickness=”1″ Visibility=”Collapsed” RadiusX=”1″ RadiusY=”1″ />

            </Grid>

         </ControlTemplate>

      </Setter.Value>

   </Setter>

</Style>

<DataTemplate x:Key=”ListBoxItemTemplate”>

   <Grid Width=”200″ Height=”200″>

      <Border BorderBrush=”#237094″ BorderThickness=”1″ CornerRadius=”5″>

         <Border.Background>

            <LinearGradientBrush StartPoint=”0.5, 0″ EndPoint=”0.5, 1″>

               <GradientStop Offset=”0″ Color=”#62A0BD” />

               <GradientStop Offset=”0.05″ Color=”#003957″ />

               <GradientStop Offset=”0.95″ Color=”#003755″ />

               <GradientStop Offset=”1″ Color=”#00537B” />

            </LinearGradientBrush>

         </Border.Background>

         <Grid>

            <Grid.ColumnDefinitions>

               <ColumnDefinition Width=”10″ />

               <ColumnDefinition/>

               <ColumnDefinition Width=”10″ />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

               <RowDefinition Height=”30″ />

               <RowDefinition/>

               <RowDefinition Height=”20″ />

            </Grid.RowDefinitions>

            <TextBlock Text=”Author name” Foreground=”#FFFFFF” FontSize=”14″ FontWeight=”Bold” HorizontalAlignment=”Right” VerticalAlignment=”Center” Grid.Column=”1″ Grid.Row=”0″ />

            <Border Background=”#0A1F33″ BorderBrush=”#185086″ BorderThickness=”1″ CornerRadius=”5″ Grid.Column=”1″ Grid.Row=”1″>

               <Grid>

                  <Grid.RowDefinitions>

                     <RowDefinition/>

                     <RowDefinition Height=”40″ />

                  </Grid.RowDefinitions>

                  <Image Source=”Images/Unknown.png” Stretch=”None” Margin=”4, 4, 4, 0″ Grid.Row=”0″ />

                  <Border BorderBrush=”#103358″ BorderThickness=”1″ CornerRadius=”3″ Margin=”4″ Grid.Row=”1″>

                     <Border.Background>

                        <LinearGradientBrush StartPoint=”0.5 0″ EndPoint=”0.5 1″>

                           <GradientStop Offset=”0″ Color=”#0B2846″ />

                           <GradientStop Offset=”1″ Color=”#09315B” />

                         </LinearGradientBrush>

                     </Border.Background>

                     <Grid Margin=”5, 2, 5, 2″>

                     <Grid.RowDefinitions>

                        <RowDefinition/>

                        <RowDefinition/>

                     </Grid.RowDefinitions>

                        <TextBlock Text=”Post count:” Foreground=”#AAFFFFFF” FontSize=”9″ VerticalAlignment=”Center” HorizontalAlignment=”Left” />

                        <TextBlock Text=”Web site:” Foreground=”#AAFFFFFF” FontSize=”9″ VerticalAlignment=”Center” HorizontalAlignment=”Left” Grid.Row=”1″ />

                        <TextBlock Text=”777″ Foreground=”#AAFFFFFF” FontSize=”9″ VerticalAlignment=”Center” HorizontalAlignment=”Right” />

                        <TextBlock Text=”www.domain.com” Foreground=”#AAFFFFFF” FontSize=”9″ VerticalAlignment=”Center” HorizontalAlignment=”Right” Grid.Row=”1″ />

                     </Grid>

                  </Border>

               </Grid>

            </Border>

         </Grid>

      </Border>

   </Grid>

</DataTemplate>

With these styles, items will appear as shown below:

Looking for quality Silverlight Hosting? Look no further than Arvixe Web Hosting!