Question

我使用ItemsControl将大量用户控件添加到我的主窗口。这工作正常，但我想在控件添加到ItemsControl时添加动画。

我正在使用此主题中的代码：Animate Insertions to ItemsControl

这是我的usercontrol

<UserControl>

<UserControl.Resources>
    <converters:CallStatusEnumToBackgroundColor x:Key="CallStatusBackgroundConverter"/>
    <converters:CallStatusEnumToSelectBackgroundColor x:Key="CallStatusToSelectBackgroundConverter"/>

    <Style x:Key="WhiteSegoeText" TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="Segoe UI Semibold" />
        <Setter Property="Foreground" Value="{StaticResource AlmostWhite}" />
    </Style>

    <Style x:Key="SelectedColorStyle" TargetType="{x:Type WrapPanel}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Background" Value="{Binding CallStatus, Converter={StaticResource CallStatusBackgroundConverter}}"></Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{Binding CallStatus, Converter={StaticResource CallStatusToSelectBackgroundConverter}}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

</UserControl.Resources>

<UserControl.Background>
    <SolidColorBrush Color="{Binding CallStatus, Converter={StaticResource CallStatusBackgroundConverter}}"/>
</UserControl.Background>

<Grid x:Name="CallGridRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
        </TransformGroup>
    </Grid.RenderTransform>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="45"/>
        <ColumnDefinition Width="45"/>
    </Grid.ColumnDefinitions>
    <TextBlock TextWrapping="Wrap" Text="{Binding CallerName}" Grid.Column="0"
        Style="{DynamicResource WhiteSegoeText}" FontSize="14" VerticalAlignment="Center" Margin="10,0,0,0"/>


    <WrapPanel x:Name="AcceptCallPanel" Visibility="Collapsed" Grid.Column="1" VerticalAlignment="Center" Style="{StaticResource SelectedColorStyle}" Margin="0,0,3,0" HorizontalAlignment="Center">
        <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
            <ContentControl Content="{StaticResource action_call_icon}" HorizontalAlignment="Center" />
        </Viewbox>
    </WrapPanel>

    <WrapPanel x:Name="PausePanel" Visibility="Collapsed" Grid.Column="1" VerticalAlignment="Center" Style="{StaticResource SelectedColorStyle}" Margin="0,0,3,0" HorizontalAlignment="Center">
         <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
              <ContentControl Content="{StaticResource status_pause}" VerticalAlignment="Center" />
         </Viewbox>
    </WrapPanel>

    <WrapPanel x:Name="ResumePanel" Visibility="Collapsed" Grid.Column="1" VerticalAlignment="Center" Style="{StaticResource SelectedColorStyle}" Margin="0,0,3,0" HorizontalAlignment="Center">
        <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
            <ContentControl Content="{StaticResource resume_call}" VerticalAlignment="Center" />
        </Viewbox>
    </WrapPanel>

    <WrapPanel x:Name="ClosePanel" Visibility="Visible" Grid.Column="2" VerticalAlignment="Center" Style="{StaticResource SelectedColorStyle}" Margin="0,0,3,0" HorizontalAlignment="Center">
        <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
            <ContentControl Content="{StaticResource close_call}" VerticalAlignment="Center" />
        </Viewbox>
    </WrapPanel>
</Grid>

这是主窗口的片段。

<ItemsControl x:Name="CallsForUserContainer" ItemsSource="{Binding callsForUserViewModel.Calls}" Margin="0,10,0,0">
       <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Storyboard x:Key="ItemAnimation" AutoReverse="False">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CallsForUser.CallGridRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </DataTemplate.Resources>

                    <DataTemplate.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard Storyboard="{StaticResource ItemAnimation}" />
                        </EventTrigger>
                    </DataTemplate.Triggers>

                    <local:CallsForUser/>
                </DataTemplate>
       </ItemsControl.ItemTemplate>
</ItemsControl>

但是当我运行这个时，我的动画中出现错误，找不到CallsForUser.CallGridRoot。如何从动画中的子用户控件引用网格？

Answer 1

您可以尝试使用FluidMoveBehavior代替

您需要添加两个引用：

System.Windows.Interactivity

Microsoft.Expression.Interactions

将以下using语句添加到xaml

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

然后，它的用法很简单：

    <ItemsControl x:Name="CallsForUserContainer" ItemsSource="{Binding callsForUserViewModel.Calls}" Margin="0,10,0,0">
        <i:Interaction.Behaviors>
            <ei:FluidMoveBehavior AppliesTo="Children"/>
        </i:Interaction.Behaviors>

        <!-- Rest of implementation goes here .... -->           

    </ItemsControl>

您还可以添加轻松功能，使其按照您的意愿运行。

您可以在this post

中找到有关它的更多信息

希望这有帮助

从窗口引用子用户控件中的网格

1 个答案: