Question

我有一个名为FluidPanel的自定义类，它扩展 Panel 并覆盖方法MeasureOverride和ArrangeOverride。目标是创建Google Keep外观。好的，它工作正常。（app link）

但是，因为我正在扩展一个基本的面板并将其用作ItemsPanelTemplate，所以我错过了两件事：重新排序和一些过渡，这简直就是这样做的开箱即用。见代码：

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

所以，主要的问题是：如何创建一个自动重新排序的自定义面板，包括动画？（就像偏向左/右/...)

第二个（不太重要）的问题是：并且在EntranceThemeTransition工作吗？

Answer 1

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

对于自定义面板，似乎我们必须手动实现重新排序，听取拖动和放大放弃事件。

这是一篇关于它的文章：Extending GridView with Drag and Drop
这是关于它的simplified code。

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

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);
}

但我仍然希望有更简单的方法可以做到这一点，因为很多Panel都实现了它（StackPanel，ItemsWrapGrid，...）。

仍然无法让EntranceThemeTransition在自定义面板上工作 编辑： workaround to make EntranceThemeTransition works

具有重新排序和动画/过渡的自定义面板

1 个答案: