在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內容頁中放置樹視圖

回答

相關問題