XAML

Building WinRT / Windows 8 Grouped items using MVVMLight

Sun, 18 Nov 2012 15:35:00 GMT

One of the reasons to use MVVM pattern is the fact that you can design before having the application fully implemented. Tests are also an important part but this is not the topic of this article. When creating WinRT applications Blend is the tool you definitely should use. When working with Grouped Items in GridView you don't have out of the box support for design using MVVM. In the following steps I will start with a new application using MvvmLight and add all the necessary bits for binding and displaying the data in UI.

In order to work with MvvmLight you need to install it. Get a copy from here MvvmLight After installation it will add an MvvmLight project to your list of projects and some MvvmLight templates to the list of templates which you can add on an already existing project.

You can download the source code of this article from GitHub Grouped Items with MvvmLight. I removed some of the code created by MvvmLight template to keep it simpler to understand. If you want to check what MvvmLight creates just a create a new MvvmLight project and check the code.
Fire Visual Studio and create a new project. This will be an MvvmLight project.

When you chose the MvvmLight project it creates a few classes. You can use other type but you'll need to add these classes manually.
First of all, the App.xaml file was updated with the following

<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True"  />

It references the ViewModelLocator class added in the ViewModel folder. This is a locator class and uses SimpleIoc as a dependency injector.

MainViewModel class was created in the same ViewModel folder and has WelcomeTitle property binded – this was created by MvvmLight and I didn’t remove it.

The MainPage.xaml updated with the DataContext reference

DataContext="{Binding Main, Source={StaticResource Locator}}

Here Main is the 'Main' property of type MainViewModel defined in the ViewModelLocator.
We will create an example of products so for this purpose a new set of classes were added to the Model folder. The first one - ProductItem has Title, Price and images properties. The second one - ProductGroup has Title which is the title of the group and Items which is a collection of ProductItems for the same group.

The MainViewModel class had a constructor with IDataService parameter which was created by MvvmLight. That constructor is not needed any more and we need to create a constructor with no parameters. I will explain later why we need it. In the constructor I will set the WelcomeTitle and I will populate the Products collection with data.

Let's add a grid view to the MainPage

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="13*"/>
            <RowDefinition Height="51*"/>
        </Grid.RowDefinitions>
        <TextBlock FontSize="56"
                   Text="{Binding WelcomeTitle}"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Left"
                   FontFamily="Segoe UI Light" 
                   Margin="120,49,0,0" />

        <Grid Style="{StaticResource LayoutRootStyle}" Grid.Row="1">

            <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="2"
            Padding="116,1,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false">

                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="1,0,0,6">
                                    <Button
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                            <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                        </StackPanel>
                                    </Button>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>
        </Grid>
</Grid>

Grid View ItemsSource is defined using groupedItemsViewSource

ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

This is the most important part. groupedItemsViewSource is a CollectionVewSource

<CollectionViewSource
    x:Name="groupedItemsViewSource"
    Source="{Binding Products}"
    IsSourceGrouped="true"
    ItemsPath="Items"
    d:Source="{Binding Products, Source={d:DesignInstance Type=data:MainViewModel, IsDesignTimeCreatable=True}}"/>

Pay attention at the d:Source. This is the code which binds the design view with the ViewModel. The 'd' namespace is ignored by the run time. It is used only for design time.
The source is bindend to the Products collection of the MainViewModel. I said before that MainViewModel needs a parameter less constructor. This is the place where the constructor is used. If you don't define it then the source will not bind for design time.

Now if you open the MainPage in Blend it will nicely display the design with all the images in place.

Source code is available on GitHub Grouped Items with MvvmLight.

ListBoxItem colors in Windows 8

Sat, 01 Sep 2012 14:35:00 GMT

In WPF you can override some resource in order change the colors of the ListBoxItem. For instance, overriding some standard brushes:

<Style TargetType="ListBoxItem">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
    </Style.Resources>
</Style>

This doesn't work with Windows 8. You'll need to update the style for each state.

Blend can be used to generate the layout using ItemContainerStyle.

The following is the default generated ItemContainerStyle:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="Padding" Value="8,10"/>
		<Setter Property="HorizontalContentAlignment" Value="Left"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="ListBoxItem">
					<Border x:Name="LayoutRoot" 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="LayoutRoot">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Disabled">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemDisabledForegroundThemeBrush}"/>
										</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="{StaticResource ListBoxItemPressedForegroundThemeBrush}"/>
										</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="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedUnfocused">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedDisabled">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedPointerOver">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedPointerOverBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedPressed">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="FocusStates">
								<VisualState x:Name="Focused">
									<Storyboard>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
									</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>
	</Style>
 </ResourceDictionary>

Visual states should be updated in order to override the colors for the different state.

There are three states group with the following visual states:

Common States

Normal
- Pressed
- Disabled
- PointerOver
Focus States
- Unfocused
- Focused
- PointerFocused
Selection States
- Unselected
- Selected
- SelectedUnfocused
- SelectedDisabled
- SelectedPointerOver
- SelectedPressed

The states will update the parts list box item is composed of.

The following XAML composes a list box item:

<Grid x:Name="InnerGrid" Background="Transparent">
	<Rectangle x:Name="PressedBackground" Fill="LightGray" 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>

In most cases the InnerGrid background color is updated but there are occasions when PressedBackground rectangle should change its color. I will specify this explicitly.

The generated template by Blend uses the key frame animation. You see that storyboard element contains elements ending in keyframes. A key frame animation is an animation that is made up by different segments of animation which transition from one value to another.

There are linear key frames and discrete key frames. The linear key frames transitions smoothly from one value to another. In discrete key frames, when the time frame is reached the value is changed abruptly, therefore there is no smooth transition. In our case the discrete option works ok as we don’t have any smooth transition (unless you want to implement one).

If you edit the style in Blend then when you change the background color it will add the following before the end of the storyboard element

<ColorAnimation Duration="0" To="COLOR" Storyboard.TargetProperty="(TARGET PROPERTY).(SolidColorBrush.Color)" Storyboard.TargetName="TARGET NAME" d:IsOptimized="True"/>

This is a an example of linear key frames. But we will update the DiscreteObjectKeyFrame element in our implementation.

Let’s review the states where we need to update the visual state.

Normal state

When treating the normal state we should take into account the previous state and focus state.

The first time the application is opened list box item will have the color set in FocusState - Unfocused. Also this state happens if you select one item and next select another one. The previous one will take the color of the FocusState - Unfocused.

Move the cursor over and the item will take the color of the Commonstate - Normal.

The SelectionStates - Unselected is a trickier one and needs some explanation. Let's say we have a ListView with three items. We select one item and move the focus to (select) another component. Next, we move the focus back to our list of items but we select another item, not the one which had the selection. In this case the one which had the selection before will change its color to SelectionState - Unselected

Pressed

The pressed state happens when the user clicks on the item. In order to change the color for the CommonState – Pressed the color of the PressedBackground should be changed which is the rectangle and not the LayoutRoot grid as in other situations.

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
	<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgPressed}"/>
</ObjectAnimationUsingKeyFrames>

For the SelectionStates – SelectedPressed the animation is commented out.

Here are some color brushes which you need to change depending on the colors you need. I've selected basic colors (RBG) to make it easier to understand what needs to be changed.

<SolidColorBrush x:Key="bgNormal" Color="Red" />
 <SolidColorBrush x:Key="bgPointerOver" Color="DarkGreen" />
<SolidColorBrush x:Key="bgSelectedPointerOver" Color="Green" />
<SolidColorBrush x:Key="bgSelected" Color="DeepPink" />
<SolidColorBrush x:Key="bgPressed" Color="Orange" />

And here is the full style

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="TabNavigation" Value="Local"/>
		<Setter Property="Padding" Value="8,10"/>
		<Setter Property="HorizontalContentAlignment" Value="Left"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="ListBoxItem">
					<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualState x:Name="Normal">
									<Storyboard>
									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgNormal}"/>
									</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="PointerOver">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgPointerOver}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Disabled">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
											<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemDisabledForegroundThemeBrush}"/>
										</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="{StaticResource ListBoxItemPressedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="SelectionStates">
								<VisualState x:Name="Unselected">
									<Storyboard>
									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgNormal}"/>
									</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Selected">
									<Storyboard>
										<!--ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames-->
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedUnfocused">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgSelected}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedDisabled">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedPointerOver">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bgSelectedPointerOver}"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="SelectedPressed">
									<Storyboard>
										<!--ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames-->
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
											<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="FocusStates">
								<VisualState x:Name="Focused">
									<Storyboard>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
									</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>
</Style>

Copy the style in your resource file and update the brushes as you need.