带有重新排序和动画/过渡的自定义面板 [英] Custom Panel with Reorder and animations / transitions

问题描述

我有一个名为 FluidPanel 的自定义类，它扩展了 Panel 并覆盖了 MeasureOverride 和ArrangeOverride 方法.目标是创建 Google Keep 外观.好的，它工作正常.(应用链接)

I have a custom class called FluidPanel that extends Panel and overrides methods MeasureOverride and ArrangeOverride. The goal is to create the Google Keep appearence. Ok, it's working fine. (app link)

但是，因为我正在扩展一个基本的Panel 并将其用作 ItemsPanelTemplate，所以我缺少两件事:重新排序和一些转换，这根本无法立即使用.见代码:

But, because I'm extending a basic Panel and using it as the ItemsPanelTemplate, I'm missing 2 things: Reorder and some transitions, that simply doens't work out of the box. See code:

<GridView CanReorderItems="True" CanDrag="True" AllowDrop="True">
    <GridView.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromVerticalOffset="200" IsStaggeringEnabled="True"/>
            <ReorderThemeTransition/>
        </TransitionCollection>
    </GridView.ItemContainerTransitions>

    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <local:FluidPanel/><!--custom panel = reorder doesn't work-->
            <!--<StackPanel/>--><!--reorder and animations work normally (reorder to see)-->
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <Grid Width="50" Height="50" Background="Red"/>
    <Grid Width="50" Height="50" Background="Green"/>
    <Grid Width="50" Height="50" Background="Blue"/>
    <Grid Width="50" Height="50" Background="Orange"/>
    <Grid Width="50" Height="50" Background="Purple"/>
    <Grid Width="50" Height="50" Background="Pink"/>
</GridView>

所以，主要问题是:如何创建一个自定义面板，重新排序完全正常工作，包括动画?(比如向左/向右/...的偏移)

So, the main question is: How to create a custom Panel with Reorder fully working, including animations? (like that offset to the left/right/...)

第二个(不太重要的)问题是:EntranceThemeTransition 是否有效?

A second (less important) question is: And with the EntranceThemeTransition working?

推荐答案

我部分找到了解决方案.
不幸的是，这并不像应该的那么容易.

I partially found the solution.
Unfortunately it's not as easy as it should be.

对于自定义Panels，好像还得手动实现Reorder，听拖&丢弃事件.

For custom Panels, it seems that we have to implement the Reorder manually, listening to the drag & drop events.

这是一篇关于它的文章:通过拖放扩展 GridView
这是一个 关于它.

Here is an article about it: Extending GridView with Drag and Drop
and here is a simplified code about it.

通过手动更改视觉状态添加重新排序动画:

The reorder animation is added by manually changing the Visual State:

private void OnDragOver(object sender, DragEventArgs e)
{
    var item = (e.OriginalSource as FrameworkElement).DataContext as Note;
    if (item == null) return;

    e.Data.Properties["targetItem"] = item;

    var itemContainer = (sender as ItemsControl).ContainerFromItem(item) as Control;
    if (itemContainer == null) return;

    VisualStateManager.GoToState(itemContainer, "BottomReorderHint", true);
}

但我仍然希望有任何更简单的方法来做到这一点，因为很多面板都实现了它(StackPanel、ItemsWrapGrid...).

But I still hope there is any easier way to do it, giving the fact that a lot of Panels implement it (StackPanel, ItemsWrapGrid, ...).

仍然无法让 EntranceThemeTransition 在自定义面板上工作.
使 EntranceThemeTransition 正常工作的解决方法

Still can't get the EntranceThemeTransition to work on the custom panel.
workaround to make EntranceThemeTransition works

这篇关于带有重新排序和动画/过渡的自定义面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！