我试图让“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>
最佳答案
要实现此目的,您需要使用 TreeView 的 ItemContainerStyle 更改 TreeviewItem 的 Control 模板(这是应用于 TreeView 根中任何项目的样式)。
默认的TreeViewItem没有拉伸(stretch),所以它不会一直向右延伸。 当您设置 Header 时,它位于 TreeViewItem 内部,因此无法超出它。
我不会发布整个样式,因为它太长了。
以下是在 Blend 中执行的操作: 选择您的 TreeViewItem,右键单击并选择“编辑控件部件/编辑副本”。将样式保存在您想要的任何位置。
现在,在模板中,展开内容并找到“Bd”元素,它是一个边框。将其 RowSpan 属性更改为“2”。
最后,将项目的“HorizontalContentAlignment”属性设置为“Stretch”(在项目上或通过样式,如果您需要将其应用到多个节点)。
您的项目现在应该具有正确的宽度。 现在,这仅适用于您选择的项目。如果您希望它适用于添加到 TreeView 的任何项目,则需要将 TreeView 的“ItemContainerStyle”更改为新创建的样式,并删除 Blend 放置在 TreeViewItem 上的样式。
最后但并非最不重要的一点是,您需要将 TreeViewItem 的 ItemContainerStyle 设置为相同的样式,以便其子项也一直延伸,依此类推。
最后,使用您的示例和第一项上的子节点:
<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>
关于wpf - TreeViewItem.Header 内有 Grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/668393/