XAML Storyboard animation baset on EventTrigger from another element

Question

I want to fire an animation on one element by interaction with another. I have a following code:

<Grid Name="grid1" Height="100"/>
<ItemsControl>
   <ItemsControl.ItemTemplate>
      <DataTemplate>
          <Grid>
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Grid.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="grid1"
                                Storyboard.TargetProperty="Height"
                                From="100"
                                To="60"
                                Duration="0:0:5">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>
       </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Every time, whet EventTrigger is fired, application goes into break mode. Why?

Oh, my bad. But it still doesn't work. App goes into break mode. — kolorowezworki
Try changing Storyboard.TargetName="grid1" into Storyboard.Target="{Binding ElementName=grid1}". Source — Jack
Also, post the error messages you receive. It will help identify the source of the problem. — Jack
Thank you a lot! There was no any error messages, only page "the application is in break mode", but after change TargetName to Target, it works :) — kolorowezworki
Possible duplicate of Name cannot be found in the name scope of 'System.Windows.Controls.Button' — Jack

Andy Andy · Accepted Answer · 2018-03-23T12:52:46

Your problem is that each item in your itemscontrol will have it's own namescope. grid1 will not be found because it's not in that namescope. This is necessary otherwise you wouldn't be able to reference things by name in such a template.

This code works, because there's just the one itemscontrol and it's in the same namescope as grid1:

<StackPanel>
    <Grid Name="grid1" Height="100"/>
    <ItemsControl  ItemsSource="{Binding Items}"

             >
        <ItemsControl.Triggers>
            <EventTrigger RoutedEvent="Grid.MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="grid1"
                            Storyboard.TargetProperty="Height"
                            From="100"
                            To="60"
                            Duration="0:0:5">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </ItemsControl.Triggers>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding}"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

XAML Storyboard animation baset on EventTrigger from another element

1 Answers