Put Treeviews in TabControl Content Pages

Question

I am currently creating an XML editor, and now I want to realize the ability to simultaneously open and edit multiple XML files. Each file must be represented by the TabControl tab, while the contents of the tab show the hierarchical TreeView of the XML structure.

Since I am in no way an XAML data binding expert, I am unable to populate the tree structure from the view model object that I have already implemented.

My window:

public partial class EditorWindow : Window
{
    private ObservableCollection<FileTab> tabList;

    public EditorWindow()
    {
        InitializeComponent();

        xsdManager = null;
        tabList = new ObservableCollection<FileTab>();

        editorWindow.DataContext = tabList;
        tabControl.ItemsSource = tabList;

        FileTab pt = new FileTab(@"C:\Users\User\Documents\Test.xml");
        tabList.Add(pt);
        refreshTabControl();

    }

    private void OpenButtonClick(object sender, RoutedEventArgs e)
    {
        OpenFileDialog fileDialog = new OpenFileDialog();
        fileDialog.DefaultExt = ".xml";
        fileDialog.Filter = "XML files (.xml)|*.xml";
        Nullable<bool> result = fileDialog.ShowDialog();

        if (result == true)
        {
            string filename = fileDialog.FileName;
            Console.WriteLine("MainWindow.SchemaButtonClick:: " + filename);

            tabList.Add(new FileTab(filename));
            Console.WriteLine("New Tab: " + Path.GetFileName(filename));

            refreshTabControl();
        }
    }

    private void refreshTabControl()
    {
        tabControl.Items.Refresh();
    }
}

My XAML window:

<Window x:Class="XmlTool.EditorWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:XmlTool"
        Title="EditorWindow" Height="300" Width="300" Name="editorWindow">
    <StackPanel>
        <Button Click="OpenButtonClick">Open XML</Button>
        <TabControl Name="tabControl" ItemsSource="{Binding tabList}" Height="200">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <TreeView Name="xmlTreeView">
                        <TreeView.ItemTemplate>
                            <HierarchicalDataTemplate ItemsSource="{Binding treeRoot}" DataType="{x:Type local:XElementViewModel}">
                                <Label Name="elementNameLabel" Content="{Binding ElementName=treeRoot, Path=name}"/>
                            </HierarchicalDataTemplate>
                        </TreeView.ItemTemplate>                        
                    </TreeView>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </StackPanel>
</Window>

The XElementViewModel class is a view model for the XElement and contains all the children in the List XElementViewmodel.

FileTab Class:

class FileTab
    {
        public string header { get; set; }
        public XElementViewModel treeRoot { get; set; }

        public FileTab()
        {
            header = "Default tab";
            treeRoot = new XElementViewModel(@"C:\Users\User\Documents\ExampleXMLs\Test.xml");
        }

        public FileTab(string path) 
        {
            header = Path.GetFileName(path);
            Console.WriteLine("ProjectTab: header = " + header);
            treeRoot = new XElementViewModel(path);
            Console.WriteLine("ProjectTab: treeRoot.name = " + treeRoot.name);
        }
    }

, , Treeview. , , !

Answer 1

- , , . XAML TreeView XML- .

<Window x:Class="XmlTool.EditorWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:XmlTool"
        Title="EditorWindow" Height="300" Width="300" Name="editorWindow">
    <StackPanel>
        <Button Click="OpenButtonClick">Open XML</Button>
        <TabControl Name="tabControl" ItemsSource="{Binding tabList}" Height="200">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <TreeView Name="xmlTreeView" ItemsSource="{Binding treeRoot.childrenList}">
                        <TreeView.ItemTemplate>
                            <HierarchicalDataTemplate ItemsSource="{Binding childrenList}" DataType="{x:Type local:XElementViewModel}">                                       
                                    <Label Name="elementNameLabel" Content="{Binding name}"/>
                            </HierarchicalDataTemplate>
                        </TreeView.ItemTemplate>
                    </TreeView>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </StackPanel>
</Window>