固定幅の列を持つWPFツリービュー

Question

ツリービューとリストビューの組み合わせを作成したいと思います。 2つの列が必要です。 左の列には、再帰的なツリービューが必要です。右の列には、左の列の項目に関する情報が表示されます。 左の列の名前と右の列の値を呼び出してみましょう。 問題は、ツリービューを展開するとインデントレベルが変化し、値列がアライメントされなくなることです。

私が思い付くことができますすべてがどちらかにある：

A：TreeViewコントロールに建てられ、手動で値列が常に揃っているので、インデントレベルに応じて、名前、列の幅を変更する使用してください。

B.組み込みのListViewを使用し、親アイテム間に子アイテムを追加して手動でTreeViewを作成し、これらのインデントも変更します。

本当に良い方法はありますか？方法は

Answer 1

があり、私はあなたがツリービューアイテムのテンプレートをtweekする必要がSilverlightアプリケーション

で、このような獣を持っています。 デフォルトのテンプレートは、ツリービュー全体にわたって拡張されていません。

テンプレートをtweekingすることで、テンプレート全体を拡張し、DataTemplate（またはHierarchicalDataTemplate）をグリッドに設定することができます。正しく覚えていれば、TreeviewItemのデフォルトテンプレートのコピーを取得し、 "Header"要素のHorizo​​ntalAlignmentプロパティを "Stretch"に変更し、テンプレートを構成するグリッドの右端の列を削除し、要素を含む列の幅を "Auto"から "*"に変更します。

ブレンドの使用はかなり簡単です。 TreeViewItemを作成し、それを右クリックして "Edit Control Parts（" Template "）>コピーを編集..."を選択します。 これにより、TreeViewItemのデフォルトテンプレートのコピーが作成されます。ここから、PART_Headerという名前のContentPresenterを見つけます。これを見て、入っているグリッドを見つけ、 私の説明と一致するように列を変更します（最後の列を削除し、2番目の列を「*」から「*」に変更します）。 アイテムに対して作成されたスタイルでは、Horizo​​ntalContentAlignmentを「ストレッチ」に設定します（デフォルトでは他のものにバインドされています）。

ツリービューでItemContainerStyleとして作成されたスタイルを使用します。 最初に作成したTreeViewItemを削除することができます。

最後に、たくさんのリソースがありますが、そのうちの1つはあなたのスタイルです。私が最後に終わるもの（TreeViewItemスタイルと名前と値の列を持つアイテムの基本的なDataTemplateの両方）については、以下を参照してください。 TreeViewItemスタイル/テンプレート参照が作成された他のリソースがありますが、ここには表示されていません（既に長すぎます：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> 

あなたが右の細胞を含む、あなたのグリッド列が常に同じ幅になるようにする必要があり注、そうでなければ、私は固定幅のコンテンツを「オート」の列を使用する奇妙な何かを（持っているだろう、と名前と「セル」の間に空白の「*」列を追加して右揃えします。

また、この解決策は、マシン上のテーマに関係なく、ツリービューの外観を基本的に「フリーズ」することにも注意してください。 （これは、修正を行う際に使用したOSに基づいて、VistaマシンとXPマシンで同じように見えます）。