TreeView с более чем одной колонки

Question

У меня есть базовый класс, который выглядит примерно так:

public class Item 
{ 
    private string  name; 
    private bool  visible; 
    private double  value; 
    private Item  parent; 
    private List<Item> children = new List<Item>(); 
    … 
} 

У меня есть список вещей, которые мне нужно отобразить в виде дерева. Для каждого пункта я должен отобразить следующие поля:

• «видимых» в виде флажка
«имя»
• как TextBlock
• «значение» в качестве слайдера

Я хочу сделайте это с помощью MVVM, поэтому я определил следующие классы «ItemViewModel» и «ItemCollectionViewModel», к которым я привяжу свое дерево.

Я попытался следующий код XAML:

<TreeView ItemsSource="{Binding ItemViewModelList}"> 
    <TreeView.ItemContainerStyle> 
     <Style TargetType="{x:Type TreeViewItem}"> 
      <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> 
      <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> 
      <Setter Property="FontWeight" Value="Normal" /> 
      <Style.Triggers> 
       <Trigger Property="IsSelected" Value="True"> 
        <Setter Property="FontWeight" Value="Bold" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </TreeView.ItemContainerStyle> 

    <TreeView.ItemTemplate> 
     <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition SharedSizeGroup="VisibiltyCol" /> 
        <ColumnDefinition SharedSizeGroup="NameCol" /> 
        <ColumnDefinition SharedSizeGroup="ValueCol" /> 
       </Grid.ColumnDefinitions> 
       <CheckBox Grid.Column="0" IsChecked="{Binding Visible}" Margin="5" /> 
       <TextBlock Grid.Column="1" Text="{Binding Name}" Margin="5" /> 
       <Slider Grid.Column="2" Value="{Binding Value}" Width="100" Margin="10, 0, 0, 0" Maximum="1" /> 
      </Grid> 

     </HierarchicalDataTemplate> 
    </TreeView.ItemTemplate> 

</TreeView> 

Это работает отлично, за исключением того, что я хочу, чтобы все ползунки быть правым ниже друг друга, и они не являются. (Только те, кто находится на одном уровне иерархии, появляются под друг другом).

Другими словами, мне нужно дерево для отображения ползунков (представляющих свойство «Значение») в другом столбце.

Может кто-нибудь помочь?

Answer 1

• Сделать сетки растягиваться (так horizontalalignment.stretch), сделать элементы в TreeView участке, а также (horizontalcontentalignment.stretch), все, что нужно, чтобы сделать это. Затем третий столбец имеет общий размер столбца.
• Вам понадобится this custom TreeViewItem style. Также прилагается ниже.

Тогда TreeView будет выглядеть следующим образом.

<TreeView HorizontalContentAlignment="Stretch" Name="DTV" ItemsSource="{Binding DTVIList}" Grid.Row="1" 
       ItemContainerStyle="{StaticResource TreeViewItemStyle1}"> 
     <TreeView.ItemTemplate> 
      <HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
       <Grid HorizontalAlignment="Stretch"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="1*"/> 
         <ColumnDefinition Width="100" SharedSizeGroup="SliderColumn"/> 
        </Grid.ColumnDefinitions> 
        <CheckBox Grid.Column="0" IsChecked="{Binding Visible}" Margin="5" /> 
        <TextBlock Grid.Column="1" Text="{Binding Name}" Margin="5" /> 
        <Slider Grid.Column="2" Value="{Binding Value}" Width="100" Margin="10, 0, 0, 0" Maximum="1" />        
       </Grid> 
      </HierarchicalDataTemplate> 
     </TreeView.ItemTemplate> 
    </TreeView> 

Это должно быть сделано.

TreeViewStyle прилагается:

<Style x:Key="TreeViewItemFocusVisual"> 
    <Setter Property="Control.Template"> 
    <Setter.Value> 
     <ControlTemplate> 
     <Rectangle/> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

<PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/> 

<Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="Focusable" Value="False"/> 
    <Setter Property="Width" Value="16"/> 
    <Setter Property="Height" Value="16"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ToggleButton}"> 
     <Border Width="16" Height="16" Background="Transparent" Padding="5,5,5,5"> 
      <Path x:Name="ExpandPath" Fill="Transparent" Stroke="#FF989898" Data="{StaticResource TreeArrow}"> 
      <Path.RenderTransform> 
       <RotateTransform Angle="135" CenterX="3" CenterY="3"/> 
      </Path.RenderTransform> 
      </Path> 
     </Border> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/> 
      <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/> 
      </Trigger> 
      <Trigger Property="IsChecked" Value="True"> 
      <Setter Property="RenderTransform" TargetName="ExpandPath"> 
       <Setter.Value> 
       <RotateTransform Angle="180" CenterX="3" CenterY="3"/> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/> 
      <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
    <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="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" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
      <ContentPresenter x:Name="PART_Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 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>