TreeViewItem.Header с сеткой внутри

Я пытаюсь сделать так, чтобы «Img» появлялся в конце TreeViewItem.Header (как можно ближе к правой стороне элемента управления TreeView), но не то, что я пробую, ширина заголовка всегда меньше, чем размер TreeView, и, конечно же, «Img» появляется где-то в середине элемента управления. Вероятно, это очень новый вопрос; Я только начинаю изучать WPF.

<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="3,3,3,3" Name="treeView1" Width="300">
    <TreeViewItem HorizontalAlignment="Stretch">
        <TreeViewItem.Header>
            <Grid HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition  />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="30" />
                </Grid.ColumnDefinitions>

                <Label Grid.Column="0" Grid.Row="0">General</Label>
                <Label Grid.Column="1" Grid.Row="0">Img</Label>
            </Grid>
        </TreeViewItem.Header>
    </TreeViewItem>
</TreeView>

person Sergej Andrejev    schedule 20.03.2009    source источник


Ответы (2)


Для этого вам необходимо изменить шаблон элемента управления TreeviewItem с помощью ItemContainerStyle TreeView (это стиль, который применяется к любому элементу в корне древовидного представления).

TreeViewItem по умолчанию не растягивается, поэтому он не растягивается полностью вправо. Когда вы устанавливаете заголовок, он находится внутри TreeViewItem и поэтому не может выходить за его пределы.

Я не буду публиковать весь стиль, потому что это будет слишком долго.

Вот что нужно сделать в Blend: выберите свой TreeViewItem, щелкните правой кнопкой мыши и выберите «Редактировать элементы управления / Редактировать копию». Сохраните стиль, где хотите.

Теперь в шаблоне разверните материал и найдите элемент «Bd», который является рамкой. Измените его свойство RowSpan на «2».

Наконец, установите для свойства «HorizontalContentAlignment» вашего элемента значение «Растянуть» (либо для элемента, либо для стиля, если вам нужно применить это к нескольким узлам).

Теперь ваш предмет должен иметь правильную ширину. Теперь это применимо только к выбранному вами элементу. Если вы хотите, чтобы это работало для любого элемента, который вы добавляете в древовидное представление, вам необходимо изменить «ItemContainerStyle» Treeview на вновь созданный стиль и удалить стиль, который Blend поместил в TreeViewItem.

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

Итак, в конце с вашим примером и дочерним узлом на первом элементе:

<Grid x:Name="LayoutRoot">
<TreeView Margin="3,3,3,3" Name="treeView1" Width="300" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
    <TreeViewItem.Header>
        <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0">General</Label>
            <Label Grid.Column="1" Grid.Row="0">Img</Label>
        </Grid>
    </TreeViewItem.Header>
    <TreeViewItem>
     <TreeViewItem.Header>
        <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0">General</Label>
            <Label Grid.Column="1" Grid.Row="0">Img</Label>
        </Grid>
    </TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>

TreeViewItemStyle1 - это стиль, который Blend создал для вас.

РЕДАКТИРОВАТЬ

как и просили, вот полный стиль, сгенерированный смешением и измененный. Он длинный, потому что по сути представляет собой копию встроенного стиля с небольшими изменениями.

<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 Fill="Transparent" Stroke="#FF989898" x:Name="ExpandPath" 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" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="2">
                                <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>
person Denis Troller    schedule 21.03.2009
comment
Не могли бы вы выложить стиль или хотя бы сеттер. Я не нахожу элемента Bd, о котором вы говорите - person Sergej Andrejev; 21.03.2009

См. Этот пост для двух образцов. Я только что создал их сегодня.

Выделите всю строку TreeViewItem в WPF

person bendewey    schedule 21.03.2009
comment
Это тоже было полезно, но Денис был первым. - person Sergej Andrejev; 21.03.2009