<UserControl x:Class="TreeViewer_Line.MainPage"
    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:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
	xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
	xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
	xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
	<UserControl.Resources>
		<telerik:Office_BlackTheme x:Key="Theme"/>
		
		<!-- Line brush -->
		<SolidColorBrush x:Key="LineBrush" Color="Red"/>
		
		<LinearGradientBrush x:Key="NavigationMouseoverFill" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFFDFDF1" Offset="0"/>
			<GradientStop Color="#FFFDEDBD" Offset="1"/>
			<GradientStop Color="#FFFDF2CC" Offset="0.5"/>
			<GradientStop Color="#FFFDE6A5" Offset="0.51"/>
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="NavigationMouseoverStroke" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFE8E0C2" Offset="0"/>
			<GradientStop Color="#FFE6E2D0" Offset="1"/>
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="RadTreeViewSelectUnFocusFill" EndPoint="0,1">
			<GradientStop Color="#FFf8f6f9" Offset="0"/>
			<GradientStop Color="#FFf0f0f0" Offset="1"/>
		</LinearGradientBrush>
		<SolidColorBrush x:Key="RadTreeViewSelectUnFocus" Color="#FFdbdbdb"/>
		<LinearGradientBrush x:Key="NavigationSelectFill" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFFEFDF1" Offset="0"/>
			<GradientStop Color="#FFFEE699" Offset="1"/>
			<GradientStop Color="#FFFEEBAA" Offset="0.5"/>
			<GradientStop Color="#FFFED560" Offset="0.51"/>
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="NavigationSelectStroke" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFDBCF9C" Offset="0"/>
			<GradientStop Color="#FFD8D1B3" Offset="1"/>
		</LinearGradientBrush>
		<SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000"/>
		<SolidColorBrush x:Key="InputTextBoxBackground" Color="#FFFFFFFF"/>
		<SolidColorBrush x:Key="BorderOuterBrush" Color="#FFFFFFFF"/>
		<SolidColorBrush x:Key="BorderInnerBrush" Color="#FF979994"/>
		<ControlTemplate x:Key="TreeViewItemDefaultTemplate" TargetType="telerikNavigation:RadTreeViewItem">
			<Grid x:Name="RootElement">
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"/>
					<RowDefinition/>
				</Grid.RowDefinitions>
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="EditStates">
						<VisualState x:Name="Display"/>
						<VisualState x:Name="Edit">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="EditHeaderElement" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
					<VisualStateGroup x:Name="CommonStates">
						<VisualState x:Name="Normal"/>
						<VisualState x:Name="Disabled">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
								</ObjectAnimationUsingKeyFrames>
								<DoubleAnimation Duration="0:0:0.0" Storyboard.TargetName="Header" Storyboard.TargetProperty="Opacity" To="0.35"/>
								<DoubleAnimation Duration="0:0:0.0" Storyboard.TargetName="Image" Storyboard.TargetProperty="Opacity" To="0.35"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="MouseOver">
							<Storyboard>
								<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" To="0.9"/>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
					<VisualStateGroup x:Name="SelectionStates">
						<VisualState x:Name="Unselected"/>
						<VisualState x:Name="Selected">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="SelectedUnfocused">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectionUnfocusedVisual" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
					<VisualStateGroup x:Name="LoadingOnDemandStates">
						<VisualState x:Name="LoadingOnDemand">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="LoadingVisual" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Expander" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
								</ObjectAnimationUsingKeyFrames>
								<DoubleAnimation Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" From="0" To="359"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="LoadingOnDemandReverse"/>
					</VisualStateGroup>
					<VisualStateGroup x:Name="FocusStates">
						<VisualState x:Name="Focused">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
									<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Unfocused"/>
					</VisualStateGroup>
					<VisualStateGroup x:Name="ExpandStates">
						<VisualState x:Name="Expanded"/>
						<VisualState x:Name="Collapsed"/>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<Grid x:Name="HeaderRow" MinHeight="{TemplateBinding MinHeight}" Background="Transparent">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="*"/>
					</Grid.ColumnDefinitions>
					<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="2" RadiusY="2" Grid.Column="2" Grid.ColumnSpan="6"/>
					<Rectangle x:Name="MouseOverVisual" Fill="{StaticResource NavigationMouseoverFill}" Stroke="{StaticResource NavigationMouseoverStroke}" RadiusX="2" RadiusY="2" Opacity="0" Grid.Column="2" Grid.ColumnSpan="6"/>
					<Rectangle x:Name="SelectionUnfocusedVisual" Fill="{StaticResource RadTreeViewSelectUnFocusFill}" Stroke="{StaticResource RadTreeViewSelectUnFocus}" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6"/>
					<Rectangle x:Name="SelectionVisual" Fill="{StaticResource NavigationSelectFill}" Stroke="{StaticResource NavigationSelectStroke}" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6"/>
					<StackPanel x:Name="IndentContainer" Opacity="0.2" Orientation="Horizontal">
						<Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource LineBrush}" VerticalAlignment="Top" Width="1" Visibility="Collapsed">
							<Rectangle.Clip>
								<RectangleGeometry Rect="0,0,1,10000"/>
							</Rectangle.Clip>
						</Rectangle>
					</StackPanel>
					<Grid x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="20" Grid.Column="1">
						<Rectangle x:Name="HorizontalLine" Stroke="{StaticResource LineBrush}" Height="1" HorizontalAlignment="Right" VerticalAlignment="Center" Opacity="0.2">
							<Rectangle.Clip>
								<RectangleGeometry Rect="0,0,10000,1"/>
							</Rectangle.Clip>
						</Rectangle>
						<Rectangle x:Name="VerticalLine" Stroke="{StaticResource LineBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1" Opacity="0.2">
							<Rectangle.Clip>
								<RectangleGeometry Rect="0,0,1,10000"/>
							</Rectangle.Clip>
						</Rectangle>
						<ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
						<Grid x:Name="LoadingVisual" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
							<Grid.RenderTransform>
								<TransformGroup>
									<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5"/>
								</TransformGroup>
							</Grid.RenderTransform>
							<Path Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeStartLineCap="Round" StrokeThickness="1" Height="10" Width="10" Data="M1,0 A1,1,90,1,1,0,-1"/>
							<Path Fill="{TemplateBinding Foreground}" Stretch="Fill" StrokeThickness="1" Height="4" HorizontalAlignment="Left" Margin="5,-1.5,0,0" VerticalAlignment="Top" Width="4" Data="M0,-1.1 L0.1,-1 L0,-0.9"/>
						</Grid>
					</Grid>
					<CheckBox x:Name="CheckBoxElement" Margin="5,0,0,0" VerticalAlignment="Center" Visibility="Collapsed" IsTabStop="False" Grid.Column="2" telerik:StyleManager.Theme="{StaticResource Theme}"/>
					<RadioButton x:Name="RadioButtonElement" Margin="5,0,0,0" VerticalAlignment="Center" Visibility="Collapsed" IsTabStop="False" Grid.Column="2" telerik:StyleManager.Theme="{StaticResource Theme}"/>
					<Image x:Name="Image" HorizontalAlignment="Center" Margin="2" MaxHeight="16" MaxWidth="16" VerticalAlignment="Center" Grid.Column="3" Source="{TemplateBinding DefaultImageSrc}"/>
					<Rectangle x:Name="FocusVisual" Stroke="{StaticResource FocusBrushBlack}" StrokeDashArray="1 2" StrokeThickness="1" RadiusX="3" RadiusY="3" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6"/>
					<Grid Grid.Column="4" Grid.ColumnSpan="2">
						<ContentPresenter x:Name="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
						<ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
					</Grid>
					<Border x:Name="EditElementContainer" HorizontalAlignment="Left" VerticalAlignment="Center" Width="Auto" Visibility="Collapsed" Grid.Column="4" Background="{StaticResource InputTextBoxBackground}" BorderBrush="{StaticResource BorderOuterBrush}" BorderThickness="1" CornerRadius="3,3,3,3">
						<Border Height="Auto" Width="Auto" BorderBrush="{StaticResource BorderInnerBrush}" BorderThickness="1" CornerRadius="2,2,2,2">
							<TextBox x:Name="EditElement" BorderThickness="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
					</Border>
					<Rectangle x:Name="DisabledVisual" IsHitTestVisible="true" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="3"/>
				</Grid>
				<ItemsPresenter x:Name="ItemsHost" VerticalAlignment="Bottom" Visibility="Collapsed" Grid.Row="1"/>
			</Grid>
		</ControlTemplate>
		<Style x:Key="RadTreeViewItemStyle" TargetType="telerikNavigation:RadTreeViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="CheckState" Value="Off"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Padding" Value="1 0 5 0"/>
			<Setter Property="IsDropAllowed" Value="True"/>
			<Setter Property="ItemsOptionListType" Value="Default"/>
			<Setter Property="IsEnabled" Value="True"/>
			<Setter Property="MinHeight" Value="24"/>
			<Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}"/>
			<Setter Property="ItemsPanel">
				<Setter.Value>
					<ItemsPanelTemplate>
						<StackPanel VerticalAlignment="Bottom"/>
					</ItemsPanelTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>
  <Grid x:Name="LayoutRoot">
		<telerikNavigation:RadTreeView Margin="20 5" IsEditable="true"  HorizontalAlignment="Left"
				 SelectionMode="Extended" ItemsOptionListType="OptionList" IsOptionElementsEnabled="True"
				IsLineEnabled="True">
			<telerikNavigation:RadTreeViewItem Header="Personal Folders" IsExpanded="True" Style="{StaticResource RadTreeViewItemStyle}" >
				<telerikNavigation:RadTreeViewItem Header="Deleted Items(6)" Style="{StaticResource RadTreeViewItemStyle}" />
				<telerikNavigation:RadTreeViewItem Header="Drafts" Style="{StaticResource RadTreeViewItemStyle}" />
				<telerikNavigation:RadTreeViewItem Header="Inbox(14)" IsExpanded="True" Style="{StaticResource RadTreeViewItemStyle}" >
					<telerikNavigation:RadTreeViewItem Header="Folders" Style="{StaticResource RadTreeViewItemStyle}"  />
				</telerikNavigation:RadTreeViewItem>
				<telerikNavigation:RadTreeViewItem Header="Junk E-mails" Style="{StaticResource RadTreeViewItemStyle}"  />
				<telerikNavigation:RadTreeViewItem Header="Outbox" Style="{StaticResource RadTreeViewItemStyle}"  />
				<telerikNavigation:RadTreeViewItem Header="Sent Items" Style="{StaticResource RadTreeViewItemStyle}"  />
				<telerikNavigation:RadTreeViewItem Header="Search Folder" IsExpanded="True" Style="{StaticResource RadTreeViewItemStyle}" >
					<telerikNavigation:RadTreeViewItem Header="From Follow up" Style="{StaticResource RadTreeViewItemStyle}"  />
					<telerikNavigation:RadTreeViewItem Header="Large Mail" Style="{StaticResource RadTreeViewItemStyle}"  />
					<telerikNavigation:RadTreeViewItem Header="Unread Mail" Style="{StaticResource RadTreeViewItemStyle}"  />
				</telerikNavigation:RadTreeViewItem>
			</telerikNavigation:RadTreeViewItem>
		</telerikNavigation:RadTreeView>
	</Grid>
</UserControl>
