将树视图放在TabControl内容页中

本文关键字：TabControl 视图 | 更新日期: 2023-09-27 18:08:24

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

由于我不是XAML数据绑定方面的专家，所以在从我已经实现的视图模型对象填充树视图时遇到了麻烦。

我的窗口: 

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 Window XAML:

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

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

类FileTab: 

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。正如我所说，我不擅长数据绑定，所以任何关于这方面的建议都会有所帮助!

将树视图放在TabControl内容页中

如果有人感兴趣，我可以通过稍微摆弄一下绑定来让它工作。使用下面的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>
相关文章：