在这里比赛有点晚了。我最近不得不为我正在做的一个项目做这件事。这种情况最好不要想太多,从最基本的角度来处理问题。我找到的最简单的答案是有一个具有可平铺图像刷背景的边框。它将自动拉伸以填充树视图。这是一个示例图像:
并且显示“空白”空间也具有交替颜色的图像。
我想这里的实际技巧是边框如何与 TreeView 的 ItemsPresenter 配对。我们必须把它们都放在一个网格中。查看以下样式以了解我的意思:
<Style TargetType="{x:Type TreeView}">
<Setter Property="BorderBrush" Value="#363636" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.PanningMode" Value="Both" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeView}">
<Border
x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ScrollViewer
x:Name="_tv_scrollviewer_"
Padding="{TemplateBinding Padding}"
Background="Transparent"
CanContentScroll="false"
Focusable="false"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Style="{x:Null}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<Grid>
<Border>
<Border.Background>
<ImageBrush
ImageSource="/Voidwalker Engine Editor;component/Editor/Resources/Graphics/Editor/TreeView_Alternation.png"
TileMode="Tile"
Viewport="0,0,32,40"
ViewportUnits="Absolute" />
</Border.Background>
</Border>
<ItemsPresenter />
</Grid>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Trigger>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
<Setter TargetName="_tv_scrollviewer_" Property="CanContentScroll" Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
还有一张展示风格中重要部分的图片:
因为这两个控件是配对的,所以它们的大小相同,因此平铺会自动进行。最后,这是边框使用的实际图像(您可能需要不同的尺寸;我选择每行高 20 像素):
就是这样,女士们,先生们。很确定这是实现它的最简单和最优雅的方法。