<Window x:Class="WpfApplication58.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        
        Title="MainWindow" Height="645" Width="1078">
    <Grid>
        <Grid.Resources>
            <Style TargetType="{x:Type Border}" x:Key="BorderStyle">
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="CornerRadius" Value="5"/>
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <SolidColorBrush Color="Black"/>
                    </Setter.Value>
                </Setter>
            </Style>

            <SolidColorBrush x:Key="mouseOverBrush" Color="Blue" />
            <SolidColorBrush x:Key="mouseOverLabelBrush" Color="LightBlue" />
            <SolidColorBrush x:Key="normalLabelBrush" Color="Snow" />

            <x:Array x:Key="localEmployeeList" Type="{x:Type TextBlock}">
                <TextBlock>Nancy Davolio</TextBlock>
                <TextBlock>Andrew Fuller</TextBlock>
                <TextBlock>Janel Leverling</TextBlock>
                <TextBlock>Margaret Peacock</TextBlock>
            </x:Array>
            
            <DataTemplate x:Key="seriesTemplate">
                <Canvas Width="{Binding Path=W}" Height="{Binding Path=H}">
                    <Rectangle x:Name="rect" RadiusX="5" RadiusY="5" Width="{Binding Path=W}" Height="{Binding Path=H}" Fill="{Binding Path=Interior}">
                        <Rectangle.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource mouseOverBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>

                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Path=Interior}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Rectangle.Triggers>
                    </Rectangle>
                </Canvas>
            </DataTemplate>

            <DataTemplate x:Key="LabelTemplate">
                <Border x:Name="border" DockPanel.Dock="Top" BorderThickness="1" CornerRadius ="4" Background="{StaticResource normalLabelBrush}">
                    <Border.BorderBrush>
                        <SolidColorBrush Color="Black"/>
                    </Border.BorderBrush>

                    <TextBlock FontFamily="Sans Serif" FontSize="12" Margin="2,2,2,1"
			     HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Path=Text}">
				   <TextBlock.Foreground>
					   <SolidColorBrush Color="Navy"/>
				   </TextBlock.Foreground>
                    </TextBlock>

                    <Border.Triggers>
                        <EventTrigger RoutedEvent="Mouse.MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource mouseOverLabelBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>

                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource normalLabelBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Border.Triggers>
                </Border>
            </DataTemplate>
        </Grid.Resources>
        
        <ScrollViewer Grid.Row="2" Grid.ColumnSpan="2" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Visible" CanContentScroll="true">
            <xctk:PileFlowPanel x:Name="_pileFlowPanel" 
                              MinHeight="175"
                              ContentLabelOffsetY="100" 
                              ContentLabelSize="200,28" 
                              AnimationDuration="1000" 
                              LastMoveDecelarationRatio="0.6" 
                              FlowItemsCount="6" 
                              FlowItemRatio="70" 
                              ItemWidth="200" 
                              ItemHeight="200" 
                              FlowOffsetX="20" 
                              FlowOffsetY="20" 
                              CenterOffsetX="30">
                <xctk:PileFlowPanel.ContentLabel>
                    <Border Background="#ffff50" DockPanel.Dock="Left" Style="{StaticResource BorderStyle}">
                        <TextBlock x:Name="_pileFlowLabel" Margin="0,5,0,0" TextAlignment="Center" />
                        <Border.BitmapEffect>
                            <DropShadowBitmapEffect />
                        </Border.BitmapEffect>
                    </Border>
                </xctk:PileFlowPanel.ContentLabel>

                <xctk:PileFlowCard x:Name="_employeesPileFlowCard" Tag="Employees">
                    <StackPanel>
                        <TextBlock Text="List of Employees" TextAlignment="Center" />
                        <xctk:CheckListBox ItemsSource="{StaticResource localEmployeeList}" x:Name="_employeeListBox"/>
                    </StackPanel>
                </xctk:PileFlowCard>

                <xctk:PileFlowCard Tag="Nancy Daviolo">
                    <Border Background="Beige">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Column="1" Text="Nancy" />
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="Daviolo" />
                            <TextBlock Grid.Row="2" Grid.Column="1" Text="Sales Representative" />
                            <TextBlock Grid.Row="3" Grid.Column="1" Text="(206) 555-9857" />
                            <TextBlock Grid.Row="4" Grid.Column="1" Text="507 - 20th Ave. E. Apt. 2A" />
                            <TextBlock Grid.Row="5" Grid.ColumnSpan="2" Text="This employee has been working at IBM since March 10, 1999." TextWrapping="Wrap" />
                            <Button Grid.Row="6" Grid.ColumnSpan="2" Content="Save" Width="75" />
                        </Grid>
                    </Border>
                </xctk:PileFlowCard>

                <xctk:PileFlowCard Tag="Sale price relative to distance">
                    <Border Background="LightGray">
                        <xctk:Chart>
                            <xctk:Chart.Legend>
                                <xctk:Legend Visibility="Collapsed" />
                            </xctk:Chart.Legend>
                            <xctk:Chart.Areas>
                                <xctk:Area>
                                    <xctk:Area.XAxis>
                                        <xctk:Axis AxisLabelsLayout="ShowToFit" ShowAxisLabel="False" LabelTemplate="{StaticResource LabelTemplate}"/>
                                    </xctk:Area.XAxis>
                                    <xctk:Area.YAxis>
                                        <xctk:Axis AxisLabelsLayout="ShowToFit" ShowAxisLabel="False" LabelTemplate="{StaticResource LabelTemplate}"/>
                                    </xctk:Area.YAxis>
                                    <xctk:Area.Series>
                                        <xctk:Series DefaultInterior="Red" Template="{StaticResource seriesTemplate}">
                                            <xctk:Series.DataPoints>
                                                <xctk:DataPoint X="125" Y="6" />
                                                <xctk:DataPoint X="150" Y="7" />
                                                <xctk:DataPoint X="50" Y="4" />
                                                <xctk:DataPoint X="25" Y="2" />
                                            </xctk:Series.DataPoints>
                                            <xctk:Series.Layout>
                                                <xctk:ColumnLayout />
                                            </xctk:Series.Layout>
                                        </xctk:Series>
                                    </xctk:Area.Series>
                                </xctk:Area>
                            </xctk:Chart.Areas>
                        </xctk:Chart>
                    </Border>
                </xctk:PileFlowCard>

            </xctk:PileFlowPanel>
        </ScrollViewer>
    </Grid>
</Window>