Bind Animation property to clicked Visual Item inside an ItemsControl

Question

I could almost fit the entire problem into the question topic but the interesting part didn't fit. So the tricky part of the question above is this:

My Animation does not apply to the clicked visual child but to a parent container of the ItemsControl consisting the visual child. So my Problem is to find the proper "Source" for the data binding.

But first some XAML: This is the animation i am trying to apply (Inside a Storyboard resource):

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

The problematic part is the "To" property of the animation. (Ignore the Path=Width, its just a test property I know to exist on the binding source). It already works if I use hardcoded values.

"Tile" is the name of the DataTemplate control I want to bind to.

It looks like this:

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

The ItemsControl is structured like this:

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

As far as I know WPF this does not work because the Animation is applied to the parent of the ItemsControl so the "Binding Context" to the animation initiator (The visual child "Tile") is completely lost.

So to summerize what I eventually would like to achieve:

I want to animate the "Tile" Item to smoothly fill up the entire visible scrollviewer when I click on it. I try to achieve that effect by simultanuously resize the Tile while moving the parent grid in a way, that the tile's center moves to the scrollviewers center.

In short: I want the clicked "Tile" smoothly open up into a "Detail" View of the Tile (Showing completely different content)

Even if there is a completely different/better approach to solve my real Problem I would still like to know how to accomplish that data binding.

Thanks in advance. I am sure to learn alot again from the hopefully upcoming answers.

ecreif ecreif · Accepted Answer · 2015-05-28T13:24:46

The problem was the storyboard being a resource. When i declare it inside the DataTemplate I can use

<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)}">

A tricky part was the "Path=Tag.(Point.Y)". I used the Tag of my Tile to store the target position I calculated in code behind like this:

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

Works pretty well. The animation looks fantastic.

Update: I should mention that it is also possible to "find" the animation on the Tile by name and set the "To" property in code behind directly.

Bind Animation property to clicked Visual Item inside an ItemsControl

1 Answers