Reference to grid in child usercontrol from window

Question

I use a ItemsControl to add a number of usercontrols to my mainwindow. This works fine, but I want to add an animation when a control is added to the ItemsControl.

I'm using the code from this thread: Animate Insertions to ItemsControl

This is my 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>

And this is the snippet from the main window.

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

But when I run this I get an error in my animation that CallsForUser.CallGridRootis not found. How can I reference to the grid from my child usercontrol in the animation?

Answer 1

You can try and use FluidMoveBehavior instead

You'll need to add two references to :

System.Windows.Interactivity

Microsoft.Expression.Interactions

Add the following using statements to your xaml

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

Then, it's use is as simple as :

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

You can also add it Ease functions to make it behave as you want.

You can find more information about it in this post

Hope this helps