<Window x:Class="TreeView_Sample.MainWindow"
        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:local="clr-namespace:TreeView_Sample"
        mc:Ignorable="d"
       Title="MainWindow" Height="400" Width="550" FontSize="12">
    <Window.Resources>
        <Style TargetType="TextBox">
            <Setter Property="Grid.Column" Value="1" />
            <Setter Property="Margin" Value="5,3,5,3" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <DataTemplate x:Key="level3">
            <TextBlock Text="{Binding Path=OrderID}" />
        </DataTemplate>

        <HierarchicalDataTemplate x:Key="level2" ItemsSource="{Binding Path=OrderDetails}" ItemTemplate="{StaticResource level3}">
            <TextBlock Text="{Binding Path=ProductName}"/>
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate x:Key="level1" ItemsSource="{Binding Path=Products}" ItemTemplate="{StaticResource level2}">
            <TextBlock Text="{Binding Path=CategoryName}" Foreground="DarkBlue" FontWeight="Bold" />
        </HierarchicalDataTemplate>

    </Window.Resources>

    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF3C2E2E" Offset="1"/>
        </LinearGradientBrush>
    </Window.Background>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TreeView Name="treeView1" Margin="7" ItemTemplate="{StaticResource level1}" SelectedItemChanged="TreeView1_SelectedItemChanged"/>

        <Grid Grid.Column="1" Name="gridCategories" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Grid.Row="1">CategoryID:</Label>
            <Label Grid.Row="2">CategoryName:</Label>
            <Label Grid.Row="3">Description:</Label>
            <Image Margin="10" Grid.ColumnSpan="2" Source="{Binding ElementName=treeView1, Path=SelectedItem.Image}" />
            <TextBox Grid.Row="1" Text="{Binding ElementName=treeView1, Path=SelectedItem.CategoryID}" />
            <TextBox Grid.Row="2" Text="{Binding ElementName=treeView1, Path=SelectedItem.CategoryName}"/>
            <TextBox Grid.Row="3" Text="{Binding ElementName=treeView1, Path=SelectedItem.Description}"/>
        </Grid>

        <Grid Grid.Column="1" Name="gridProducts" Visibility="Collapsed" Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label>ProductID:</Label>
            <Label Grid.Row="1">ProductName:</Label>
            <Label Grid.Row="2">UnitPrice:</Label>
            <Label Grid.Row="3">UnitsOnStock:</Label>
            <Label Grid.Row="4">UnitsOnOrder:</Label>
            <TextBox Grid.Row="0" Text="{Binding ElementName=treeView1, Path=SelectedItem.ProductID}" />
            <TextBox Grid.Row="1" Text="{Binding ElementName=treeView1, Path=SelectedItem.ProductName}"/>
            <TextBox Grid.Row="2" Text="{Binding ElementName=treeView1, Path=SelectedItem.UnitPrice}"/>
            <TextBox Grid.Row="3" Text="{Binding ElementName=treeView1, Path=SelectedItem.UnitsInStock}"/>
            <TextBox Grid.Row="4" Text="{Binding ElementName=treeView1, Path=SelectedItem.UnitsOnOrder}"/>
        </Grid>

        <Grid Grid.Column="1" Name="gridOrderDetails" Visibility="Collapsed" Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label>OrderID:</Label>
            <Label Grid.Row="1">UnitPrice:</Label>
            <Label Grid.Row="2">Quantity:</Label>
            <Label Grid.Row="3">Discount:</Label>
            <TextBox Grid.Row="0" Text="{Binding ElementName=treeView1, Path=SelectedItem.OrderID, Mode=OneWay}" />
            <TextBox Grid.Row="1" Text="{Binding ElementName=treeView1, Path=SelectedItem.UnitPrice, Mode=OneWay}"/>
            <TextBox Grid.Row="2" Text="{Binding ElementName=treeView1, Path=SelectedItem.Quantity, Mode=OneWay}" />
            <TextBox Grid.Row="3" Text="{Binding ElementName=treeView1, Path=SelectedItem.Discount, Mode=OneWay}"/>
        </Grid>

    </Grid>
</Window>


