2009-01-21 24 views
11

में मल्टी-कॉलम ट्री-व्यू कोई भी जानता है कि मुझे WPF में मल्टी-कॉलम ट्री-व्यू जैसे नियंत्रण प्राप्त हो सकता है?डब्ल्यूपीएफ

उत्तर

8

मैंने इसे पुराने ब्लॉग पोस्ट here पर लागू किया है। लेकिन अगर मुझे सही याद है तो मुझे चीजों को सही काम करने के लिए कुछ मैन्युअल काम करना पड़ा। विशेष रूप से स्क्रॉल बार के साथ।

लेकिन इससे आपको अच्छी शुरुआत मिलनी चाहिए।

http://www.codeproject.com/KB/WPF/TreeListView.aspx

वहाँ WPF TreeView के बारे में काफी कुछ अन्य उपयोगी articles देखते हैं:

+0

मैंने इस समाधान का उपयोग किया है, यह अच्छी तरह से काम करता है। – Dylan

4

कि मदद कर सकता है codeproject पर एक लेख है।

9

SharpDevelopListView उपclass SharpTreeView कहलाता है जो आप खोज रहे हैं। (5.1.0 बीटा के रूप में)

SharpTreeView example

XAML घड़ी विंडो में प्रयोग किया है::

आप SharpDevelop के "घड़ी" विंडो में इस पर नियंत्रण की एक जीवित उदाहरण देख सकते हैं

<tv:SharpGridView x:Key="variableGridView" AllowsColumnReorder="False"> 
    <GridView.Columns> 
     <GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.NameColumn}" Width="200"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
         <tv:SharpTreeNodeView /> 
         <local:AutoCompleteTextBox x:Name="name" Margin="-6 0 0 0" MinWidth="100" Text="{Binding Node.Name}" IsEditable="{Binding Node.CanSetName}"> 
          <local:AutoCompleteTextBox.ContextMenu> 
           <MultiBinding Converter="{StaticResource menuBuilder}"> 
            <Binding Path="Node.ContextMenuAddInTreeEntry" /> 
            <Binding Path="Node" /> 
           </MultiBinding> 
          </local:AutoCompleteTextBox.ContextMenu> 
         </local:AutoCompleteTextBox> 
        </StackPanel> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
     <GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.ValueColumn}" Width="200"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <local:AutoCompleteTextBox 
         MinWidth="100" 
         Text="{Binding Node.Value}" 
         IsEditable="{Binding Node.CanSetValue}"> 
         <local:AutoCompleteTextBox.ContextMenu> 
          <MultiBinding Converter="{StaticResource menuBuilder}"> 
           <Binding Path="Node.ContextMenuAddInTreeEntry" /> 
           <Binding Path="Node" /> 
          </MultiBinding> 
         </local:AutoCompleteTextBox.ContextMenu> 
        </local:AutoCompleteTextBox> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
     <GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.TypeColumn}" Width="200"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <local:AutoCompleteTextBox MinWidth="100" Text="{Binding Node.Type}" IsEditable="False"> 
         <local:AutoCompleteTextBox.ContextMenu> 
          <MultiBinding Converter="{StaticResource menuBuilder}"> 
           <Binding Path="Node.ContextMenuAddInTreeEntry" /> 
           <Binding Path="Node" /> 
          </MultiBinding> 
         </local:AutoCompleteTextBox.ContextMenu> 
        </local:AutoCompleteTextBox> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
    </GridView.Columns> 
</tv:SharpGridView> 

संसाधन को SharpTreeView नियंत्रण की दृश्य संपत्ति पर सेट किया गया है।

+0

अच्छा स्क्रीनशॉट, लेकिन यह कैसे इस्तेमाल किया जाना चाहिए? आपका कोड नमूना 'टीवी: SharpTreeView.View' परिभाषा दिखाता है, लेकिन शेष माता-पिता' टीवी: SharpTreeView' गायब है। यह किसी ऐसे व्यक्ति के लिए कैसे काम करता है जो डब्ल्यूपीएफ के मानक 'ट्री व्यू' का उपयोग कर सकता है? – ygoe

+0

यह काम नहीं करता है। अज्ञात ऑब्जेक्ट 'लोकल: ऑटोकंपलेटटेक्स्टबॉक्स ' –

+0

@StasBZ कोड केवल एक उदाहरण है, इसे अंधाधुंध प्रतिलिपि और चिपकाया नहीं जाना चाहिए। ['AutoCompleteTextBox'] (https://github.com/icsharpcode/SharpDevelop/blob/02364cb0b7e343cc99763ee72b1dd689f04dfc35/src/AddIns/Debugger/Debugger.AddIn/Pads/AutoCompleteTextBox.cs) उपयोगकर्ता नियंत्रण को तीव्र विकास में परिभाषित किया गया है। –

3

यदि आपको कॉलम हेडर की आवश्यकता नहीं है, तो यह काफी आसान है। आप केवल एक आइटम कंटेनर टेम्पलेट प्रदान कर सकते हैं, दाईं ओर निश्चित चौड़ाई ग्रिड कॉलम जोड़ें, और इसे अपने आइटम के प्रासंगिक डेटा से बांधें।

<Grid> 
     <Grid.ColumnDefinitions> 
      <!--Expander--><ColumnDefinition MinWidth="19" Width="Auto"/> 
      <!--Item--><ColumnDefinition Width="Auto"/> 
      <!--Overflow--><ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <!--Current Item--><RowDefinition Height="Auto"/> 
      <!--Sub-items--><RowDefinition/> 
     </Grid.RowDefinitions> 
     <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/> 
     <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
      <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
     </Border> 
     <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/> 
    </Grid> 

तो सिर्फ इस ग्रिड का विस्तार सही करने के लिए उम्मीद के मुताबिक-चौड़ाई कॉलम शामिल करने के लिए और आप वे कॉलम होगा:

एक TreeView के लिए डिफ़ॉल्ट आइटम कंटेनर एक ग्रिड (कुछ जोड़ा टिप्पणी के साथ) के रूप में परिभाषित किया है।

  • नया स्तंभ के लिए स्तंभ परिभाषा जोड़ें, यह स्वतः आकार
  • अपडेट "ItemsHost" के स्तंभ अवधि अवधि को जोड़ा गया स्तंभ
  • उस कॉलम में एक उम्मीद के मुताबिक-चौड़ाई नियंत्रण जोड़ें बनाना:

भाग प्रभावित:

<Grid> 
... 
    <ColumnDefinition Width="Auto"/> 
... 
    <ItemsPresenter ... Grid.ColumnSpan="3" ... /> 
... 
    <Border Grid.Column="3"><!--Add column data here--></Border> 
... 
</Grid> 

जोड़ा सीमा सभी पंक्तियों के लिए एक ही चौड़ाई है, तो आप एक होगा देखें कि कॉलम के साथ एक वृक्षदृश्य की तरह लगता है। यह स्पष्ट रूप से अच्छी तरह से स्केल नहीं करेगा, लेकिन अगर केवल एक त्वरित और गंदे समाधान की आवश्यकता है, तो आप बाहरी नियंत्रण/पुस्तकालयों के लिए निर्भरताओं को जोड़ने के बिना कुछ मिनटों में मिश्रण में ऐसा करने में सक्षम होना चाहिए।

हमारी जरूरतों को जल्दी से बढ़ी है और हम पेड़ के बाहर स्तंभ लेबल के साथ एक ग्रिड में उपयोग करते हुए प्रश्न में कॉलम जोड़ और इन "कॉलम" की चौड़ाई के लिए स्तंभों की चौड़ाई databound [वास्तव में एक फैले नियंत्रण की चौड़ाई ऑटो आकार के कॉलम]। यह काम करता है, जो मैं अपनी रक्षा में कहूंगा।

यह दृष्टिकोण आइटम कंटेनर के बजाय जेनरेट किए गए आइटम टेम्पलेट में भी किया जा सकता है यदि आप सभी कॉलम में चयन बॉक्स ("बीडी" सीमा) को विस्तारित नहीं करते हैं (या चाहते हैं)।