Question

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

由于我不是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();
    }
}

我的窗口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。正如我所说，我对数据绑定并不是那么好，所以对此有任何建议会有所帮助！

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内容页面中

1 个答案: