UWP使用图像分接事件从GridView.ItemTemplate DataTemplate创建的对象上开始故事板

时间:2017-06-13 22:38:49

标签: c# xaml uwp storyboard

我使用过像这样的Microsoft文档和网站并取得了一些成功,但我无法实现目标。

我希望图片点按以启动故事板,图片点按来自网格视图中的对象实例。

<GridView ItemSource="{Binding"}>
<GridView.ItemTemplate>
<DataTempate>
<Grid>
<Grid.Resources>
<Storyboard>
<!-- storyboard code here no worries it works outside the data template-->
</Storyboard>
<Image Tapped="Image_Tapped" Source="assets/stuff/stuff.png">
</Image>

在DataTemplate中有一个图像,我希望该图像的点击事件启动与该实例相关的故事板。 Gridview.DataContext来自ObservableCollection <Player>。 Player是我编写的一个类,它包含一些string和int属性并使用INotifyPropertyChanged

我试过

<Image>
<Image.Triggers>
<EventTrigger RoutedEvent="">
<!--this only works when the UIElement is loaded-->

我以为我正在使用EventTrigger到达某个地方但是我需要故事板开始图像点击或按钮点击或某种形式的用户输入。

我还尝试将故事板移动到各种xaml位置并使用

this.Resources["MyStoryboard"]as Storyboard).Begin();

任何帮助想法都会很棒,谢谢。

2 个答案:

答案 0 :(得分:1)

成功!我知道有一种简单的方法可以做到这一点。

好的重新上限

<GridView>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <!--stuff like columns and rows etc etc-->
                <Image x:Name="MyImageToAnimate" source="assets/stuff/stuff.png"/>
                <!--other bits etc-->
                <Image x:Name="ImageThatUserTaps" source="assets/stuff/other_stuff.png">
                    <Image.Resources>
                        <Storyboard x:Name="MyStoryboard">
                            <!--write your storyboard here-->
                                <!--my storyboard targets the opacity of "MyImageToAnimate"-->
                        </Storyboard>
                    </Image.Resources>
                </Image>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

所以上面的代码是我的xaml,我把故事板放在图像资源中。然后在代码后面......

private void ImageThatUserTaps_Tapped(object sender, TappedRoutedEventArgs e)
{
    Storyboard sb = (sender as Image).Resources["MyStoryboard"] as Storyboard;
    sb.Begin();
}

这让我心烦意乱太久了,像往常一样,有一个很好的简单解决方案只是一个看不见的人。

希望这可以帮助他人。

答案 1 :(得分:-1)

它不应该是Tapped=__它应该是按钮点击的事件处理程序。使用按钮并用它包围图像。

<Button onClick="buttonClicked">
<Image/>
</Button>