【问题标题】:How to Animate a ContentControl in a ItemsControl如何在 ItemsControl 中为 ContentControl 设置动画
【发布时间】:2012-02-25 01:46:07
【问题描述】:

我喜欢使用 ItemsControl 来托管 ContentsControl。添加项目时,每个新的 ContentsControl 都会为其内容设置动画,并且每个 ContentControl 都会覆盖前一个。 ItemsControl 和 ContentControl Content 使用命名约定与 Caliburn Micro 绑定。

                    <ItemsControl x:Name="OverlayStackedItems" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Transparent">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Grid x:Name="ItemsHost" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <cc:DummyContentControl cal:View.Model="{Binding}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>

ContentControl 的定义如下:

   [ContentProperty("Content")]
public partial class DummyContentControl :ContentControl
{
    public DummyContentControl()
    {
    }

    static DummyContentControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(DummyContentControl), new FrameworkPropertyMetadata(typeof(ContentControl)));
    }


    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
    }

    protected override void OnContentChanged(object oldContent, object newContent)
    {
        LayoutUpdated += (sender, e) => 
        { 
        };
        UpdateLayout();

        base.OnContentChanged(oldContent, newContent);
    }

    void DummyContentControl_LayoutUpdated(object sender, EventArgs e)
    {
        throw new NotImplementedException();
    }

    protected override Size MeasureOverride(Size constraint)
    {
        return base.MeasureOverride(constraint);
    }
}

所以现在终于我的问题了。在真正的 ContentControl 中,我喜欢为内容设置动画,但是 当 OnContentChange 在创建我的动画的位置被调用时,ContentControl 的大小为 0。 ContentControl 托管在 ItemsControl 中时的调用顺序为:

  1. OnContentChanged(动画失败)
  2. OnApplyTemplate
  3. MeasureOverride

当 ContentControl 自行运行时,顺序为:

  1. OnApplyTemplate
  2. MeasureOverride
  3. OnContentChanged(动画作品)

这里的问题是 ItemsControl 中新项目的完整可视子树为 0 (DesiredSize,ActualSize = 0),因此我的动画代码失败。 我希望这对某人有意义, 任何帮助都会很棒,Thx,J

------------------修订版---------------- ---

好的,我将 OnLoaded 事件处理程序添加到 DummyControl 的 ctor 中。调用顺序是 1. OnContentChanged(所有尺寸均为0) 2. OnApplyTemplate(所有尺寸均为0) 3. MeasureOverride(可能由 ContentControl 为所有子控件主机调用多次) 4. 加载事件(Desired Size 设置为所有其他size 仍为0)

谁能解释一下关于如何为 ContentControl 设置动画的推荐做法是什么 由 ItemsControl 主持?

【问题讨论】:

  • 您是否在尝试处理动画之前验证了虚拟控件已加载?如果没有加载,你应该推迟动画。

标签: wpf mvvm itemscontrol contentcontrol caliburn


【解决方案1】:

只需在 XAML 中执行所有操作并让动画完成即可,无需调用 MeasureOverride() 和其他挂钩。

<ItemsControl>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <TextBlock Text="Whatever your template should look like"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard>
                                    <Storyboard >
                                        <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)" Duration="0:0:0.5" From="0" To="1" />
                                        <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)" Duration="0:0:0.5" From="0" To="1" />
                                        <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.CenterX)" Duration="0:0:0.5" To="25" />
                                        <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.CenterY)" Duration="0:0:0.5" To="25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多