Windows Store Apps: change the background of GridViewItem on PointerOver - windows-8

Question

I have a gridview thats' bound to the following model
class Item
{
string Title;
string ImagePath
string ImagePathPressed;
}
where ImagePath & ImagePathPressed are paths to images within the app.
now I want my grid View Item to change it's background when the mouse is over from the value in ImagePath to that in ImagePathPressed
how to achive this ?

Answer 1

it would be better if you make these variables as properties and also implement INotifyPropertyChanged on your class. And on your mouseOver event of gridView change the ImagePath to that of ImagePathPressed it will reflect the change in ImagePath.i think on your mouseover event you can get the on which item is your mouse pointer reside.

Answer 2

Following this link to get guideline to implement Style for GridViewItem
http://msdn.microsoft.com/en-us/library/windows/apps/jj709915.aspx
You should implement your class members as Bindable Properties then implement PointerOver state as guideline in above link.
I suggest that you should create two images (one for normal state and other one for hover state)
For example:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="OuterContainer">
<Grid>
<Image x:Name="NormalImage" Source="{Binding ImagePath}"/>
<Image x:Name="PressImage" Source="{Binding ImagePathPressed}" Opacity="0"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressImage"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">...

Answer 3

OK, I got it
I implemented a control template like this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="OuterContainer" Tag={Binding}>
<Border.Resources>
<!-- Define brush resources for both states-->
<ImageBrush x:Key="MouseOverBrush" ImageSource="{Binding Tag.ImagePathPressed, ElementName=OuterContainer}" Stretch="None" />
<ImageBrush x:Key="DefaultBrush" ImageSource="{Binding Tag.ImagePath, ElementName=OuterContainer}" Stretch="None" />
</Border.Resources>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ReorderHintContent" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MouseOverBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
.
.
.
<Grid x:Name="ReorderHintContent" Tag="{Binding}" DataContext="{Binding}" >
<Grid.Background>
<!-- Default background-->
<ImageBrush x:Name="BGBrush" ImageSource="{Binding Tag.ImagePath, ElementName=ReorderHintContent}" Stretch="None" Opacity="0" />
</Grid.Background>
I had to set the Tag for both the border and the Grid in order to have access to the properties of the model