2
votes

Comment changer la couleur de surbrillance de la sélection d'un ListBoxItem dans UWP?

Je veux changer la couleur de surbrillance de la sélection d'un ListBoxItem entrez la description de l'image ici

Le volet d'affichage fractionné sur la gauche a une ListBox contenant les ListBoxItems.La couleur de sélection par défaut est le bleu et je souhaite la personnaliser mais je ne suis pas en mesure de la modifier.

Je n'ai trouvé aucune propriété pour modifier la couleur de surbrillance de la sélection d'un ListBoxItem dans UWP.


1 commentaires

pour le codage de style futur, vous pouvez simplement faire glisser et déposer le contrôle et faire un clic droit sur le contrôle -> Modifier le modèle -> Modifier la copie -> appuyer sur ok et maintenant vous pouvez voir que le style sera ajouté au code xaml et maintenant vous pouvez modifier ce modèle comme vous le souhaitez :) maintenant, il vous suffit de copier ce code de style et de le coller dans votre fichier Appx.xaml et de l'utiliser dans toutes les applications avec la touche :)


3 Réponses :


2
votes

Vous pouvez personnaliser le style ListViewItem de ListView , qui se trouve dans generic.xaml , situé dans C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic\generic.xaml . Le chemin peut être différent, mais vous pouvez rechercher.

Dans generic.xaml , vous pouvez voir le modèle de tous les contrôles. Recherchez ensuite <Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle"> , copiez tout ce style et <Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle"> un dictionnaire de ressources appelé ListViewItem.xaml . Le fichier devrait ressembler à:

<ListView ItemContainerStyle="{StaticResource ListViewItemRevealStyle}">

Dans ce fichier, recherchez SelectedBackground , si vous voulez changer l'arrière-plan en orange, écrivez SelectedBackground = "Orange". Notez également une autre propriété appelée SelectedPointerOverBackground , vous pouvez également modifier la valeur comme vous le souhaitez.

Après tout cela, ajoutez ListViewItem.xaml à App.xaml , afin que l'application puisse reconnaître votre propre style. L' App.xaml devrait aimer ceci:

<Application
    x:Class="App2.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ListViewItem.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Modifiez ensuite le style de votre élément ListView en

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="IsHoldingEnabled" Value="True" />
        <Setter Property="Padding" Value="12,0,12,0" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
        <Setter Property="AllowDrop" Value="False" />
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="FocusVisualMargin" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource ListViewItemCheckMode}"
                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Selected" />

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Root.RevealBorderThickness" Value="0" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                    </ListViewItemPresenter>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Bingo, appuyez sur F5 pour construire et exécuter.

Les étapes ci-dessus peuvent être un peu compliquées, mais cela en vaut la peine. Plus tard, vous voudrez peut-être changer le style d'un TextBox ou autre chose, vous pouvez également suivre ce tutoriel.


2 commentaires

Bro j'ai demandé ListBox


Oh, mon ....... Mais pour ListBoxItem, vous pouvez également suivre les étapes ci-dessus et faire attention à <VisualState x: Name = "Pressed"> <VisualState x: Name = "Selected"> <VisualState x: Name = "SelectedUnfocused"> <VisualState x: Name = "SelectedPointerOver"> <VisualState x: Name = "SelectedPressed">, tout comme Faywang - MSFT l'a écrit.



3
votes

Vous pouvez changer le style de ListBoxItem pour changer la couleur de surbrillance de la sélection.Dans le style, vous devez changer tous les états qui contiennent le mot clé `` Selected '' pour changer la propriété Fill à la couleur que vous voulez (je change la couleur en rouge comme au dessous de).

<ListBox Width="100" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">

Définissez ensuite le style sur ListBox.

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="Padding" Value="{StaticResource ListBoxItemPadding}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid.Resources>
                        <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                            <Setter Property="FontFamily" Value="XamlAutoFontFamily"/>
                            <Setter Property="FontWeight" Value="SemiBold"/>
                            <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"/>
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <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}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


1 commentaires

bro, j'ai ajouté ceci à un dictionnaire de ressources mais j'obtiens des erreurs disant que la valeur spécifiée ne peut pas être attribuée à toutes les balises, y compris la balise de style



0
votes

Le moyen le plus simple est de skinner vos listboxes est de définir les pinceaux correspondants dans app.xaml, ajoutez simplement quelque chose comme ce qui suit dans votre élément Application:

<Application.Resources>
    <ResourceDictionary>            
        <!--
        To workout the names of the brushes you need to lookup the relevant control in the following file:
        C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic\generic.xaml
        For instance ListBoxItem
        -->            
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <!-- Selected & SelectedUnfocused -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="#11FFFFFF" />
                <SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="#11FFFFFF" />
                <!-- SelectedPointerOver -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="#11FFFFFF" />
                <SolidColorBrush x:Key="SystemControlHighlightAltBaseHighBrush" Color="#11FFFFFF" />
                <!-- SelectedPressed -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="#11FFFFFF" />
            </ResourceDictionary>

            <ResourceDictionary x:Key="Light">
                <!-- Selected & SelectedUnfocused -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="#11000000" />
                <SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="#11000000" />
                <!-- SelectedPointerOver -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="#11000000" />
                <SolidColorBrush x:Key="SystemControlHighlightAltBaseHighBrush" Color="#11000000" />
                <!-- SelectedPressed -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="#11000000" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>


0 commentaires