CODEWITHSUNDEEP
xamluwp
Aric
Aric

Reputation: 319

How can i change the properties of a ListboxItem when it is selected?

I am relatively new to universal apps and XAML, and I am trying to apply styles to my main page. So far I have successfully defined a style for ListBoxItems, however I cannot find a way to change the background fill colour when an item is selected.

I know that in WPF it is very simple to set a trigger and change the properties of the item when an event is triggered, however triggers are not available in Universal Apps.

My goal is to set the background property of a ListBoxItem to Gray when it is selected, however I cannot find a way to accomplish this. I tried using VisualStateManager, but I am not sure how it works and I have yet to apply a working Visual state to something.

Can anyone explain how to use VisualStates, or even suggest an alternate method for doing this? Here is my code so far for reference:

<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>

Here is my code for the ListBox itself (in MainPage.xaml) with the Control Template:

        <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>

Upvotes: 0

Views: 682

Answers (3)

Hardik Kothari
Hardik Kothari

Reputation: 1766

<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>

Just put the code in your page where the list box defiene.I just pur the style in white oblique.You can provide where you want.

Upvotes: 1

Hardik Kothari
Hardik Kothari

Reputation: 1766

<Application.Resources>

         <ResourceDictionary>

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

      </ResourceDictionary>


        </Application.Resources>

use this code in app.xaml and also follow this link Change background color of selected item in listbox

Upvotes: 0

Hardik Kothari
Hardik Kothari

Reputation: 1766

Hello Just put this code in app.xaml,

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

when you selected any item in listbox that time your listbox item color will be changed to gary.

Upvotes: 1

Related Questions