c# - UWP:- 如何在拖动项目时创建拖动 UI(指示要放置项目的位置)？

Question

我正在尝试创建类似于以下屏幕截图的拖动 UI。如果我在我的 ListView 中将 AllowDrop 设置为“true”，它会自动打开空间，为拖放的项目留出空间。但是，我更热衷于提供一个 UI，指示“放在此处”而不是空格。

当我移动到拖动的项目上时，如何创建如下所示的带有占位符指示的内容？

有什么想法吗？

Answer 1

How can I create of something like in the below with placeholders indication when I move over the dragged item?

根据您的要求，您可以使用 ListView Footer 来实现此功能，并在 DragOver 和 中处理 Footer Collapsed 属性删除 事件处理程序。请引用以下代码。

private  void TargetListView_DragOver(object sender, DragEventArgs e)
{
    // Our list only accepts text
    e.AcceptedOperation = (e.DataView.Contains(StandardDataFormats.Text)) ? DataPackageOperation.Copy : DataPackageOperation.None;
    VisualStateManager.GoToState(this, "Inside", true);
}


private async void TargetListView_Drop(object sender, DragEventArgs e)
{

    if (e.DataView.Contains(StandardDataFormats.Text))
    {

        var def = e.GetDeferral();
        var s = await e.DataView.GetTextAsync();
        var items = s.Split('\n');
        foreach (var item in items)
        {
            _selection.Add(item);
        }
        e.AcceptedOperation = DataPackageOperation.Copy;
        VisualStateManager.GoToState(this, "Outside", true);
        def.Complete();
    }
}

Xaml

<ListView
    x:Name="TargetListView"
    Grid.Row="2"
    Grid.Column="1"
    Margin="8,4"
    AllowDrop="True"
    CanDragItems="True"
    CanReorderItems="True"
    DragItemsCompleted="TargetListView_DragItemsCompleted"
    DragItemsStarting="TargetListView_DragItemsStarting"
    DragOver="TargetListView_DragOver"
    Drop="TargetListView_Drop"
    >
    <ListView.Footer>
        <Border Background="DarkGray" Opacity="0.8">
            <TextBlock
                x:Name="Footer"
                Height="44"
                Margin="0,0,0,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                FontSize="25"
                Text="Please Place your item"
                TextAlignment="Center"
                Visibility="Collapsed"
                />
        </Border>
    </ListView.Footer>
</ListView>


<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="DragDropGroup">
        <VisualState x:Name="Outside" />
        <VisualState x:Name="Inside">
            <VisualState.Setters>
                <Setter Target="Footer.Visibility" Value="Visible" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Op 在下面发布了 uservoice，如果有人认为这有帮助，请投票。

Allowing custom air drop UI while dragging items of a ListView