XAML 情节提要动画基于另一个元素的事件触发器



我想通过与另一个元素的交互来触发一个元素上的动画。我有以下代码:

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

每次触发事件触发器时,应用程序都会进入中断模式。为什么?

您的问题是 itemsControl 中的每个项都有自己的名称范围。 将找不到 grid1,因为它不在该名称范围内。这是必要的,否则您将无法在此类模板中按名称引用内容。

此代码有效,因为只有一个 itemscontrol,并且它与 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>

相关内容

最新更新