1

我进行了一些研究,并找到了一种为每个设置备用背景颜色的方法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 的整个高度上设置备用背景?

4

3 回答 3

1

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

于 2013-10-07T08:45:50.473 回答
0

在这里比赛有点晚了。我最近不得不为我正在做的一个项目做这件事。这种情况最好不要想太多,从最基本的角度来处理问题。我找到的最简单的答案是有一个具有可平铺图像刷背景的边框。它将自动拉伸以填充树视图。这是一个示例图像:

在此处输入图像描述

并且显示“空白”空间也具有交替颜色的图像。

在此处输入图像描述

我想这里的实际技巧是边框如何与 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 像素):

在此处输入图像描述

就是这样,女士们,先生们。很确定这是实现它的最简单和最优雅的方法。

于 2021-06-08T22:46:19.700 回答
-1

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

我有一些代码隐藏,如果底部的框以任何方式被触摸,则会导致顶部框被选中。

于 2017-01-19T18:14:27.570 回答