<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="C1_Demo.DemoHyperpanel" mc:Ignorable="d" Grid.Column="1" 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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <UserControl.Resources>
        <Style x:Key="ItemStyle" TargetType="Border">
          <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>
          <Setter Property="MinWidth" Value="50" />
          <Setter Property="MinHeight" Value="50" />
        </Style>
    </UserControl.Resources>
	<c1:C1HyperPanel x:Name="hyperPanel" Orientation="Horizontal" Background="#19738A97">
		<Border Background="#FF1576A1" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="a" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF008B9C" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="b" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF00ADD6" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="c" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FFAECEE7" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="d" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF0094D6" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="e" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF9DCFC3" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="f" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF1576A1" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="g" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF008B9C" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="h" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF00ADD6" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="i" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FFAECEE7" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="j" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF0094D6" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="k" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF9DCFC3" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="32" Text="l" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
		<Border Background="#FF1576A1" Style="{StaticResource ItemStyle}">
			<TextBlock FontSize="30" Text="m" TextAlignment="Center" TextWrapping="Wrap" d:IsStaticText="False">
				<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>
	</c1:C1HyperPanel>
</UserControl>