CODEWITHSUNDEEP
windows-8windows-runtimewindows-store-appswinrt-xaml
Mina Wissa
Mina Wissa

Reputation: 10971

Windows Store Apps: change the background of GridViewItem on PointerOver

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 ?

Upvotes: 0

Views: 720

Answers (3)

Mina Wissa
Mina Wissa

Reputation: 10971

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

Upvotes: 0

Tung Nguyen
Tung Nguyen

Reputation: 263

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

Upvotes: 0

loop
loop

Reputation: 9242

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.

Upvotes: 0

Related Questions