Цвет фона ListBox (XAML/WinRT/Metro)

Я пытаюсь изменить цвет фона на "ListBox" на странице WinRT (XAML). Когда я использую свойство "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, хотя это возможно?

Ответ 1

Используйте Visual Studio Blend 2012 и отредактируйте элемент ItemTemplate ListBox или его шаблон, который создаст печатную копию в XAML, где вы сможете отредактировать ее свойства.

Ответ 2

Вы можете просто поместить некоторые переопределения цветных кистей в свой файл ресурсов XAML, чтобы переопределить цвета шаблона управления ListBox по умолчанию.

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

Ответ 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">Menu Item 1</ListBoxItem> <ListBoxItem Background="LightGray">Menu Item 2</ListBoxItem> <ListBoxItem Background="LightGray">Menu Item 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>

Вышеприведенный образец заменит фон вашего контейнера Box списка на черный, если фокус установлен на ListBox.

Ответ 4

Если вам нужна дополнительная помощь по настройке цветов Items в ListBox, ListView или GridView, все они работают по одному и тому же принципу, просто обновите свойства TargetType Я бы рекомендовал взглянуть на сообщение в блоге Vito DeMercurio Стилизация GridViewItem в WinRT