none
Change the default background color of GridViewItem in selected state

    Question

  • Hello,

    How can I change the color of the background of the GridViewItem when it's selected (I get the default (and ugly) green)?

    Since the Triggers are no more and I'm no expert in Visual State … I was wondering if there's a default style somewhere to override. 

    Matthieu


    http://wp7wonders.wordpress.com/

    Saturday, March 17, 2012 10:41 PM

Answers

  • I succeeded by using a modified version of the Style found in the SDkStyles.xaml files of the Samples package and settings the ItemContainerStyle to it :
    <SolidColorBrush x:Key="ListViewItemSelectedMouseOverBrushStacks" Color="#FFDEDEDE" />
        <SolidColorBrush x:Key="ListViewItemMouseOverBrush" Color="#FFDEDEDE" />
    
        <Style x:Key="SelectedItemCountStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="56"/>
            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Margin" Value="12,0,0,0"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="TextTrimming" Value="WordEllipsis"/>
        </Style>
    
        <Style x:Key="GridViewItemStyleStacks" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
            <Setter Property="FontSize" Value="{StaticResource ContentFontSize}" />
            <Setter Property="Foreground" Value="{StaticResource ControlForegroundBrush}" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="0,0,18,0"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MouseOverRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <TapDownThemeAnimation TargetName="ContentContainer" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="contentPresenter"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To=".55" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="Normal" From="Pressed" GeneratedDuration="0:0:0.650"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm: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>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                    <vsm:VisualState x:Name="PointerFocused"/>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="SelectionHintStates">
                                    <vsm:VisualState x:Name="VerticalSelectionHint">
                                        <Storyboard>
                                            <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="10" ToHorizontalOffset="0" />
                                            <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="10" ToHorizontalOffset="0" />
                                            <DoubleAnimation Storyboard.TargetName="HintGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="HorizontalSelectionHint">
                                        <Storyboard>
                                            <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-10" ToVerticalOffset="0" />
                                            <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-10" ToVerticalOffset="0" />
                                            <DoubleAnimation Storyboard.TargetName="HintGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="NoSelectionHint" />
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="SelectionStates">
                                    <vsm:VisualState x:Name="Selecting">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectedRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectedRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedMouseOverRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="CheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unselecting"/>
                                    <vsm:VisualState x:Name="Unselected"/>
                                    <vsm:VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectedRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedMouseOverRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="CheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="DragStates">
                                    <vsm:VisualState x:Name="NotDragging" />
                                    <vsm:VisualState x:Name="Dragging">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0.60" />
                                            <DragItemThemeAnimation TargetName="InnerDragContent" />
                                            <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="DraggingTarget">
                                        <Storyboard>
                                            <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="MultipleDraggingPrimary">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MultiArrangeStackElement"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0.60" />
                                            <FadeInThemeAnimation TargetName="MultiArrangeStackElement" />
                                            <DragItemThemeAnimation TargetName="InnerDragContent" />
                                            <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
    
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="MultipleDraggingSecondary">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ContentContainer" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.650"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="ReorderHintStates">
                                    <vsm:VisualState x:Name="NoReorderHint"/>
                                    <vsm:VisualState x:Name="BottomReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Bottom" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="TopReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Top" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="RightReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Right" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="LeftReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Left" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.650"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="DataVirtualizationStates">
                                    <vsm:VisualState x:Name="DataAvailable"/>
                                    <vsm:VisualState x:Name="DataPlaceholder">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
                                                        Storyboard.TargetProperty="(UIElement.Visibility)"
                                                        Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
                                                        Storyboard.TargetProperty="(UIElement.Visibility)"
                                                        Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid x:Name="OuterContainer">
                                <Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.114,17.918894 L137.20706,13.2239 L144.63123,19.586983 L156.41039,5.8218293 L161.20587,9.8648186 L145.60767,28.390999 z" Fill="{StaticResource ControlHighlightBrush}" Height="12.913" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top"/>
                                <Grid x:Name="ReorderHintContent">
                                    <Grid.RenderTransform>
                                        <CompositeTransform />
                                    </Grid.RenderTransform>
                                    <Grid x:Name="ContentContainer">
                                        <Grid x:Name="InnerDragContent">
                                            <Grid x:Name="CheckMark"
                                Height="40"
                                Width="40"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top">
                                                <Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.114,17.918894 L137.20706,13.2239 L144.63123,19.586983 L156.41039,5.8218293 L161.20587,9.8648186 L145.60767,28.390999 z" Fill="{StaticResource ListViewItemSemiTransparentHighlightBrush}" Height="12.913" Stretch="Fill"  Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top"/>
                                            </Grid>
                                            <Border x:Name="ContentBorder"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                                <Grid>
                                                    <Rectangle x:Name="SelectedRect"
                                        Opacity="0"
                                        Fill="{StaticResource ControlHighlightBrush}" />
                                                    <Rectangle x:Name="SelectedMouseOverRect"
                                        Opacity="0"
                                        Fill="{StaticResource ListViewItemSelectedMouseOverBrushStacks}" />
                                                    <Rectangle x:Name="MouseOverRect"
                                    Opacity="0"
                                    Fill="{StaticResource ListViewItemMouseOverBrush}" />
                                                    <ContentPresenter x:Name="contentPresenter"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                Content="{TemplateBinding Content}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Margin="{TemplateBinding Padding}" />
                                                    <TextBlock x:Name="PlaceholderTextBlock"
                                        Opacity="0"
                                        Text="Xg"
                                        Foreground="{x:Null}"
                                        Margin="{TemplateBinding Padding}" />
                                                    <Rectangle x:Name="PlaceholderRect"
                                        Visibility="Collapsed"
                                        Fill="{StaticResource ListViewItemPlaceholderRectBrush}" />
                                                    <Rectangle x:Name="FocusVisualWhite" Stroke="White" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5" UseLayoutRounding="True" />
                                                    <Rectangle x:Name="FocusVisualBlack" Stroke="Black" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5" UseLayoutRounding="True" />
                                                </Grid>
                                            </Border>
    
                                            <Grid x:Name="SelectedCheckMarkOuter">
                                                <Grid x:Name="SelectedCheckMark"
                                  Opacity="0"
                                  Height="40"
                                  Width="40"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Top">
                                                    <Grid.RenderTransform>
                                                        <CompositeTransform />
                                                    </Grid.RenderTransform>
                                                    <Path x:Name="SelectedGlyph" Data="F1 M133.114,17.918894 L137.20706,13.2239 L144.63123,19.586983 L156.41039,5.8218293 L161.20587,9.8648186 L145.60767,28.390999 z" Fill="{StaticResource ControlForegroundBrush}" Height="12.913" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top"/>
                                                </Grid>
                                            </Grid>
                                            <Grid x:Name="MultiArrangeStackElement"
                                IsHitTestVisible="False"
                                Opacity="0"
                                Background="{StaticResource ListViewItemSemiTransparentHighlightBrush}">
                                                <TextBlock x:Name="RearrangingItemsValue"
                                      Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                                      Style="{StaticResource SelectedItemCountStyle}"
                                      TextWrapping="Wrap"
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Top" />
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    http://wp7wonders.wordpress.com/

    Sunday, March 18, 2012 2:25 AM

All replies

  • had the same problem, after quite a bit of a hassle, decided to go with listbox and style listboxitem. below is the edited style to be applied to listboxitem.

    <Style x:Key="ListBoxItemHighlightColor" 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"/>
        							<VisualState x:Name="PointerOver">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#7700abdc"/>
        									</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 ControlDisabledTextBrush}"/>
        									</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="#3366cc"/>
        									</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="#00abdc"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="SelectedUnfocused">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#00abdc"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="SelectedDisabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#00abdc"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="SelectedPointerOver">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#00abdc"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="SelectedPressed">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#00abdc"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
        									</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="#00abdc" 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 FocusVisualWhiteStrokeBrush}" StrokeDashArray="1,1"/>
        						<Rectangle x:Name="FocusVisualBlack" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeBrush}" StrokeDashArray="1,1"/>
        					</Grid>
        				</Border>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>

    notice the selected* states (e.g. selectedunfocused, selectedpressed, selectedpointerover, and selected.

    Hope it helps.


    Can Bilgin
    Blog CompuSight

    Saturday, March 17, 2012 11:14 PM
  • I succeeded by using a modified version of the Style found in the SDkStyles.xaml files of the Samples package and settings the ItemContainerStyle to it :
    <SolidColorBrush x:Key="ListViewItemSelectedMouseOverBrushStacks" Color="#FFDEDEDE" />
        <SolidColorBrush x:Key="ListViewItemMouseOverBrush" Color="#FFDEDEDE" />
    
        <Style x:Key="SelectedItemCountStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="56"/>
            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Margin" Value="12,0,0,0"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="TextTrimming" Value="WordEllipsis"/>
        </Style>
    
        <Style x:Key="GridViewItemStyleStacks" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
            <Setter Property="FontSize" Value="{StaticResource ContentFontSize}" />
            <Setter Property="Foreground" Value="{StaticResource ControlForegroundBrush}" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="0,0,18,0"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MouseOverRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <TapDownThemeAnimation TargetName="ContentContainer" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="contentPresenter"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To=".55" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="Normal" From="Pressed" GeneratedDuration="0:0:0.650"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm: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>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                    <vsm:VisualState x:Name="PointerFocused"/>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="SelectionHintStates">
                                    <vsm:VisualState x:Name="VerticalSelectionHint">
                                        <Storyboard>
                                            <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="10" ToHorizontalOffset="0" />
                                            <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="10" ToHorizontalOffset="0" />
                                            <DoubleAnimation Storyboard.TargetName="HintGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="HorizontalSelectionHint">
                                        <Storyboard>
                                            <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-10" ToVerticalOffset="0" />
                                            <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-10" ToVerticalOffset="0" />
                                            <DoubleAnimation Storyboard.TargetName="HintGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="NoSelectionHint" />
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="SelectionStates">
                                    <vsm:VisualState x:Name="Selecting">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectedRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectedRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedMouseOverRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="CheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unselecting"/>
                                    <vsm:VisualState x:Name="Unselected"/>
                                    <vsm:VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectedRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedMouseOverRect"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="CheckMark"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="DragStates">
                                    <vsm:VisualState x:Name="NotDragging" />
                                    <vsm:VisualState x:Name="Dragging">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0.60" />
                                            <DragItemThemeAnimation TargetName="InnerDragContent" />
                                            <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="DraggingTarget">
                                        <Storyboard>
                                            <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="MultipleDraggingPrimary">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MultiArrangeStackElement"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                            <DoubleAnimation Storyboard.TargetName="InnerDragContent"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="0.60" />
                                            <FadeInThemeAnimation TargetName="MultiArrangeStackElement" />
                                            <DragItemThemeAnimation TargetName="InnerDragContent" />
                                            <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
    
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="MultipleDraggingSecondary">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ContentContainer" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.650"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="ReorderHintStates">
                                    <vsm:VisualState x:Name="NoReorderHint"/>
                                    <vsm:VisualState x:Name="BottomReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Bottom" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="TopReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Top" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="RightReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Right" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="LeftReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="40" Direction="Left" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.650"/>
                                    </VisualStateGroup.Transitions>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="DataVirtualizationStates">
                                    <vsm:VisualState x:Name="DataAvailable"/>
                                    <vsm:VisualState x:Name="DataPlaceholder">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
                                                        Storyboard.TargetProperty="(UIElement.Visibility)"
                                                        Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
                                                        Storyboard.TargetProperty="(UIElement.Visibility)"
                                                        Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid x:Name="OuterContainer">
                                <Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.114,17.918894 L137.20706,13.2239 L144.63123,19.586983 L156.41039,5.8218293 L161.20587,9.8648186 L145.60767,28.390999 z" Fill="{StaticResource ControlHighlightBrush}" Height="12.913" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top"/>
                                <Grid x:Name="ReorderHintContent">
                                    <Grid.RenderTransform>
                                        <CompositeTransform />
                                    </Grid.RenderTransform>
                                    <Grid x:Name="ContentContainer">
                                        <Grid x:Name="InnerDragContent">
                                            <Grid x:Name="CheckMark"
                                Height="40"
                                Width="40"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top">
                                                <Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.114,17.918894 L137.20706,13.2239 L144.63123,19.586983 L156.41039,5.8218293 L161.20587,9.8648186 L145.60767,28.390999 z" Fill="{StaticResource ListViewItemSemiTransparentHighlightBrush}" Height="12.913" Stretch="Fill"  Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top"/>
                                            </Grid>
                                            <Border x:Name="ContentBorder"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                                <Grid>
                                                    <Rectangle x:Name="SelectedRect"
                                        Opacity="0"
                                        Fill="{StaticResource ControlHighlightBrush}" />
                                                    <Rectangle x:Name="SelectedMouseOverRect"
                                        Opacity="0"
                                        Fill="{StaticResource ListViewItemSelectedMouseOverBrushStacks}" />
                                                    <Rectangle x:Name="MouseOverRect"
                                    Opacity="0"
                                    Fill="{StaticResource ListViewItemMouseOverBrush}" />
                                                    <ContentPresenter x:Name="contentPresenter"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                Content="{TemplateBinding Content}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Margin="{TemplateBinding Padding}" />
                                                    <TextBlock x:Name="PlaceholderTextBlock"
                                        Opacity="0"
                                        Text="Xg"
                                        Foreground="{x:Null}"
                                        Margin="{TemplateBinding Padding}" />
                                                    <Rectangle x:Name="PlaceholderRect"
                                        Visibility="Collapsed"
                                        Fill="{StaticResource ListViewItemPlaceholderRectBrush}" />
                                                    <Rectangle x:Name="FocusVisualWhite" Stroke="White" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5" UseLayoutRounding="True" />
                                                    <Rectangle x:Name="FocusVisualBlack" Stroke="Black" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5" UseLayoutRounding="True" />
                                                </Grid>
                                            </Border>
    
                                            <Grid x:Name="SelectedCheckMarkOuter">
                                                <Grid x:Name="SelectedCheckMark"
                                  Opacity="0"
                                  Height="40"
                                  Width="40"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Top">
                                                    <Grid.RenderTransform>
                                                        <CompositeTransform />
                                                    </Grid.RenderTransform>
                                                    <Path x:Name="SelectedGlyph" Data="F1 M133.114,17.918894 L137.20706,13.2239 L144.63123,19.586983 L156.41039,5.8218293 L161.20587,9.8648186 L145.60767,28.390999 z" Fill="{StaticResource ControlForegroundBrush}" Height="12.913" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top"/>
                                                </Grid>
                                            </Grid>
                                            <Grid x:Name="MultiArrangeStackElement"
                                IsHitTestVisible="False"
                                Opacity="0"
                                Background="{StaticResource ListViewItemSemiTransparentHighlightBrush}">
                                                <TextBlock x:Name="RearrangingItemsValue"
                                      Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                                      Style="{StaticResource SelectedItemCountStyle}"
                                      TextWrapping="Wrap"
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Top" />
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    http://wp7wonders.wordpress.com/

    Sunday, March 18, 2012 2:25 AM