2009-04-06 13 views
8

मैं एक वृक्षदृश्य और एक सूचीदृश्य का मिश्रण बनाना चाहता हूं। मुझे 2 कॉलम चाहिए। बाएं कॉलम में मैं एक रिकर्सिव ट्रीव्यूव चाहता हूं और दाएं कॉलम को बाएं कॉलम से आइटम्स के बारे में कुछ जानकारी दिखानी चाहिए। चलिए बाएं कॉलम नाम और दाएं कॉलम मान को कॉल करते हैं। समस्या यह है कि जब आप वृक्षदृश्य का विस्तार करते हैं तो इंडेंटेशन स्तर में परिवर्तन होता है और मान-कॉलम असाइन नहीं हो जाता है।निश्चित चौड़ाई कॉलम के साथ WPF ट्रीव्यू

सभी मैं के साथ आ सकता है या तो:

एक: TreeView में बनाया का उपयोग करें और इसलिए मूल्य-स्तंभ हमेशा गठबंधन है मैन्युअल रूप से नाम-स्तंभ खरोज स्तर के आधार पर की चौड़ाई बदल जाते हैं।

बी। निर्मित सूची दृश्य का उपयोग करें और मूल वस्तुओं के बीच बाल-बच्चे जोड़कर मैन्युअल रूप से एक वृक्ष दृश्य बनाएं और इनके इंडेंटेशन को भी बदलें।

क्या वास्तव में कोई बेहतर तरीका नहीं है?

उत्तर

6

मैं एक Silverlight आवेदन

आप treeviewitem के टेम्पलेट tweek करने की जरूरत है इस तरह के एक जानवर है एक तरीका होता है। डिफ़ॉल्ट टेम्पलेट वृक्षदृश्य के पार सभी तरह से विस्तार नहीं करता है।

टेम्पलेट को ट्वीक करके, आप इसे सभी तरह से विस्तारित कर सकते हैं, और फिर आप अपने डेटा टेम्पलेट (या पदानुक्रमित डेटा टेम्पलेट) को ग्रिड में सेट कर सकते हैं। अगर मुझे सही याद है, तो आपको TreeviewItem के डिफ़ॉल्ट टेम्पलेट की एक प्रति प्राप्त करने की आवश्यकता है और "हेडर" तत्व की क्षैतिज एलाइनमेंट गुण को "खिंचाव" में बदलना होगा, टेम्पलेट को बनाने वाले ग्रिड में सही कॉलम को हटा दें, और बदलें "ऑटो" से "*" तत्व वाले कॉलम की चौड़ाई।

मिश्रण का उपयोग करना काफी आसान है। एक TreeViewItem बनाएं, उस पर राइट क्लिक करें और "नियंत्रण भागों को संपादित करें (" टेम्पलेट ")> एक प्रतिलिपि संपादित करें ..." यह TreeViewItem के लिए डिफ़ॉल्ट टेम्पलेट की एक प्रति बना देगा। वहां से, PART_Header नामक सामग्री प्रदाता का पता लगाएं। इस से घूमते हुए, युक्त ग्रिड और मेरे स्पष्टीकरण से मेल खाने के लिए अपने कॉलम संशोधित करें (अंतिम कॉलम को हटाएं, "ऑटो" से "*" तक दूसरा कॉलम बदलें)। आइटम के लिए बनाई गई शैली में, क्षैतिज सामग्री को "स्ट्रेच" पर सेट करें (यह डिफ़ॉल्ट रूप से कुछ और बाध्य है)।

उस शैली का उपयोग करें जो आपके वृक्षदृश्य पर ItemContainerStyle के रूप में बनाया गया था। आप इसके बाद पहले बनाए गए TreeViewItem को हटा सकते हैं।

अंत में, आप संसाधनों के समूह के साथ समाप्त हो जाते हैं, जिनमें से एक आपकी शैली है। मेरे द्वारा समाप्त किए गए कार्यों के लिए नीचे देखें (दोनों TreeViewItem शैली और नाम और मूल्य कॉलम के साथ मेरे आइटम के लिए मूल डेटा टेम्पलेट)। अन्य संसाधन भी बनाए गए हैं जो TreeViewItem शैली/टेम्पलेट संदर्भ हैं, लेकिन वे यहां नहीं दिखाए गए हैं (क्योंकि यह पहले से ही बहुत लंबा है: पी)।

<Window.Resources>  
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
     <Setter Property="Padding" Value="1,0,0,0"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TreeViewItem}"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition MinWidth="19" Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition/> 
         </Grid.RowDefinitions> 
         <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/> 
         <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/> 
         </Border> 
         <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsExpanded" Value="false"> 
          <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/> 
         </Trigger> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/> 
         </Trigger> 
         <Trigger Property="IsSelected" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="IsSelectionActive" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
         </MultiTrigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

     <HierarchicalDataTemplate x:Key="DataTemplate1"         
            ItemsSource="{Binding SubNodes}"> 
      <Grid Margin="5"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="Auto" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock HorizontalAlignment="Left" 
          VerticalAlignment="Top" 
          Grid.Column="1" 
          Text="HEADER" 
          TextWrapping="Wrap" /> 
       <TextBox HorizontalAlignment="Left" 
         Margin="2" 
         VerticalAlignment="Top" 
         Text="VALUE" 
         TextWrapping="Wrap" 
         Grid.Column="2" /> 
      </Grid> 

</Window.Resources> 

<TreeView HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Width="Auto" 
        Height="Auto" 
        x:Name="trv" 
      ItemContainerStyle="{StaticResource TreeViewItemStyle1}" 
        ItemTemplate="{DynamicResource DataTemplate1}">    
     </TreeView> 

नोट है कि आप अपने ग्रिड सही हमेशा एक ही चौड़ाई हो जाएगा पर कोशिकाओं से युक्त स्तंभ सुनिश्चित करने के लिए की जरूरत है, अन्यथा आप कुछ अजीब (मैं एक निश्चित चौड़ाई सामग्री के साथ "ऑटो" कॉलम का उपयोग होगा, और मैं नाम और "कक्ष" के बीच एक खाली "*" कॉलम जोड़ता हूं ताकि उन्हें सही-संरेखित किया जा सके)।

यह भी ध्यान रखें कि यह समाधान मूल रूप से आपकी मशीन पर जो भी थीम है, उस पर वृक्षदृश्य की उपस्थिति को "फ्रीज" करता है। (यह एक ओएसए के आधार पर Vista और XP मशीन पर दिखाई देगा, जो आपने संशोधन करते समय उपयोग किया था)।

संबंधित मुद्दे