<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="BasicControls.DemoHyperPanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:BasicControls" xmlns:helpers="clr-namespace:Helpers">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/BasicControls.4;component/CommonResources.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="letterStyle" TargetType="Border">
                <Setter Property="Height" Value="60" />
                <Setter Property="Width" Value="60" />
                <Setter Property="Margin" Value="2" />
                <Setter Property="CornerRadius" Value="3" />
                <Setter Property="BorderThickness" Value="4" />
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFBDBDBD" />
                            <GradientStop Color="#FFDADADA" Offset="0.5" />
                            <GradientStop Color="#FFBDBDBD" Offset="1" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>

            <DataTemplate x:Key="letterTemplate">
                <Border Background="#FF1576A1" Style="{StaticResource letterStyle}">
                    <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="32" TextAlignment="Center" TextWrapping="Wrap">
				    <TextBlock.Foreground>
					    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						    <GradientStop Color="#FFD8EAEE" />
						    <GradientStop Color="#FFFFFFFF" Offset="0.4" />
						    <GradientStop Color="#FFFFFFFF" Offset="0.6" />
						    <GradientStop Color="#FFD8EAEE" Offset="1" />
					    </LinearGradientBrush>
				    </TextBlock.Foreground>
                    </TextBlock>
                </Border>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    <Border Style="{DynamicResource control_Border}">
        <c1:C1HyperPanel Name="hyperPanel" VerticalAlignment="Center" HorizontalAlignment="Center" Distribution="0.1" MinElementScale="0.57" Orientation="Horizontal" VerticalContentAlignment="Bottom">
            <ContentControl Content="a" ContentTemplate="{StaticResource letterTemplate}" />
            <ContentControl Content="b" ContentTemplate="{StaticResource letterTemplate}" />
            <ContentControl Content="c" ContentTemplate="{StaticResource letterTemplate}" />
            <ContentControl Content="d" ContentTemplate="{StaticResource letterTemplate}" />
            <ContentControl Content="e" ContentTemplate="{StaticResource letterTemplate}" />
            <ContentControl Content="f" ContentTemplate="{StaticResource letterTemplate}" />
            <ContentControl Content="g" ContentTemplate="{StaticResource letterTemplate}" />
        </c1:C1HyperPanel>
    </Border>
</UserControl>