Question

我对通用应用程序和XAML相对较新，我正在尝试将样式应用到我的主页面。到目前为止，我已成功为ListBoxItem s定义了一种样式，但是当我选择一个项目时，我找不到改变背景填充颜色的方法。

我知道在WPF中设置触发器并在触发事件时更改项目的属性非常简单，但是在Universal Apps中无法使用触发器。

我的目标是在选中时将ListBoxItem的背景属性设置为灰色，但我无法找到实现此目的的方法。我尝试使用VisualStateManager，但我不确定它是如何工作的，我还没有将有效的视觉状态应用于某些东西。

任何人都可以解释如何使用VisualStates，甚至建议另一种方法来执行此操作吗？到目前为止，这是我的代码供参考：

<Application
    x:Class="VSC_QC1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VSC_QC1"
    RequestedTheme="Light">
    <Application.Resources>
        <Style x:Key="ListBoxStyle" TargetType="ListBox">
            <Setter Property="FontFamily" Value="Tahoma"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="2" />
        </Style>
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#00b300" Offset="0" />
                        <GradientStop Color="#107028" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

这是我使用控制模板的ListBox本身（在MainPage.xaml中）的代码：

        <ListBox
        x:Name="LightSelector"
        Grid.Column="2"
        Grid.Row="0"
        Width="300"
        Style="{StaticResource ListBoxStyle}"
        FontSize="30" Background="#FFC8C8C8"
        VerticalAlignment="Top"
        HorizontalAlignment="Center"
        SelectionChanged="LightSelector_SelectionChanged">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter          
                                PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"       
                                SelectedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"      
                                SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                                PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                                SelectedPressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBoxItem>White flood</ListBoxItem>
        <ListBoxItem>UV flood</ListBoxItem>
        <ListBoxItem>IR flood</ListBoxItem>
        <ListBoxItem>White oblique</ListBoxItem>
        <ListBoxItem>IR oblique</ListBoxItem>
        <ListBoxItem>Coaxial</ListBoxItem>
        <ListBoxItem>Backlight panel</ListBoxItem>
    </ListBox>

Answer 1

您好，只需将此代码放入app.xaml，

即可

**<SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Gray" />**

当您在列表框中选择任何项目时，您的列表框项目颜色将更改为gary。

Answer 2

<page>

<Page.Resources>
        <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Padding" Value="12,11,12,13"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid x:Name="LayoutRoot" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <Grid.Resources>
                                <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                    <Setter Property="FontFamily" Value="Segoe UI"/>
                                    <Setter Property="FontWeight" Value="SemiBold"/>
                                    <Setter Property="FontSize" Value="15"/>
                                    <Setter Property="TextWrapping" Value="Wrap"/>
                                    <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
                                    <Setter Property="TextLineBounds" Value="Full"/>
                                    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
                                </Style>
                                <Style x:Key="BodyContentPresenterStyle" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
                                    <Setter Property="FontWeight" Value="Normal"/>
                                    <Setter Property="FontSize" Value="15"/>
                                </Style>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="PressedBackground" Fill="Transparent" Control.IsTemplateFocusTarget="True"/>
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListBox
        x:Name="LightSelector"
        Grid.Column="2"
        Grid.Row="0"
        Width="300"
        FontSize="30" Background="#FFC8C8C8"
        VerticalAlignment="Top"
        HorizontalAlignment="Center"
      >



            <ListBoxItem>White flood</ListBoxItem>
            <ListBoxItem>UV flood</ListBoxItem>
            <ListBoxItem>IR flood</ListBoxItem>
            <ListBoxItem Style="{StaticResource ListBoxItemStyle1}">White oblique</ListBoxItem>
            <ListBoxItem>IR oblique</ListBoxItem>
            <ListBoxItem>Coaxial</ListBoxItem>
            <ListBoxItem>Backlight panel</ListBoxItem>

        </ListBox>
    </Grid>
</page>

只需将代码放在您的页面列表框defiene.I只是纯白色斜纹样式。您可以提供您想要的位置。

Answer 3

<Application.Resources>

         <ResourceDictionary>

               <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Gray" />

      </ResourceDictionary>


        </Application.Resources>

在app.xaml中使用此代码，也请点击此链接 Change background color of selected item in listbox

如何在选择ListboxItem时更改它的属性？

3 个答案: