首页 > 解决方案 > 如何更改 TreeView 的切换

问题描述

我有一个树视图工作,它有一个可以扩展其内容的切换按钮。当我这样做时,由于切换扩展宽度,每一列都离我想要的位置太远了。我想覆盖该行为,但我不知道如何,我知道这与定义 TreeView 的控件模板有关?

这是我的代码

c#

Class MyList
{
    double someDouble;
    double somestring;
    souble anotherString;
    bool thisOnesABool;
}

Class MyContainer
{
    string headerText1;
    string headerText2;

    List<MyList> SomeList;
}

List<MyContainer> SomeContainerInCodeBehind = new List<MyContainer>();

WPF

<UserControl.Resources>
    <DataTemplate x:Key="level2">
        <Grid>
            //the content of 'MyList'
        </Grid>
    </DataTemplate>

    <HierarchicalDataTemplate x:Key="level1"
                              ItemsSource="{Binding SomeListWithinContainer}"
                              ItemTemplate="{StaticResource level2}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Text="{Binding HeaderText}" />
            <TextBox Grid.Column="1" Text="{Binding MoreHeaderText}" />
        </Grid>
    </HierarchicalDataTemplate>
</UserControl.Resources>

<Grid>
    <TreeView Name="TheTreeView"
              Grid.Row="1"
              ItemTemplate="{StaticResource level1}"
              ItemsSource="{Binding SomeContainerInCodeBehind}">
    </TreeView>
</Grid>

标签: c#wpftreeview

解决方案


为了更改扩展器(或扩展的子项)的位置,您必须覆盖ControlTemplate.TreeViewItem

以下Style内容取自Microsoft Docs:TreeView Styles and Templates并缩短以显示相关代码。访问链接以获取完整代码。

<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
  <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>
          <VisualStateManager.VisualStateGroups>
            ...
          </VisualStateManager.VisualStateGroups>

          <!-- Use Margin to modify the position of the "Expander" ToggleButton -->
          <ToggleButton x:Name="Expander"
                        Style="{StaticResource ExpandCollapseToggleStyle}"
                        ClickMode="Press"
                        IsChecked="{Binding IsExpanded, 
            RelativeSource={RelativeSource TemplatedParent}}"/>

          <Border x:Name="Bd"
                  Grid.Column="1"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">

            <!-- Modify e.g. Margin to  change the position of the Header (parent item) -->
            <ContentPresenter x:Name="PART_Header"
                              ContentSource="Header"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
          </Border>

          <!-- Modify e.g. using Margin to reposition the expanded child items -->
          <ItemsPresenter x:Name="ItemsHost"
                          Grid.Row="1"
                          Grid.Column="1"
                          Grid.ColumnSpan="2"
                          Visibility="Collapsed" />
        </Grid>

         ...


      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

推荐阅读