WPF-Strukturansicht mit Spalten mit fester Breite

Question

Ich möchte eine Mischung aus einer Baumansicht und einer Listenansicht erstellen. Ich möchte 2 Spalten haben. In der linken Spalte möchte ich eine rekursive Treeview und die rechte Spalte sollte einige Informationen über die Elemente aus der linken Spalte zeigen. Nennen wir die linke Spalte Name und die rechte Spalte Wert. Das Problem besteht darin, dass beim Erweitern einer Baumansicht die Einrückungsebene geändert wird und die Wertspalte nicht ausgerichtet wird.

All i mit kommen kann, ist entweder:

A: die eingebaut TreeView Verwenden und manuell die Breite der Spaltennamen-Änderung auf dem Einrückungsniveau je so immer die Wert-Spalte ausgerichtet ist.

B. Verwenden Sie die integrierte ListView und erstellen Sie manuell eine TreeView, indem Sie zwischen den übergeordneten Elementen untergeordnete Elemente hinzufügen und auch deren Einrückung ändern.

Gibt es wirklich keinen besseren Weg?

Answer 1

Es gibt einen Weg, ich habe ein solches Tier in einer Silverlight-Anwendung

Sie müssen die Vorlage des TreeViewItem tweek. Die Standardvorlage erstreckt sich nicht über die Baumansicht.

Wenn Sie die Vorlage optimieren, können Sie sie vollständig erweitern, und Sie können dann Ihre DataTemplate (oder HierarchicalDataTemplate) auf ein Raster setzen. Wenn ich mich richtig erinnere, müssen Sie eine Kopie der Standardvorlage von TreeviewItem abrufen und die HorizontalAlignment-Eigenschaft des Elements "Header" in "Stretch" ändern, die rechte Spalte im Raster entfernen, aus der die Vorlage besteht, und die Option ändern Breite der Spalte, die das Element von "Auto" bis "*" enthält.

Es ist ziemlich einfach, mit Blend zu tun. Erstellen Sie ein TreeViewItem, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Steuerelemente bearbeiten (" Vorlage ")> Kopie bearbeiten ..." Dadurch wird eine Kopie der Standardvorlage für das TreeViewItem erstellt. Suchen Sie von dort aus den ContentPresenter namens PART_Header. Wenn Sie von diesem Punkt nach oben gehen, finden Sie das enthaltene Raster und ändern Sie ihre Spalten entsprechend meiner Erklärung (entfernen Sie die letzte Spalte, ändern Sie die zweite Spalte von "Auto" in "*"). Legen Sie in dem Style, der für das Objekt erstellt wurde, die HorizontalContentAlignment auf "Stretch" fest (es ist standardmäßig an etwas anderes gebunden).

Verwenden Sie den Stil, der als ItemContainerStyle in Ihrer Strukturansicht erstellt wurde. Sie können das von Ihnen erstellte TreeViewItem danach löschen.

Am Ende enden Sie mit einer Menge Ressourcen, von denen einer Ihrer Stil ist. Unten sehen Sie, wofür ich am Ende bin (sowohl der TreeViewItem-Stil als auch ein einfaches DataTemplate für meine Artikel mit einer Namen- und Wertespalte). Es werden andere Ressourcen erstellt, auf die die TreeViewItem-Stil-/Vorlagenreferenz verweist, die hier jedoch nicht angezeigt werden (weil sie bereits viel zu lang ist: p).

<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> 

Beachten Sie, dass Sie benötigen, um Ihre Rasterspalten enthalten die Zellen auf der rechten Seite, um sicherzustellen, wird die gleiche Breite immer sein, sonst werden Sie etwas seltsam (ich „Auto“ Spalten mit fester Breite Inhalt verwenden, und Ich füge eine leere "*" Spalte zwischen dem Namen und den "Zellen" hinzu, um sie rechts auszurichten.

Beachten Sie auch, dass diese Lösung das Erscheinungsbild der Baumansicht im Prinzip auf jedes Thema "einfriert", das Sie auf Ihrem Computer haben. (Auf einem Vista- und XP-Rechner sieht es genauso aus, je nachdem, welches Betriebssystem Sie bei der Änderung verwendet haben).