<UserControl
    x:Class="ControlExplorer.Controls.TreeView.CheckBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml"
    mc:Ignorable="d"
    xmlns:local="using:ControlExplorer.Controls.TreeView"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    d:DesignHeight="300"
    d:DesignWidth="400">
 
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Style TargetType="TextBlock" x:Key="TextIconStyle">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="FontFamily" Value="Segoe UI Symbol" />
                <Setter Property="FontWeight" Value="Normal" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="Margin" Value="5 -2"/>
            </Style>

            <Style TargetType="TextBlock" x:Key="TreeText">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="FontSize" Value="20" />    
            </Style>
            <SolidColorBrush x:Key="CheckBoxBackgroundThemeBrush" Color="Transparent"/>
            <Thickness x:Key="PhoneBorderThickness">2.5</Thickness>
            <x:Double x:Key="TextStyleLargeFontSize">18.14</x:Double>
            <FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily>
            <Thickness x:Key="CheckBoxAndRadioButtonTextPaddingThickness">8,0,0,0</Thickness>
            <x:Double x:Key="CheckBoxAndRadioButtonMinWidthSize">168</x:Double>
            <Thickness x:Key="PhoneTouchTargetLargeOverhang">0,16</Thickness>
            <SolidColorBrush x:Key="CheckBoxDisabledBackgroundThemeBrush" Color="Transparent"/>
            <Style  TargetType="CheckBox">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="CheckBox">
                            <Grid Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="Pressed" To="PointerOver">
                                                <Storyboard>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition From="PointerOver" To="Normal">
                                                <Storyboard>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition From="Pressed" To="Normal">
                                                <Storyboard>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver"/>
                                        <VisualState x:Name="PointerOver"/>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked"/>
                                        <VisualState x:Name="Indeterminate">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalRectangle">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid x:Name="Grid" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="25.5"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid Grid.Column="0" VerticalAlignment="Top">
                                        <Border x:Name="CheckBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="25.5" IsHitTestVisible="False" VerticalAlignment="Center" Width="25.5"/>
                                        <Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBorderThemeBrush}" HorizontalAlignment="Center" Height="13" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="13"/>
                                        <Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="18.5"/>
                                    </Grid>
                                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" FontWeight="Normal" FontSize="{ThemeResource TextStyleLargeFontSize}" FontFamily="{ThemeResource PhoneFontFamilyNormal}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <CheckBox Content="Auto Check" IsChecked="True" IsThreeState="False" Name="AutoCheckBox" Margin="5"/>
        </StackPanel>
        <!--checkbox Indeterminate state couldn't shown in Windows Phone 8.1, so override check box style here-->
        <c1:C1TreeView x:Name="WindowExplorerTreeView" Grid.Row="1">
            <Interactivity:Interaction.Behaviors>
                <local:C1CheckBoxTreeViewBehavior AutoCheck="{Binding IsChecked,ElementName=AutoCheckBox}"/>
            </Interactivity:Interaction.Behaviors>
            <c1:C1TreeViewItem IsExpanded="True" >
                <c1:C1TreeViewItem.Header>
                    <CheckBox >
                        <CheckBox.Content>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                <TextBlock Style="{StaticResource TreeText}" Text="Desktop" />
                            </StackPanel>
                        </CheckBox.Content>
                    </CheckBox>
                </c1:C1TreeViewItem.Header>
                <c1:C1TreeViewItem>
                    <c1:C1TreeViewItem.Header>
                        <CheckBox>
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                    <TextBlock Style="{StaticResource TreeText}" Text="User" />
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </c1:C1TreeViewItem.Header>
                </c1:C1TreeViewItem>
                <c1:C1TreeViewItem IsExpanded="True">
                    <c1:C1TreeViewItem.Header>
                        <CheckBox >
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                    <TextBlock Style="{StaticResource TreeText}" Text="Public" />
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </c1:C1TreeViewItem.Header>
                    <c1:C1TreeViewItem>
                        <c1:C1TreeViewItem.Header>
                            <CheckBox>
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="Favorites" />
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                    </c1:C1TreeViewItem>
                    <c1:C1TreeViewItem>
                        <c1:C1TreeViewItem.Header>
                            <CheckBox>
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="Public Downloads" />
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                    </c1:C1TreeViewItem>
                    <c1:C1TreeViewItem>
                        <c1:C1TreeViewItem.Header>
                            <CheckBox>
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="Public Music" />
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                    </c1:C1TreeViewItem>
                    <c1:C1TreeViewItem>
                        <c1:C1TreeViewItem.Header>
                            <CheckBox>
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="Public Pictures" />
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                    </c1:C1TreeViewItem>
                    <c1:C1TreeViewItem>
                        <c1:C1TreeViewItem.Header>
                            <CheckBox>
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="Public Videos" />
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                    </c1:C1TreeViewItem>
                </c1:C1TreeViewItem>
                <c1:C1TreeViewItem IsExpanded="True">
                    <c1:C1TreeViewItem.Header>
                        <CheckBox >
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="" FontSize="28" Style="{StaticResource TextIconStyle}" />
                                    <TextBlock Style="{StaticResource TreeText}" Text="Computer" Margin="5 7 5 0" />
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </c1:C1TreeViewItem.Header>
                    <c1:C1TreeViewItem IsExpanded="True">
                        <c1:C1TreeViewItem.Header>
                            <CheckBox >
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="Local Disk (C:)" />
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                        <c1:C1TreeViewItem>
                            <c1:C1TreeViewItem.Header>
                                <CheckBox>
                                    <CheckBox.Content>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                            <TextBlock Style="{StaticResource TreeText}" Text="Program Files" />
                                        </StackPanel>
                                    </CheckBox.Content>
                                </CheckBox>
                            </c1:C1TreeViewItem.Header>
                        </c1:C1TreeViewItem>
                        <c1:C1TreeViewItem>
                            <c1:C1TreeViewItem.Header>
                                <CheckBox>
                                    <CheckBox.Content>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                            <TextBlock Style="{StaticResource TreeText}" Text="Users" />
                                        </StackPanel>
                                    </CheckBox.Content>
                                </CheckBox>
                            </c1:C1TreeViewItem.Header>
                        </c1:C1TreeViewItem>
                        <c1:C1TreeViewItem>
                            <c1:C1TreeViewItem.Header>
                                <CheckBox>
                                    <CheckBox.Content>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                            <TextBlock Style="{StaticResource TreeText}" Text="Windows" />
                                        </StackPanel>
                                    </CheckBox.Content>
                                </CheckBox>
                            </c1:C1TreeViewItem.Header>
                        </c1:C1TreeViewItem>
                    </c1:C1TreeViewItem>
                    <c1:C1TreeViewItem>
                        <c1:C1TreeViewItem.Header>
                            <CheckBox>
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock FontSize="28" Text="⦾" Style="{StaticResource TextIconStyle}" />
                                        <TextBlock Style="{StaticResource TreeText}" Text="DVD Drive (D:)" Margin="5 7 5 0"/>
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </c1:C1TreeViewItem.Header>
                    </c1:C1TreeViewItem>
                </c1:C1TreeViewItem>
                <c1:C1TreeViewItem>
                    <c1:C1TreeViewItem.Header>
                        <CheckBox>
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock FontSize="28" Text="" Style="{StaticResource TextIconStyle}"/>
                                    <TextBlock Style="{StaticResource TreeText}" Text="Network" Margin="5 7 5 0"/>
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </c1:C1TreeViewItem.Header>
                </c1:C1TreeViewItem>
                <c1:C1TreeViewItem>
                    <c1:C1TreeViewItem.Header>
                        <CheckBox>
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                    <TextBlock Style="{StaticResource TreeText}" Text="Control Panel" />
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </c1:C1TreeViewItem.Header>
                </c1:C1TreeViewItem>
                <c1:C1TreeViewItem>
                    <c1:C1TreeViewItem.Header>
                        <CheckBox>
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="" Style="{StaticResource TextIconStyle}" />
                                    <TextBlock Style="{StaticResource TreeText}" Text="Recycle Bin" />
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </c1:C1TreeViewItem.Header>
                </c1:C1TreeViewItem>
            </c1:C1TreeViewItem>
        </c1:C1TreeView>

    </Grid>
</UserControl>
