0

ItemsControl を使用して、多数のユーザー コントロールをメイン ウィンドウに追加します。これで問題なく動作しますが、ItemsControl にコントロールが追加されたときにアニメーションを追加したいと考えています。

このスレッドのコードを使用しています: Animate Insertions to ItemsControl

これは私のユーザーコントロールです

<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見つからないというエラーが表示されます。アニメーションで子ユーザー コントロールからグリッドを参照するにはどうすればよいですか?

4

1 に答える 1

1

代わりにFluidMoveBehaviorを試して使用できます

への 2 つの参照を追加する必要があります。

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>

イーズ機能を追加して、必要に応じて動作させることもできます。

詳細については、この投稿を参照してください。

お役に立てれば

于 2013-09-24T10:15:34.770 に答える