<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="C1TreeViewTemplateSample.Page" mc:Ignorable="d" d:DataContext="{d:DesignData Source=/DesignData/SampleTeams.xaml}" 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:src="clr-namespace:C1TreeViewTemplateSample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
  <UserControl.Resources>

    <!-- The Template and Style selectors will look for the data templates and styles
              in their local resource collection -->
    <src:CustomTemplateSelector x:Key="WorldCupTemplateSelector">
      <src:CustomTemplateSelector.Resources>
        <ResourceDictionary>
          <c1:C1HierarchicalDataTemplate x:Key="GroupTemplate" ItemsSource="{Binding Teams}">
            <Border VerticalAlignment="Top" Height="35" Width="145" BorderBrush="#FF7E8F9E" BorderThickness="2" CornerRadius="4" Margin="0 2 0 2">
              <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FF268AC5" Offset="0" />
                  <GradientStop Color="#FF1B638D" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <StackPanel Orientation="Horizontal">
                <Image Source="Resources/Ball.png" Width="18" Height="17" Margin="10,0,0,0" Stretch="Fill" />
                <TextBlock Text="{Binding GroupName}" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="#FFB3D0E1" FontSize="18" />
              </StackPanel>
            </Border>
          </c1:C1HierarchicalDataTemplate>
          <c1:C1HierarchicalDataTemplate x:Key="TeamTemplate">
            <Border VerticalAlignment="Top" Height="60" Width="240" BorderBrush="#FFCBCBCB" BorderThickness="2" CornerRadius="4" Margin="0 2 0 2">
              <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FFFBFBFB" Offset="0" />
                  <GradientStop Color="#FFE6E6E6" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <Image Source="{Binding FlagUri}" Width="16" Height="16" Margin="10,2,0,0" Stretch="Fill" VerticalAlignment="Top" />
                <StackPanel Margin="0,0,10,0">
                  <TextBlock Text="{Binding CountryName}" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="#FF19557A" FontSize="14" />
                  <StackPanel Orientation="Horizontal">
                    <TextBlock Text="World Cups Won:" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="#FF5E5E5E" FontSize="11" />
                    <TextBlock Text="{Binding WorldCupWon}" TextWrapping="Wrap" VerticalAlignment="Center" Margin="2,0,0,0" Foreground="#FF5E5E5E" FontSize="11" />
                  </StackPanel>
                  <StackPanel Orientation="Horizontal">
                    <TextBlock Text="TopScorer:" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="#FF5E5E5E" FontSize="11" />
                    <TextBlock Text="{Binding TopScorer}" TextWrapping="Wrap" VerticalAlignment="Center" Margin="2,0,0,0" Foreground="#FF5E5E5E" FontSize="11" />
                  </StackPanel>                  
                </StackPanel>
              </StackPanel>
            </Border>
          </c1:C1HierarchicalDataTemplate>
        </ResourceDictionary>
      </src:CustomTemplateSelector.Resources>
    </src:CustomTemplateSelector>
    <src:CustomStyleSelector x:Key="WorldCupStyleSelector">
      <src:CustomStyleSelector.Resources>
        <ResourceDictionary>
          <Style x:Key="ExpandedStyle" TargetType="c1:C1TreeViewItem">
            <Setter Property="IsExpanded" Value="True" />
          </Style>
        </ResourceDictionary>
      </src:CustomStyleSelector.Resources>
    </src:CustomStyleSelector>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot">
    <c1:C1TreeView x:Name="ReflectionTreeView" Padding="15 10 0 5" ItemTemplateSelector="{StaticResource WorldCupTemplateSelector}" ItemContainerStyleSelector="{StaticResource WorldCupStyleSelector}" ItemsSource="{Binding}">
    </c1:C1TreeView>
  </Grid>
</UserControl>