【问题标题】:How can i change the properties of a ListboxItem when it is selected?选择时如何更改 ListboxItem 的属性?
【发布时间】:2016-07-21 19:44:24
【问题描述】:

我对通用应用程序和 XAML 比较陌生,我正在尝试将样式应用于我的主页。到目前为止,我已经成功地为ListBoxItems 定义了一个样式,但是我找不到在选择项目时更改背景填充颜色的方法。

我知道在 WPF 中设置触发器并在触发事件时更改项目的属性非常简单,但是通用应用程序中没有触发器。

我的目标是在选中 ListBoxItem 时将其背景属性设置为 Gray,但是我找不到实现此目的的方法。我尝试使用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>

【问题讨论】:

    标签: xaml uwp


    【解决方案1】:
    <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>
    

    只需将代码放在您的页面中定义列表框的位置即可。我只是将样式设置为白色斜线。您可以提供所需的位置。

    【讨论】:

    • 那么,你想让我使用带有视觉状态的默认模板并调整它以适应吗?
    • 成功了,白色斜线在选中时变为灰色,但所有其他斜线都变为默认紫色
    • 我也刚刚发现这对了解很有用stackoverflow.com/questions/19320208/…
    【解决方案2】:

    你好,把这段代码放在app.xaml中,

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

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

    【讨论】:

    • “‘应用程序’类型不支持直接内容。”
    • 现在它告诉我属性资源只能设置一次
    【解决方案3】:
    <Application.Resources>
    
             <ResourceDictionary>
    
                   <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Gray" />
    
          </ResourceDictionary>
    
    
            </Application.Resources>
    

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

    【讨论】:

    • 查看我在问题上添加的屏幕截图
    • 据我所知...我只设置了一次“资源”属性
    • 只删除app.xaml中的所有样式
    • 删除所有样式?像这样:
    • schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VSC_QC1" RequestedTheme="Light">
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多