Question

我做了一些研究，并找到了为每个ListBoxItem设置备用背景颜色的方法，但即使列表框为空，我希望该背景继续。

<Style x:Key="ListBoxStyle" TargetType="ListBox">
    <Setter Property="Width" Value="288"></Setter>
    <Setter Property="BorderBrush" Value="#D2D2D2"></Setter>
    <Setter Property="BorderThickness" Value="1"></Setter>
    <Setter Property="Margin" Value="1,0,1,0"></Setter>
    <Setter Property="AlternationCount" Value="2"></Setter>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Height" Value="27"></Setter>
    <Setter Property="FontWeight" Value="Medium"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Foreground" Value="#333333"/>
    <Style.Triggers>
        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
            <Setter Property="Background" Value="White"></Setter>
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
            <Setter Property="Background" Value="#19000000"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>

是否可以在ListBox的整个高度上设置备用背景？

Answer 1

据我所知，正是Background项启用了这个，所以我会说不，这是不可能的。我可以想象你可以产生这种效果的唯一方法是将空项添加到ListBox中。但是我强烈建议你不要这样做，因为这些空白的项目仍然可以选择，这可能会让用户感到困惑。

Answer 2

我之前通过创建两个几乎相同的控件并重叠它们来完成此操作。底部控件具有完全相同的布局属性，并且绑定到任意大的空行集。同一个框的顶部版本绑定到实际数据集。不同之处在于顶部控件的背景是透明的，因此空行集显示直到to box已填满。因此，任何大小调整行为都会以可预测的方式影响所有内容。

我有一些代码隐藏，如果以任何方式触及底部的话，会导致选择顶部框。

Answer 3

这里的游戏有点晚了。我最近不得不为我正在做的一个项目做这件事。处理这种情况最好不要想太多，从最基本的角度处理问题。我发现的最简单的答案是有一个具有平铺图像刷背景的边框。它会自动拉伸以填充树状视图。这是一个示例图片：

还有一张图片显示“空”空间也有交替颜色。

我想这里的实际技巧是 Border 如何与 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 像素）：

就是这样，女士们先生们。很确定这是实现它的最简单、最优雅的方式。

备用背景ListBox空行颜色？

3 个答案: