在TabControl内容页中放置树视图

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

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

当前的代码正确添加一个名为像打开的文件新的标签，但它不会显示在所有的树视图。正如我所说的，我对数据绑定并不擅长，所以对此的任何建议都会有所帮助！

来源

2015-08-18 Ultus

您的treeView需要将其ItemsSource设置为“treeRoot”。但这只是问题的开始 - 您需要为XElementViewModel每次包含时创建一个分层数据模板。并且在其中的每一个中，您都可以通过ItemsSource属性指定如何查找子节点。 – user3690202

要了解有关正在发生的事情的更多信息，您可以使用像[Snoop]（https://snoopwpf.codeplex.com/）这样的应用程序，以这种方式查看窗口的结构并找出是否可能treeview在那里，但是不可见/大小为0,0。 –

如果有人有兴趣，我可以通过绑定一些东西来解决它。使用下面的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>

来源

2015-08-19 06:59:29 Ultus

在TabControl内容页中放置树视图

回答

相关问题