WPF Treeview с фиксированной шириной столбцов - PullRequest
8 голосов
/ 07 апреля 2009

Я хочу создать микс из дерева и списка. Я хочу иметь 2 столбца. В левом столбце я хочу рекурсивное древовидное представление, а в правом столбце должна отображаться информация об элементах из левого столбца. Давайте назовем левый столбец Name и правый столбец Value. Проблема заключается в том, что при расширении древовидного представления уровень отступа изменяется, а столбец Value становится невыровненным.

Все, что я могу придумать, это либо:

A: Используйте встроенный TreeView и вручную изменяйте ширину столбца Name в зависимости от уровня отступа, чтобы столбец значений всегда выравнивался.

B. Используйте встроенный ListView и вручную создайте TreeView, добавляя дочерние элементы между родительскими элементами, а также изменяйте их отступ.

Неужели нет лучшего способа?

1 Ответ

6 голосов
/ 07 апреля 2009

Есть способ, у меня такой зверь в приложении Silverlight

Вам необходимо настроить шаблон элемента дерева. Шаблон по умолчанию не распространяется полностью на древовидную структуру.

Изменяя шаблон, вы можете заставить его расширяться до конца, а затем вы можете установить свой DataTemplate (или HierarchicalDataTemplate) в сетку. Если я правильно помню, вам нужно получить копию шаблона по умолчанию TreeviewItem и изменить свойство HorizontalAlignment элемента «Заголовок» на «Растянуть», удалить крайний правый столбец в сетке, которая составляет шаблон, и изменить ширина столбца, содержащего элемент от «Авто» до «*».

Это довольно легко сделать, используя смесь. Создайте TreeViewItem, щелкните по нему правой кнопкой мыши и выберите «Редактировать элементы управления (« Шаблон »)> Изменить копию ...» Это создаст копию шаблона по умолчанию для TreeViewItem. Оттуда найдите ContentPresenter с именем PART_Header. Поднявшись от этого, найдите сетку и измените его столбцы в соответствии с моим объяснением (удалите последний столбец, измените второй столбец с «Авто» на «*»). В стиле, созданном для элемента, задайте для HorizontalContentAlignment значение «Растянуть» (по умолчанию оно привязано к чему-то еще).

Используйте стиль, который был создан как ItemContainerStyle в вашем дереве. Вы можете удалить TreeViewItem, который вы создали сначала после этого.

В конце концов, вы должны получить кучу ресурсов, одним из которых является ваш стиль. См. Ниже, что я получаю (и стиль TreeViewItem, и базовый шаблон данных для моих элементов со столбцами имени и значения). Существуют и другие ресурсы, которые ссылаются на стиль / шаблон 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>

Обратите внимание, что вам нужно убедиться, что столбцы сетки, содержащие ячейки справа, всегда будут одинаковой ширины, в противном случае у вас будет что-то странное (я использую столбцы "Авто" с содержимым фиксированной ширины и добавляю пробел «*» столбец между именем и «ячейками» для выравнивания по правому краю).

Также обратите внимание, что это решение в основном «замораживает» внешний вид дерева для любой темы, имеющейся на вашем компьютере. (Он будет выглядеть одинаково на компьютерах с Vista и XP, в зависимости от ОС, которую вы использовали при внесении изменений).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...