从窗口引用子用户控件中的网格 [英] Reference to grid in child usercontrol from window

问题描述

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

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.

我正在使用此线程中的代码:动画插入到 ItemsControl

I'm using the code from this thread: 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.如何在动画中从我的子用户控件引用网格?

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?

推荐答案

您可以尝试使用 FluidMoveBehavior 代替

You can try and use FluidMoveBehavior instead

您需要添加两个引用:

System.Windows.Interactivity

System.Windows.Interactivity

Microsoft.Expression.Interactions

Microsoft.Expression.Interactions

将以下 using 语句添加到您的 xaml

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"

那么，它的使用就像:

    <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

希望能帮到你

这篇关于从窗口引用子用户控件中的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！