<HeaderedContentControl
    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"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="720"
    Style="{StaticResource SampleControlStyle}"
    Header="TreeView"
    Tag="https://www.noesisengine.com/docs/Gui.Core._TreeView.html">

    <StackPanel>
        <TextBlock Style="{StaticResource SampleSectionDesc}" Text="The TreeView control is a hierarchical list pattern with expanding and collapsing nodes that can contain nested items."/>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/420e3061ca76e1690ae799fcc36452e5" TabIndex="100">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="SelectedItem"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>Unlike other selector controls like ListBox, the</Run>
                        <Run FontWeight="Bold">SelectionItem</Run>
                        <Run>property of a TreeView is read-only, so it cannot be used to update the selection. Every time users selects another item in the TreeView the</Run>
                        <Run FontWeight="Bold">SelectedItemChanged</Run>
                        <Run>event will be raised.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="210"/>
                    <ColumnDefinition Width="140"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="TreeView.SelectedItemChanged">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <TreeView x:Name="Tree1" Grid.RowSpan="4" Grid.Column="0" BorderBrush="{DynamicResource Brush.Border.Normal}" BorderThickness="1" Height="200" Margin="0,0,20,0">
                    <TreeViewItem Header="Level 1">
                        <TreeViewItem Header="Level 1.1">
                            <TreeViewItem Header="Level 1.1.1"/>
                            <TreeViewItem Header="Level 1.1.2"/>
                        </TreeViewItem>
                        <TreeViewItem Header="Level 1.2"/>
                        <TreeViewItem Header="Level 1.3"/>
                    </TreeViewItem>
                    <TreeViewItem Header="Level 2">
                        <TreeViewItem Header="Level 2.1"/>
                        <TreeViewItem Header="Level 2.2"/>
                        <TreeViewItem Header="Level 2.3"/>
                        <TreeViewItem Header="Level 2.4"/>
                    </TreeViewItem>
                    <TreeViewItem Header="Level 3">
                        <TreeViewItem Header="Level 3.1"/>
                        <TreeViewItem Header="Level 3.2">
                            <TreeViewItem Header="Level 3.2.1"/>
                            <TreeViewItem Header="Level 3.2.2">
                                <TreeViewItem Header="Level 3.2.2.1"/>
                                <TreeViewItem Header="Level 3.2.2.2"/>
                            </TreeViewItem>
                            <TreeViewItem Header="Level 3.2.3"/>
                            <TreeViewItem Header="Level 3.2.4"/>
                        </TreeViewItem>
                    </TreeViewItem>
                    <TreeViewItem Header="Level 4">
                        <TreeViewItem Header="Level 4.1"/>
                        <TreeViewItem Header="Level 4.2"/>
                    </TreeViewItem>
                    <TreeViewItem Header="Level 5"/>
                    <TreeViewItem Header="Level 6">
                        <TreeViewItem Header="Level 6.1"/>
                        <TreeViewItem Header="Level 6.2"/>
                        <TreeViewItem Header="Level 6.3"/>
                        <TreeViewItem Header="Level 6.4"/>
                        <TreeViewItem Header="Level 6.5"/>
                    </TreeViewItem>
                    <TreeViewItem Header="Level 7">
                        <TreeViewItem Header="Level 7.1"/>
                        <TreeViewItem Header="Level 7.2">
                            <TreeViewItem Header="Level 7.2.1"/>
                            <TreeViewItem Header="Level 7.2.2"/>
                        </TreeViewItem>
                        <TreeViewItem Header="Level 7.3"/>
                    </TreeViewItem>
                </TreeView>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="SelectedItem" FontSize="13" FontWeight="Bold"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding SelectedItem.Header, ElementName=Tree1}" Margin="5,0,0,0"/>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="SelectedItemChanged" FontSize="13" FontWeight="Bold" Margin="0,10,0,0"/>
                <Grid Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Margin="5,5,0,0">
                    <Rectangle Fill="DodgerBlue" Width="50"/>
                    <Rectangle Fill="#FFADFF2F" Width="50" x:Name="Rect1"/>
                </Grid>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/7f9eb32579ce0c4d801bfd550c5fc2a5" TabIndex="200">
            <HeaderedContentControl.Header>
                <TextBlock Style="{StaticResource SampleSectionTitle}" Text="ItemsSource and item visualization"/>
            </HeaderedContentControl.Header>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <StackPanel.Resources>
                    <TransformGroup x:Key="FileSystem">
                        <TransformGroup Storyboard.TargetName="Computer" Selector.IsSelected="True">
                            <TransformGroup Storyboard.TargetName="Games">
                                <TranslateTransform Storyboard.TargetName="Bouncing Ball"/>
                                <TranslateTransform Storyboard.TargetName="Duck Hunt"/>
                                <TranslateTransform Storyboard.TargetName="Tic Tac Toe"/>
                            </TransformGroup>
                            <TransformGroup Storyboard.TargetName="ProgramFiles">
                                <TransformGroup Storyboard.TargetName="7-Zip"/>
                                <TransformGroup Storyboard.TargetName="Adobe"/>
                                <TransformGroup Storyboard.TargetName="Microsoft"/>
                                <TransformGroup Storyboard.TargetName="NoesisGUI"/>
                                <TransformGroup Storyboard.TargetName="Unity"/>
                            </TransformGroup>
                            <RotateTransform Storyboard.TargetName="Recycle Bin"/>
                            <TransformGroup Storyboard.TargetName="Users">
                                <TransformGroup Storyboard.TargetName="Administrator"/>
                                <TransformGroup Storyboard.TargetName="Jane Rae"/>
                                <TransformGroup Storyboard.TargetName="John Doe"/>
                            </TransformGroup>
                            <TransformGroup Storyboard.TargetName="Windows">
                                <TransformGroup Storyboard.TargetName="Boot"/>
                                <TransformGroup Storyboard.TargetName="Cursors"/>
                                <TransformGroup Storyboard.TargetName="Fonts">
                                    <TranslateTransform Storyboard.TargetName="Arial.ttf"/>
                                    <TranslateTransform Storyboard.TargetName="Courier New.ttf"/>
                                    <TranslateTransform Storyboard.TargetName="Tahoma.ttf"/>
                                    <TranslateTransform Storyboard.TargetName="Times New Roman.ttf"/>
                                    <TranslateTransform Storyboard.TargetName="Verdana.ttf"/>
                                </TransformGroup>
                                <TransformGroup Storyboard.TargetName="Media"/>
                                <TransformGroup Storyboard.TargetName="Resources"/>
                                <TransformGroup Storyboard.TargetName="Themes"/>
                                <TransformGroup Storyboard.TargetName="System32"/>
                            </TransformGroup>
                        </TransformGroup>
                    </TransformGroup>
                    <HierarchicalDataTemplate DataType="{x:Type TransformGroup}" ItemsSource="{Binding Children}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image x:Name="icon" Width="24" Height="24" Source="Images/folder-closed.png"/>
                            <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding Path=(Storyboard.TargetName)}"/>
                        </Grid>
                        <HierarchicalDataTemplate.Triggers>
                            <DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True">
                                <Setter Property="Source" Value="Images/folder-open.png" TargetName="icon"/>
                            </DataTrigger>
                        </HierarchicalDataTemplate.Triggers>
                    </HierarchicalDataTemplate>
                    <DataTemplate DataType="{x:Type TranslateTransform}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image x:Name="icon" Width="24" Height="24" Source="Images/file.png"/>
                            <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding Path=(Storyboard.TargetName)}"/>
                        </Grid>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type RotateTransform}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image x:Name="icon" Width="24" Height="24" Source="Images/recycling-bin.png"/>
                            <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding Path=(Storyboard.TargetName)}"/>
                        </Grid>
                    </DataTemplate>
                </StackPanel.Resources>
                <TreeView ItemsSource="{Binding Children, Source={StaticResource FileSystem}}" BorderBrush="{DynamicResource Brush.Border.Normal}" BorderThickness="1" Width="300" Height="250">
                    <TreeView.ItemContainerStyle>
                        <Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
                            <Setter Property="IsExpanded" Value="{Binding (Selector.IsSelected)}"/>
                        </Style>
                    </TreeView.ItemContainerStyle>
                </TreeView>
            </StackPanel>
        </HeaderedContentControl>
    </StackPanel>
</HeaderedContentControl>