<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo"
    xmlns="https://github.com/avaloniaui"
    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:models="using:Semi.Avalonia.Demo.Pages"
    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="vm:TreeViewVm"
    mc:Ignorable="d">

    <Grid ColumnDefinitions="*,*,*">

        <Border Theme="{StaticResource CardBorder}">
            <TreeView>
                <TreeViewItem Header="Level 1">
                    <TreeViewItem Header="Level 2" />
                    <TreeViewItem Header="Level 2" />
                    <TreeViewItem Header="Level 2" />
                    <TreeViewItem Header="Level 2" />
                    <TreeViewItem Header="Level 2">
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem>
                            <TreeViewItem.Header>
                                <StackPanel>
                                    <TextBlock>Layer 1</TextBlock>
                                    <TextBlock>Layer 2</TextBlock>
                                    <TextBlock>Layer 3</TextBlock>
                                </StackPanel>
                            </TreeViewItem.Header>
                            <TreeViewItem Header="Level 4" />
                            <TreeViewItem Header="Level 4" />
                            <TreeViewItem Header="Level 4" />
                            <TreeViewItem Header="Level 4" />
                            <TreeViewItem Header="Level 4" />
                            <TreeViewItem Header="Level 4" />
                        </TreeViewItem>
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                        <TreeViewItem Header="Level 3" />
                    </TreeViewItem>
                </TreeViewItem>
            </TreeView>
        </Border>

        <Border Grid.Column="1" Theme="{StaticResource CardBorder}">
            <TreeView Margin="0,10" ItemsSource="{Binding Items}">
                <TreeView.ItemTemplate>
                    <TreeDataTemplate ItemsSource="{Binding Items}">
                        <TextBlock Text="{Binding Name}" />
                    </TreeDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
        </Border>

        <Border Grid.Column="2" Theme="{StaticResource CardBorder}">
            <TreeView ItemsSource="{Binding MultipleLevelItems}">
                <TreeView.DataTemplates>
                    <TreeDataTemplate DataType="models:FirstItem" ItemsSource="{Binding SecondItems}">
                        <TextBlock Text="{Binding Name}" />
                    </TreeDataTemplate>
                    <TreeDataTemplate DataType="models:SecondItem" ItemsSource="{Binding ThirdItemItems}">
                        <TextBlock Text="{Binding Name}" />
                    </TreeDataTemplate>
                    <TreeDataTemplate DataType="models:ThirdItem">
                        <TextBlock Text="{Binding Name}" />
                    </TreeDataTemplate>
                </TreeView.DataTemplates>
            </TreeView>
        </Border>

    </Grid>

</UserControl>
