将 Animation 属性绑定到 ItemsControl 中单击的 Visual Item答案

【问题标题】：Bind Animation property to clicked Visual Item inside an ItemsControl将 Animation 属性绑定到 ItemsControl 中单击的 Visual Item
【发布时间】：2015-08-09 21:05:09
【问题描述】：

我几乎可以将整个问题放入问题主题中，但有趣的部分不适合。所以上面问题的棘手部分是：

我的动画不适用于单击的可视子项，而是应用于构成可视子项的 ItemsControl 的父容器。所以我的问题是为数据绑定找到合适的“来源”。

但首先是一些 XAML：这是我要应用的动画（在故事板资源中）：

<DoubleAnimation
                Storyboard.Target="{x:Reference ItemsControlGrid}"
                Storyboard.TargetProperty="(Canvas.Left)"
                From="0" To="{Binding Source=Tile, Path=Width}"/>

有问题的部分是动画的“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>

ItemsControl 的结构如下：

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

据我所知，WPF 这不起作用，因为动画被应用到 ItemsControl 的父级，因此动画启动器（可视子级“Tile”）的“绑定上下文”完全丢失了。

总结一下我最终想要实现的目标：

我想为“平铺”项目设置动画，以便在我单击它时平滑地填满整个可见的滚动查看器。我尝试通过在以某种方式移动父网格的同时调整 Tile 的大小来实现该效果，即 tile 的中心移动到 scrollviewers 中心。

简而言之：我希望点击的“瓷砖”顺利打开到瓷砖的“详细”视图（显示完全不同的内容）

即使有完全不同/更好的方法来解决我的真正问题，我仍然想知道如何完成该数据绑定。

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

【问题讨论】：

标签： wpf xaml data-binding

【解决方案1】：

问题在于故事板是一种资源。当我在 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)}">

一个棘手的部分是“Path=Tag.(Point.Y)”。我使用我的 Tile 的标签来存储我在后面的代码中计算的目标位置，如下所示：

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

效果很好。动画看起来很棒。

更新：应该提一下，也可以通过名称“找到” Tile 上的动画，并直接在后面的代码中设置“To”属性。

【讨论】：