将 Treeviews 放在 TabControl 内容页面中

Question

我目前正在构建一个 XML 编辑器，现在我想实现同时打开和编辑多个 XML 文件的功能。每个文件都应由 TabControl 中的选项卡表示，而选项卡的内容显示 XML 结构的分层 TreeView。

因为我绝不是 XAML 数据绑定方面的专家，所以我无法从我已经实现的视图模型对象填充树视图。

我的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();
    }
}

我的WindowXAML:

<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>

class XElementViewModel 是 XElement 的视图模型，包含 XElementViewmodel 对象列表中的所有子元素。

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);
        }
    }

当前代码正确地添加了与打开的文件同名的新选项卡，但它根本不显示树视图。正如我所说，我不太擅长数据绑定，所以任何有关这方面的建议都会有所帮助！

Answer 1

如果有人感兴趣，我通过稍微尝试一下绑定来让它工作。通过下面的XAML，它显示具有XML结构的TreeView，并在选择选项卡时在相应的树之间切换。

<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>

将 Treeviews 放在 TabControl 内容页面中

Put Treeviews in TabControl content pages

c#

xml

wpf

treeview

xaml