<Page
    x:Name="pageRoot"
    x:Class="ControlExplorer.SamplesPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlExplorer"
    xmlns:common="using:ControlExplorer.Common"
    xmlns:Xaml="using:C1.Xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Features}" />
        <Style x:Key="TreeViewCollapsedIconStyle" TargetType="Path">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <RotateTransform Angle="-45" CenterX="3" CenterY="3"/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <ControlTemplate x:Key="C1TreeViewToggle" TargetType="Xaml:C1TreeViewExpandButton" >
            <Grid Background="Transparent">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates" >
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="PointerOver" />
                        <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>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CollapsedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="CheckedPointOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CollapsedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Indeterminate" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ShowIcons">
                        <VisualState x:Name="ShowTriangleIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineExpandedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CollapsedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineCollapsedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="ShowPlusIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineExpandedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CollapsedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineCollapsedIcon" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates" >
                        <VisualState x:Name="Unfocused">
                        </VisualState>
                        <VisualState x:Name="Focused">
                        </VisualState>
                        <VisualState x:Name="PointerFocused">
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid x:Name="ExpandedGrid" Height="32" Width="32">
                    <Path x:Name="ExpandedIcon" Data="M5.9130435,0.086956523 L5.9130435,5.9130435 L0.086956523,5.9130435 z"
                          Fill="{TemplateBinding Background}"
                          Width="12" Height="12"
                          Stretch="UniformToFill"
                          VerticalAlignment="Center"/>
                    <Grid x:Name="LineExpandedIcon" Visibility="Collapsed" Background="{ThemeResource TextBoxBackgroundThemeBrush}" Width="22" Height="22">
                        <Rectangle StrokeThickness="2" Stroke="{ThemeResource CheckBoxForegroundThemeBrush}" Opacity="0.4"/>
                        <Rectangle Fill="{ThemeResource CheckBoxForegroundThemeBrush}" Width="10" Height="2"/>
                    </Grid>
                </Grid>
                <!-- Collapse visual -->
                <Grid x:Name="CollapsedGrid" Height="32" Width="32">
                    <Path x:Name="CollapsedIcon" Data="M5.9130435,0.086956523 L5.9130435,5.9130435 L0.086956523,5.9130435 z"
                          Fill="{TemplateBinding Background}"
                          Width="12" Height="12"
                          Stretch="UniformToFill"
                          Style="{StaticResource TreeViewCollapsedIconStyle}"
                          Opacity="0.5"
                          Margin="0 6 6 0"/>
                    <Grid x:Name="LineCollapsedIcon" Visibility="Collapsed" Background="{ThemeResource TextBoxBackgroundThemeBrush}" Width="22" Height="22">
                        <Rectangle StrokeThickness="2" Stroke="{ThemeResource CheckBoxForegroundThemeBrush}" Opacity="0.4"/>
                        <Path Data="M4,0 L6,0 L6,4 L10,4 L10,6 L6,6 L6,10 L4,10 L4,6 L0,6 L0,4 L4,4 z" Width="10" Height="10" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" Stretch="Fill" />
                    </Grid>
                </Grid>
                <!-- CheckBox content -->
                <ContentPresenter x:Name="Content" Grid.Column="1" 
                                  Content="{TemplateBinding Content}" 
                                  ContentTemplate="{TemplateBinding ContentTemplate}" 
                                  IsHitTestVisible="true"  />
                <!-- Disabled -->
                <Path x:Name="DisabledVisualElement" Data="M5.9130435,0.086956523 L5.9130435,5.9130435 L0.086956523,5.9130435 z"
                      Width="12" Height="12"
                      Stretch="UniformToFill"
                      Opacity="0"/>
            </Grid>
        </ControlTemplate>
        <Style TargetType="Xaml:C1TreeViewItem" x:Key="TreeViewItemStyle">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Xaml: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>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ExpandedStates">
                                    <VisualState x:Name="Expanded">
                                        <Storyboard>
                                            <DoubleAnimation EnableDependentAnimation="True" From="0.5" To="1.0" Duration="00:00:00.5" Storyboard.TargetName="SlidePanel" Storyboard.TargetProperty="Slide">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseOut" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Collapsed">
                                        <Storyboard>
                                            <DoubleAnimation EnableDependentAnimation="True" From="0.5" To="0.0" Duration="00:00:00.5" Storyboard.TargetName="SlidePanel" Storyboard.TargetProperty="Slide">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseOut"/>
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <!--Show/Hide connecting lines-->
                                <VisualStateGroup x:Name="ShowLinesStates">
                                    <VisualState x:Name="ShowLines">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LinePanelBorder" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineContainer" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="HideLines">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LinePanelBorder" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LineContainer" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <!--Show L line or T line according to whether the item is last-->
                                <VisualStateGroup x:Name="ItemLineStates">
                                    <VisualState x:Name="ShowExclusiveItemLine">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RootItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExclusiveItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LastItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LinePanel" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ShowRootItemLine">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RootItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExclusiveItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LastItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LinePanel" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ShowLastItemLine">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RootItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExclusiveItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LastItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LinePanel" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ShowNormalItemLine">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RootItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExclusiveItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LastItemLine" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LinePanel" Storyboard.TargetProperty="(FrameworkElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </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">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Rectangle Fill="#a2a2a2"/>
                                <Path Grid.Column="1" Data="M0,0 L6,6 L0,12 z" HorizontalAlignment="Left" Fill="#a2a2a2" Height="30" Width="50" Stretch="Uniform" />
                            </Grid>
                            <Grid x:Name="MouseOverElement" Visibility="Collapsed" Margin="-2,0,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Rectangle Fill="#a2a2a2"/>
                                <Path Grid.Column="1" Data="M0,0 L6,6 L0,12 z" HorizontalAlignment="Left" Fill="#a2a2a2" Height="30" Width="50" Stretch="Uniform" />
                            </Grid>
                            <Grid x:Name="HeaderPanelContainer" Background="Transparent" Margin="2 0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid x:Name="HeaderPanel" MinHeight="32" Background="Transparent">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"  MinWidth="11"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid x:Name="LineContainer" >
                                        <Xaml:C1TreeViewLine x:Name="RootItemLine" Width="32" Height="32" Stroke="{TemplateBinding LineStroke}" StrokeThickness="{TemplateBinding LineThickness}" StrokeDashArray="{TemplateBinding LineDashArray}" Visibility="Collapsed"></Xaml:C1TreeViewLine>
                                        <Xaml:C1TreeViewLine x:Name="ExclusiveItemLine" Width="32" Height="32" Stroke="{TemplateBinding LineStroke}" StrokeThickness="{TemplateBinding LineThickness}" StrokeDashArray="{TemplateBinding LineDashArray}" Visibility="Collapsed"></Xaml:C1TreeViewLine>
                                        <Xaml:C1TreeViewLine x:Name="NormalItemLine" Width="32" Height="32" Stroke="{TemplateBinding LineStroke}" StrokeThickness="{TemplateBinding LineThickness}" StrokeDashArray="{TemplateBinding LineDashArray}" Visibility="Collapsed"></Xaml:C1TreeViewLine>
                                        <Xaml:C1TreeViewLine x:Name="LastItemLine" Width="32" Height="32" Stroke="{TemplateBinding LineStroke}" StrokeThickness="{TemplateBinding LineThickness}" StrokeDashArray="{TemplateBinding LineDashArray}" Visibility="Collapsed"></Xaml:C1TreeViewLine>
                                    </Grid>
                                    <Xaml:C1TreeViewExpandButton x:Name="ExpandButton"
                                                                 Background="{TemplateBinding Foreground}"
                                                                 BorderBrush="{TemplateBinding Foreground}" 
                                                                 IsTabStop="{TemplateBinding IsTabStop}"
                                                                 VerticalAlignment="Center"
                                                                 IsThreeState="False"
                                                                 Template="{StaticResource C1TreeViewToggle}"
                                                                 Margin="0"/>
                                    <ContentControl x:Name="Header" Grid.Column="1"
                                                    IsTabStop="{TemplateBinding IsTabStop}"
                                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                    FontFamily="{TemplateBinding FontFamily}"
                                                    FontSize="{TemplateBinding FontSize}"
                                                    FontStretch="{TemplateBinding FontStretch}"
                                                    FontStyle="{TemplateBinding FontStyle}"
                                                    FontWeight="{TemplateBinding FontWeight}"
                                                    Foreground="{TemplateBinding Foreground}"
                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    Padding="{TemplateBinding Padding}"
                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                    </ContentControl>
                                    <ContentControl x:Name="HeaderEditor" Grid.Column="1" Visibility="Collapsed"
                                                    IsTabStop="{TemplateBinding IsTabStop}"
                                                    ContentTemplate="{TemplateBinding EditTemplate}"
                                                    FontFamily="{TemplateBinding FontFamily}"
                                                    FontSize="{TemplateBinding FontSize}"
                                                    FontStretch="{TemplateBinding FontStretch}"
                                                    FontStyle="{TemplateBinding FontStyle}"
                                                    FontWeight="{TemplateBinding FontWeight}"
                                                    Foreground="{TemplateBinding Foreground}"
                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    Padding="{TemplateBinding Padding}"
                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                    </ContentControl>
                                </Grid>
                                <Grid Grid.Column="1" HorizontalAlignment="Stretch" Background="Transparent"/>
                                <Border x:Name="DisabledVisualElement" Grid.ColumnSpan="2"
                                        IsHitTestVisible="False"
                                        Opacity="0"/>
                            </Grid>
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="32"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <!-- Vertical Line -->
                                <Border x:Name="LinePanelBorder">
                                    <Xaml:C1TreeViewLinePanel x:Name="LinePanel" LineStroke="{TemplateBinding LineStroke}" LineThickness="{TemplateBinding LineThickness}" LineDashArray="{TemplateBinding LineDashArray}" />
                                </Border>
                                <Border Grid.Column="1">
                                    <Xaml:C1SlideContentControl x:Name="SlidePanel" HorizontalContentAlignment="Stretch">
                                        <ItemsPresenter x:Name="ChildrenPanel" />
                                    </Xaml:C1SlideContentControl>
                                </Border>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ControlExplorerBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid>
            <StackPanel Orientation="Horizontal">
                <StackPanel.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="Canvas.ZIndex" Value="3"/>
                    </Style>
                </StackPanel.Resources>
                <StackPanel Orientation="Horizontal" Height="40" Canvas.ZIndex="2">
                    <Grid>
                        <Rectangle Fill="#a2a2a2"/>
                        <HyperlinkButton Content="" Margin="5 0" Width="25" Height="25" Command="{Binding Navigation.GoHomeCommand}">
                            <HyperlinkButton.Background>
                                <ImageBrush ImageSource="ms-appx:///Assets/ico-Home.png" Stretch="Fill"/>
                            </HyperlinkButton.Background>
                        </HyperlinkButton>
                    </Grid>
                    <Path Data="M0,0 L6,6 L0,12 z" Fill="#a2a2a2" Width="15" Stretch="Fill" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Height="40" Canvas.ZIndex="1" Margin="-15 0 0 0" Grid.Column="1">
                    <Grid>
                        <Rectangle Fill="#cbcccb"/>
                        <Grid Background="#cbcccb" x:Name="Root" PointerEntered="Root_PointerEntered" PointerPressed="Root_PointerPressed">
                            <TextBlock x:Name="Header" Text="{Binding Control.Name}" FontSize="14" VerticalAlignment="Center" Margin="20 0 0 0" Canvas.ZIndex="3" />
                            <FlyoutBase.AttachedFlyout>
                                <Flyout x:Name="DropDown" Placement="Bottom">
                                    <Border>
                                        <ScrollViewer x:Name="ScrollViewer" MaxHeight="400" Margin="5 0">
                                            <ItemsControl ItemsSource="{Binding Groups}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <StackPanel Orientation="Vertical">
                                                            <TextBlock Text="{Binding Name}" Margin="0 15" FontSize="15" FontWeight="Bold"/>
                                                            <ItemsControl ItemsSource="{Binding Controls}">
                                                                <ItemsControl.ItemTemplate>
                                                                    <DataTemplate>
                                                                        <HyperlinkButton Click="HyperlinkButton_Click" FontSize="13" Margin="0 2" Foreground="Black" Content="{Binding Name}"/>
                                                                    </DataTemplate>
                                                                </ItemsControl.ItemTemplate>
                                                            </ItemsControl>
                                                        </StackPanel>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </ScrollViewer>
                                    </Border>
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>
                        </Grid>
                    </Grid>
                    <Path Data="M0,0 L6,6 L0,12 z" Fill="#cbcccb" Width="15" Stretch="Fill" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" Height="40" Canvas.ZIndex="0" Grid.Column="2" Margin="-30 0 0 0">
                    <Grid>
                        <Rectangle Fill="#a2a2a2"/>
                        <TextBlock Text="{Binding Feature.Name}" Margin="35 0 0 0" FontSize="14"/>
                    </Grid>
                    <Path Data="M0,0 L6,6 L0,12 z" Fill="#a2a2a2" Width="15" Stretch="Fill" />
                </StackPanel>
            </StackPanel>
        </Grid>
        <SplitView IsPaneOpen="True" DisplayMode="Inline" Margin="10 0" Grid.Row="1">
            <SplitView.Pane>
                <Grid Background="{ThemeResource ControlExplorerBackgroundThemeBrush}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="100" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding Path=Control.Name}" Margin="0 50 0 10" FontSize="15" FontWeight="Bold" />
                    <TextBlock TextWrapping="Wrap" Text="{Binding Feature.Description}" FontSize="12" Grid.Row="1"/>
                    <TextBlock Grid.Row="2" Text="{Binding Source={StaticResource ControlExplorerLocalization}, Path=Features_Text}" FontWeight="Bold" FontSize="15" Margin="0 0 0 10"/>
                    <Xaml:C1TreeView
                        x:Name="tree"
                        Grid.Row="3"
                        AutomationProperties.AutomationId="ItemListView"
                        AutomationProperties.Name="Items"
                        SelectionChanged="tree_SelectionChanged"
                        ItemPrepared="tree_ItemPrepared"
                        Background="#FFEEEEEE"
                        BorderBrush="#FFBBBBBB"
                        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                        ItemContainerStyle="{StaticResource TreeViewItemStyle}"
                        SelectionMode="Single">
                        <Xaml:C1TreeView.ItemTemplate>
                            <Xaml:C1HierarchicalDataTemplate ItemsSource="{Binding SubFeatures}" Template="{StaticResource Standard80ItemTemplate}">
                                <Xaml:C1HierarchicalDataTemplate.ItemTemplate >
                                    <DataTemplate>
                                        <Grid Height="30">
                                            <TextBlock VerticalAlignment="Center" FontSize="13" Text="{Binding Name}"/>
                                        </Grid>
                                    </DataTemplate>
                                </Xaml:C1HierarchicalDataTemplate.ItemTemplate>
                            </Xaml:C1HierarchicalDataTemplate>
                        </Xaml:C1TreeView.ItemTemplate>
                    </Xaml:C1TreeView>
                </Grid>
            </SplitView.Pane>
            <SplitView.Content>
                <Border Margin="12 50 12 2" BorderThickness="1" BorderBrush="LightGray">
                    <ContentPresenter Content="{Binding Feature.Sample}" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </Border>
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>
