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

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 CoverFlowListBox

{

  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!

Tags: , , , , , | Posted under 3rd Party Software, Programming/Coding | RSS 2.0

Leave a Reply

Your email address will not be published. Required fields are marked *


3 + = 10

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>