Wpf 将动画属性绑定到ItemsControl中单击的可视项

Wpf 将动画属性绑定到ItemsControl中单击的可视项,wpf,xaml,data-binding,Wpf,Xaml,Data Binding,我几乎可以把整个问题都放到问题主题中,但有趣的部分不合适。因此,上述问题的棘手部分是: 我的动画不应用于单击的可视子对象,而是应用于组成可视子对象的ItemsControl的父容器。 因此,我的问题是为数据绑定找到合适的“源” 但首先是一些XAML: 这是我尝试应用的动画(在故事板资源中): 有问题的部分是动画的“To”属性。(忽略Path=Width,我知道它只是绑定源上存在的一个测试属性)。 如果我使用硬编码的值,它已经起作用了 “Tile”是我要绑定到的DataTemplate控件的名

我几乎可以把整个问题都放到问题主题中,但有趣的部分不合适。因此,上述问题的棘手部分是:

我的动画不应用于单击的可视子对象,而是应用于组成可视子对象的ItemsControl的父容器。 因此,我的问题是为数据绑定找到合适的“源”

但首先是一些XAML: 这是我尝试应用的动画(在故事板资源中):


有问题的部分是动画的“To”属性。(忽略Path=Width,我知道它只是绑定源上存在的一个测试属性)。 如果我使用硬编码的值,它已经起作用了

“Tile”是我要绑定到的DataTemplate控件的名称

看起来是这样的:

<DataTemplate DataType="{x:Type local:Task}">
        <Grid x:Name="Tile"  MouseDown="Task_OnClick" MinWidth="200" Background="{StaticResource TileBackground}" Margin="7" RenderTransformOrigin="0.5,0.5" >
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Grid.MouseDown">
                   <BeginStoryboard Storyboard="{StaticResource AnimLeave}"></BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
...content
        </Grid>
    </DataTemplate>
<ScrollViewer>
    <Canvas>
        <Grid x:Name="ItemsControlGrid">
        <ItemsControl x:Name="Taskboard" >
            <ItemsControl.ItemsSource>
                <CompositeCollection>
                    <CollectionContainer Collection="{Binding Tasks, Source={x:Static ...secret}}"/>
                    <Button>
                    </Button>
                </CompositeCollection>
            </ItemsControl.ItemsSource>
var tile = ((Grid) sender);
GeneralTransform transform = tile.TransformToAncestor(CanvasTaskboard);
tile.Tag = transform.Inverse.Transform(new Point((CanvasTaskboard.ActualWidth - tile.ActualWidth) / 2, (CanvasTaskboard.ActualHeight - tile.ActualHeight) / 2));

所容纳之物
ItemsControl的结构如下所示:

<DataTemplate DataType="{x:Type local:Task}">
        <Grid x:Name="Tile"  MouseDown="Task_OnClick" MinWidth="200" Background="{StaticResource TileBackground}" Margin="7" RenderTransformOrigin="0.5,0.5" >
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Grid.MouseDown">
                   <BeginStoryboard Storyboard="{StaticResource AnimLeave}"></BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
...content
        </Grid>
    </DataTemplate>
<ScrollViewer>
    <Canvas>
        <Grid x:Name="ItemsControlGrid">
        <ItemsControl x:Name="Taskboard" >
            <ItemsControl.ItemsSource>
                <CompositeCollection>
                    <CollectionContainer Collection="{Binding Tasks, Source={x:Static ...secret}}"/>
                    <Button>
                    </Button>
                </CompositeCollection>
            </ItemsControl.ItemsSource>
var tile = ((Grid) sender);
GeneralTransform transform = tile.TransformToAncestor(CanvasTaskboard);
tile.Tag = transform.Inverse.Transform(new Point((CanvasTaskboard.ActualWidth - tile.ActualWidth) / 2, (CanvasTaskboard.ActualHeight - tile.ActualHeight) / 2));

据我所知,WPF不起作用,因为动画应用于ItemsControl的父级,所以到动画启动器(可视子级“平铺”)的“绑定上下文”完全丢失

因此,总结一下我最终想要实现的目标:

我想设置“平铺”项目的动画,以便在单击它时平滑地填充整个可见的scrollviewer。我试图通过同时调整互动程序的大小来实现这种效果,同时移动父网格,使互动程序的中心移动到滚动查看器的中心

简言之:我希望单击的“平铺”平滑地打开到平铺的“细节”视图中(显示完全不同的内容)

即使有完全不同/更好的方法来解决我的实际问题,我仍然想知道如何完成数据绑定


提前谢谢。我肯定会从即将到来的答案中学到很多东西

问题在于故事板是一种资源。当我在DataTemplate中声明它时,我可以使用

<DoubleAnimation
    Storyboard.Target="{x:Reference ItemsControlGrid}"
    Storyboard.TargetProperty="(Canvas.Top)"
    Duration="{StaticResource ZoomInTime}" BeginTime="{StaticResource FadeOutTime}"
    From="0" To="{Binding ElementName=Tile, TargetNullValue=0, Path=Tag.(Point.Y)}">
效果很好。动画看起来棒极了

更新: 我应该提到,也可以通过名称“查找”平铺上的动画,并直接在代码隐藏中设置“to”属性