Windows应用商店应用:在PointerOver上更改GridViewItem的背景

时间:2013-07-21 12:06:03

标签: windows-8 windows-runtime windows-store-apps winrt-xaml

我的网格视图'绑定到以下模型

    class Item
    {
    string Title;
    string ImagePath
    string ImagePathPressed;
    }

ImagePath & ImagePathPressed 是应用内图片的路径。

现在我希望我的网格查看项目在鼠标从 ImagePath 中的值到 ImagePathPressed

中的值时更改背景

如何实现这个目标?

3 个答案:

答案 0 :(得分:0)

如果将这些变量作为属性并在类上实现 INotifyPropertyChanged 会更好。在gridView的 mouseOver 事件中,将 ImagePath 更改为 ImagePathPressed 的事件,它将反映 ImagePath 中的更改。我想你的鼠标悬停事件你可以得到你的鼠标指针所在的项目。

答案 1 :(得分:0)

点击此链接获取指南以实现GridViewItem的样式

http://msdn.microsoft.com/en-us/library/windows/apps/jj709915.aspx

您应该将您的类成员实现为Bindable Properties,然后在上面的链接中将PointerOver状态实现为指导。 我建议你应该创建两个图像(一个用于正常状态,另一个用于悬停状态) 例如:

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

答案 2 :(得分:0)

好的,我明白了

我实现了这样的控制模板:

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

我必须为边框和网格设置标记才能访问模型的属性