Click here to Skip to main content
14,040,625 members
Click here to Skip to main content
Add your own
alternative version

Stats

7.7K views
54 downloads
1 bookmarked
Posted 26 Mar 2016
Licenced CPOL

Remove Default Background Color of ListBox Item on Selection in Windows Universal App

, 26 Mar 2016
Rate this:
Please Sign up or sign in to vote.
Here we will learn how to remove default background color of ListBox item on selection in Windows Universal App

Introduction

Ideally when we use any control like ListBox, ListView, Button, etc. in Windows phone apps, it comes with its default behaviour. For example - On clicking on button its color changed, its border is white, etc. So we need to overwrite its default behaviour/property to make it compatible with our design. A most used control ListBox or ListView also comes with its default behaviour, i.e., on selection of ListBox item, its color changed to gray or white and it looks very odd in UI. So here we will see how to remove or overwrite its selection color.

Description

Take a new project, i.e., Blank App (Universal Apps) and give it whatever name you want.

When you will see in Solution Explorer, you will find three types of projects - Windows store app, Windows phone app and Shared project.

Put ListBox in MainPage.xaml and add data in it, By default, it will look like below:

<ListBox Background="Transparent" Grid.Row="0"
Grid.Column="0" Name="lbEmployees"
   HorizontalAlignment="Center"
   VerticalAlignment="Top" Margin="10 50 0 0"
   ScrollViewer.HorizontalScrollBarVisibility="Disabled">
           <ListBox.ItemTemplate>
               <DataTemplate>
                       <TextBlock Foreground="Black" FontSize="25"
           VerticalAlignment="Center"
           HorizontalAlignment="Left"
           TextWrapping="Wrap"
           Text="{Binding EmployeeName}"></TextBlock>
               </DataTemplate>
           </ListBox.ItemTemplate>
       </ListBox>

We need to override its default behavior, so create a style and use in 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="Transparent">
                            <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="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames 

						Storyboard.TargetProperty="Background" 

						Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" 

                                                Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer x:Name="ScrollViewer">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

You need to create inline ItemContainer Style as well.

<ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Border x:Name="LayoutRoot1" 

				BorderBrush="{TemplateBinding BorderBrush}" 

				BorderThickness="{TemplateBinding BorderThickness}" 

				Background="{TemplateBinding Background}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="LayoutRoot1">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

							Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="LayoutRoot1">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" 

							Storyboard.TargetProperty="Opacity" 

							Storyboard.TargetName="PressedBackground"/>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

							Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="LayoutRoot1">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualState x:Name="Unselected"/>
                                            <VisualState x:Name="Selected">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

							Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedUnfocused">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedDisabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedPointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Background" 

							Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

							Storyboard.TargetProperty="Foreground" 

							Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

								Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedPressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Unfocused"/>
                                            <VisualState x:Name="PointerFocused"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid x:Name="InnerGrid" Background="Transparent">
                                        <Rectangle x:Name="PressedBackground" 

                                        Fill="{StaticResource ListBoxItemPressedBackgroundThemeBrush}" 

                                        Opacity="0"/>
                                        <ContentPresenter x:Name="ContentPresenter" 

                                        ContentTemplate="{TemplateBinding ContentTemplate}" 

                                        ContentTransitions="{TemplateBinding ContentTransitions}" 

                                        Content="{TemplateBinding Content}" 

                                        HorizontalAlignment="{TemplateBinding 
							HorizontalContentAlignment}" 

                                        Margin="{TemplateBinding Padding}" 

                                        VerticalAlignment="{TemplateBinding 
							VerticalContentAlignment}"/>
                                        <Rectangle x:Name="FocusVisualWhite" 

                                        Opacity="0" StrokeDashOffset=".5" 

                                        StrokeEndLineCap="Square" 

                                        Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" 

                                        StrokeDashArray="1,1"/>
                                        <Rectangle x:Name="FocusVisualBlack" 

                                        Opacity="0" StrokeDashOffset="1.5" 

                                        StrokeEndLineCap="Square" 

                                        Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" 

                                        StrokeDashArray="1,1"/>
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="IsSelected" 

                    Value="{Binding Content.IsSelected, Mode=TwoWay, 
                    RelativeSource={RelativeSource Self}}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>

So the whole code will look like this:

<Page

    x:Class="ListBoxDemo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:ListBoxDemo"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">
    <Page.Resources>

        <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="Transparent">
                            <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="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames 

                                            Storyboard.TargetProperty="Background" 

                                            Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" 

                                                Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer x:Name="ScrollViewer">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <ImageBrush 

            ImageSource="/Assets/Images/inner_page_orng_bg@2x.png"></ImageBrush>
        </Grid.Background>

        <ListBox Style="{StaticResource ListBoxStyle1}" 

        Background="Transparent" Grid.Row="0" 

        Grid.Column="0" Name="lbEmployees" 

        HorizontalAlignment="Center" VerticalAlignment="Top" 

        Margin="10 50 0 0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Border x:Name="LayoutRoot1" 

                                BorderBrush="{TemplateBinding BorderBrush}" 

                                BorderThickness="{TemplateBinding BorderThickness}" 

                                Background="{TemplateBinding Background}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="LayoutRoot1">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="LayoutRoot1">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" 

                                                    To="1" Storyboard.TargetProperty="Opacity" 

                                                    Storyboard.TargetName="PressedBackground"/>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="LayoutRoot1">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualState x:Name="Unselected"/>
                                            <VisualState x:Name="Selected">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedUnfocused">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedDisabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedPointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="SelectedPressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Background" 

                                                    Storyboard.TargetName="InnerGrid">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames 

                                                    Storyboard.TargetProperty="Foreground" 

                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 

                                                        Value="Transparent"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Unfocused"/>
                                            <VisualState x:Name="PointerFocused"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid x:Name="InnerGrid" 

                                    Background="Transparent">
                                        <Rectangle x:Name="PressedBackground" 

                                        Fill="{StaticResource ListBoxItemPressedBackgroundThemeBrush}" 

                                        Opacity="0"/>
                                        <ContentPresenter x:Name="ContentPresenter" 

                                        ContentTemplate="{TemplateBinding ContentTemplate}" 

                                        ContentTransitions=
						"{TemplateBinding ContentTransitions}" 

                                        Content="{TemplateBinding Content}" 

                                        HorizontalAlignment=
						"{TemplateBinding HorizontalContentAlignment}" 

                                        Margin="{TemplateBinding Padding}" 

                                        VerticalAlignment=
						"{TemplateBinding VerticalContentAlignment}"/>
                                        <Rectangle x:Name="FocusVisualWhite" 

                                        Opacity="0" StrokeDashOffset=".5" 

                                        StrokeEndLineCap="Square" 

                                        Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" 

                                        StrokeDashArray="1,1"/>
                                        <Rectangle x:Name="FocusVisualBlack" 

                                        Opacity="0" StrokeDashOffset="1.5" 

                                        StrokeEndLineCap="Square" 

                                        Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" 

                                        StrokeDashArray="1,1"/>
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="IsSelected" Value="{Binding Content.IsSelected, 
                    Mode=TwoWay, RelativeSource={RelativeSource Self}}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                        <TextBlock Foreground="Black" FontSize="25" 

                        VerticalAlignment="Center" HorizontalAlignment="Left" 

                        TextWrapping="Wrap" 

                        Text="{Binding EmployeeName}"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Page>

Output

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190425.1 | Last Updated 26 Mar 2016
Article Copyright 2016 by Sumit Samediya
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid