<UserControl x:Class="BasicControls.DemoSimpleC1TreeView"
             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">
    <Grid>
        <Grid.Resources>
            <ControlTemplate TargetType="ToggleButton" x:Key="C1TreeViewToggle" >
                <Grid Cursor="Arrow" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates" >
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled" >
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates" >
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ExpandedIcon" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="CollapsedIcon" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked" />
                            <VisualState x:Name="Indeterminate" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates" >
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="ContentFocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Path x:Name="CollapsedIcon" Data="M0,0 L6,6 L0,12 z" Fill="#FF0C5C81" HorizontalAlignment="Left" Height="10" Width="5" Margin="2,0,0,0" Stretch="Uniform" />
                    <Path x:Name="ExpandedIcon" Data="M6,0 L6,6 L0,6 z" Opacity="0" Fill="#FF0C5C81" Stretch="Uniform" Height="7" Width="7" HorizontalAlignment="Left"  />
                    <!-- CheckBox content -->
                    <ContentPresenter x:Name="Content" Grid.Column="1" 
                    Content="{TemplateBinding Content}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    IsHitTestVisible="true"  />
                    <!-- Disabled -->
                    <Path x:Name="DisabledVisualElement" Data="M17.25,0.5L17.25,17.25L0.5,17.25z" 
                    Fill="White" 
                    Stretch="None" Opacity="0">
                        <Path.Style>
                            <Style TargetType="Path">
                                <Setter Property="Width" Value="6"/>
                                <Setter Property="Height" Value="6"/>
                                <Setter Property="HorizontalAlignment" Value="Center"/>
                                <Setter Property="VerticalAlignment" Value="Center"/>
                                <Setter Property="Opacity" Value="0"/>
                            </Style>
                        </Path.Style>
                    </Path>
                </Grid>
            </ControlTemplate>

            <Style x:Key="SamplePageTreeViewItem" TargetType="c1:C1TreeViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="c1:C1TreeViewItem">
                            <Grid Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectedStates">
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedElement" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="HeaderEditor" />
                                                <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Header"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unselected" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ExpandedStates">
                                        <VisualState x:Name="Expanded">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetName="SlidePanel" Storyboard.TargetProperty="Slide">
                                                    <DoubleAnimation.EasingFunction>
                                                        <QuadraticEase EasingMode="EaseOut"/>
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Collapsed">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetName="SlidePanel" Storyboard.TargetProperty="Slide">
                                                    <DoubleAnimation.EasingFunction>
                                                        <QuadraticEase EasingMode="EaseOut"/>
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="SelectedElement" Visibility="Collapsed" Margin="-2,0,0,0">
                                    <Rectangle Fill="#FF0C5C81" Margin="0,0,15,0"/>
                                    <Path Data="M0,0 L6,6 L0,12 z" Fill="#FF0C5C81" HorizontalAlignment="Right" Height="30" Width="15" Stretch="Uniform" />
                                </Grid>
                                <Grid x:Name="MouseOverElement" Visibility="Collapsed" Margin="-2,0,0,0">
                                    <Rectangle Fill="#19000000" Margin="0,0,15,0"/>
                                    <Path Data="M0,0 L6,6 L0,12 z" Fill="#19000000" HorizontalAlignment="Right" Height="30" Width="15" Stretch="Uniform" />
                                </Grid>

                                <Grid x:Name="HeaderPanelContainer" Background="Transparent" Margin="2 0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid x:Name="HeaderPanel" MinHeight="20" Background="Transparent" Margin="10,0,-5,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"  MinWidth="11"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <ToggleButton x:Name="ExpandButton"
                                        Background="Violet" 
                                        BorderBrush="{TemplateBinding Foreground}" 
                                        VerticalAlignment="Center" 
                                        IsThreeState="False" 
                                        Template="{StaticResource C1TreeViewToggle}" Margin="0"/>
                                        <ContentControl x:Name="Header" Grid.Column="1"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        FontStretch="{TemplateBinding FontStretch}"
                                        FontStyle="{TemplateBinding FontStyle}"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Padding="{TemplateBinding Padding}"
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Foreground="#FF0C5C81">
                                        </ContentControl>
                                        <ContentControl x:Name="HeaderEditor" Grid.Column="1" Visibility="Collapsed"
                                        ContentTemplate="{TemplateBinding EditTemplate}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        FontStretch="{TemplateBinding FontStretch}"
                                        FontStyle="{TemplateBinding FontStyle}"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Padding="{TemplateBinding Padding}"
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Foreground="#FF0C5C81" Opacity="0">
                                        </ContentControl>
                                    </Grid>
                                    <Grid Grid.Column="1" HorizontalAlignment="Stretch" Background="Transparent"/>
                                    <Border x:Name="DisabledVisualElement" Grid.ColumnSpan="2"
                                    Background="White"
                                    IsHitTestVisible="False"
                                    Opacity="0"/>
                                </Grid>
                                <Border Grid.Row="1">
                                    <c1:C1SlideContentControl x:Name="SlidePanel" HorizontalContentAlignment="Stretch" >
                                        <ItemsPresenter x:Name="ChildrenPanel"/>
                                    </c1:C1SlideContentControl>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="SamplePageTreeView" TargetType="c1:C1TreeView">
                <Setter Property="Background" Value="#FFEEEEEE"/>
                <Setter Property="BorderBrush" Value="#FFBBBBBB"/>
                <Setter Property="ItemContainerStyle" Value="{StaticResource SamplePageTreeViewItem}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="c1:C1TreeView">
                            <Grid x:Name="Root">
                                <Border Background="{TemplateBinding Background}" 
                                                BorderThickness="{TemplateBinding BorderThickness}" 
                                                BorderBrush="{TemplateBinding BorderBrush}" Margin="0 0 15 0"/>
                                <ScrollViewer x:Name="Scroll"
                                                    HorizontalScrollBarVisibility="Auto" 
                                                    VerticalScrollBarVisibility="Auto"  
                                                    IsTabStop="False" 
                                                    BorderThickness="0"
                                                    Padding="1"
                                                   >
                                    <ItemsPresenter />
                                    <c1:ScrollViewerTouchBehavior.TouchBehavior>
                                        <c1:ScrollViewerTouchBehavior/>
                                    </c1:ScrollViewerTouchBehavior.TouchBehavior>
                                </ScrollViewer>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </Grid.Resources>
        <Border HorizontalAlignment="Center" Margin="10" Width="200">
            <c1:C1TreeView x:Name="tree" 
                       ItemsSource="{Binding}" 
                       SelectionMode="Single"
                       SnapsToDevicePixels="True" 
                       HorizontalContentAlignment="Stretch" 
                       Style="{StaticResource SamplePageTreeView}" 
                       Margin="0,0,-5,0">
                <c1:C1TreeView.ItemTemplate>
                    <c1:C1HierarchicalDataTemplate  ItemsSource="{Binding ChildSport}" >
                        <Grid Height="30">
                            <TextBlock VerticalAlignment="Center" FontSize="13" Text="{Binding Name}"/>
                        </Grid>
                    </c1:C1HierarchicalDataTemplate>
                </c1:C1TreeView.ItemTemplate>
            </c1:C1TreeView>
        </Border>
    </Grid>
</UserControl>
