ListBox 背景颜色 (XAML/WinRT/Metro)

Question

我正在尝试更改WinRT页面（XAML）上“ListBox”的背景颜色。当我使用“Background”属性时，在控件没有焦点时，它会按照我想要的方式更改背景。但是当它得到焦点时，它会变为白色，我无法找出如何覆盖它。

我的问题是，我如何强制ListBox的背景始终是灰色，无论是否被选中/有焦点？

XAML #1：

    <ListBox x:Name="ListBoxMenu" Background="LightGray" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0">
        <ListBoxItem>Menu Item 1</ListBoxItem>
        <ListBoxItem>Menu Item 2</ListBoxItem>
        <ListBoxItem>Menu Item 3</ListBoxItem>
    </ListBox>

XAML #2（同时设置每个项）：

    <ListBox x:Name="ListBoxMenu" Background="LightGray" Grid.Row="0" Grid.Column="0" Height="124" VerticalAlignment="Top">
        <ListBoxItem Background="LightGray">Menu Item 1</ListBoxItem>
        <ListBoxItem Background="LightGray">Menu Item 2</ListBoxItem>
        <ListBoxItem Background="LightGray">Menu Item 3</ListBoxItem>
    </ListBox>

作为临时解决方案，我将ListBox仅设置为硬编码高度，然后在该列上使用边框以LightGray填充其余空间。不过我真的很想始终设置ListBox的背景颜色，这可行吗？

- b.pell

---

你能提供一些代码片段来展示你得到的解决方案吗？我也遇到了同样的问题，但是无法解决。 - SachiraChin

根据您的喜好，如果只有一个或两个事件触发背景更改，您可以在事件处理程序中简单地添加 ListBoxMenu.Background = Colors.Transparent。 - Hong

Answer 1

你可以在XAML资源文件中添加一些颜色笔刷覆盖，以覆盖默认的ListBox控件模板颜色。

<SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="Transparent" />

- LongZheng

---

只要您希望所有的ListBox都具有相同的颜色，这是一个不错的解决方案。 - Andras Csehi

我认为这在Windows 8中不再适用了，只能在Win 7中使用。 - user3595338

Answer 2

使用Visual Studio Blend 2012编辑ListBox的ItemTemplate或其模板，这将在XAML中创建一个硬拷贝，您可以编辑其属性。

- user1146887

---

谢谢，让我去尝试一下。 - b.pell

什么是Visual Blender？你能提供一个链接吗？ - Filip Skakun

我认为他指的是Visual Studio中的Blend。我可以右键单击ListBox并使用“编辑样式”来创建一个硬拷贝，然后进行编辑。我跳过了Blend，因为我能够修改它在那里提供的模板。 - b.pell

Answer 3

我遇到了同样的问题，我使用了Visual Studio Blend的帮助。希望这可以帮到你。

为ListBoxMenu添加样式，如下所示:

<ListBox x:Name="ListBoxMenu" Style="{StaticResource ListBoxStyle1}" Background="LightGray" Grid.Row="0" Grid.Column="0" Height="124" VerticalAlignment="Top"> <ListBoxItem Background="LightGray">菜单项1</ListBoxItem> <ListBoxItem Background="LightGray">菜单项2</ListBoxItem> <ListBoxItem Background="LightGray">菜单项3</ListBoxItem> </ListBox>

然后按照以下方式指定样式：

<Style x:Key="ListBoxStyle1" TargetType="ListBox">
        <Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
        <Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="TabNavigation" Value="Once"/>
        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppBarBackgroundThemeBrush}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ScrollViewer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ScrollViewer x:Name="ScrollViewer">
                        <ItemsPresenter/>
                    </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当焦点设置在ListBox上时，上述示例将替换您的ListBox容器的背景为黑色。

- John Royceton Arthur

Answer 4

如果您需要更多关于自定义 ListBox、ListView 或 GridView 中的 Items 颜色方面的帮助，它们都遵循同样的原则，只需确保更新 TargetType 属性，我建议查看 Vito DeMercurio 的博客文章“在 WinRT 中设置 GridViewItem 样式”。请注意，保留 HTML 标签。

- Nico