wpf - 具有多列的 TreeView

Question

我有一个看起来像这样的基础类:

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

我有一个需要在 TreeView 中显示的项目列表。对于每个项目，我需要显示以下字段:

• 作为复选框“可见”
• 'name'作为文本 block
• “值”作为 slider

我想通过使用 MVVM 来做到这一点，所以我定义了以下类“ItemViewModel”和“ItemCollectionViewModel”，我将绑定(bind)我的 TreeView 。

我尝试了以下 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>

它工作正常，除了我希望所有 slider 都在彼此的正下方，但它们不是。 (只有那些处于同一层次结构的人会出现在彼此的正下方)。

换句话说，我需要树在另一列中显示 slider (代表“值”属性)。

有人可以帮忙吗？

Answer 1

• 使网格拉伸(stretch)(因此 horizo​​ntalalignment.stretch)，使 TreeView 中的项目也拉伸(stretch)(horizo​​ntalcontentalignment.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>