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!
