UWP: - Как создать пользовательский интерфейс перетаскивания (указывающий, где элементы должны быть отброшены) при перетаскивании элементов?

Question

Я пытаюсь создать пользовательский интерфейс для перетаскивания, как на скриншоте ниже. Если я установлю AllowDrop в моем списке в «true», он автоматически откроет пробелы, чтобы освободить место для перетаскиваемых элементов. Но я больше заинтересован в том, чтобы пользовательский интерфейс указывал вместо пробелов "drop here".

Как создать что-то похожее на приведенное ниже с указанием заполнителей при перемещении по перетаскиваемому элементу?

Есть мысли?

Answer 1

Как я могу создать что-то похожее на приведенное ниже с указанием местозаполнителей при перемещении по перетаскиваемому элементу?

Для вашего требования вы можете использовать ListView Нижний колонтитул, чтобы понять этои обработайте свойство Footer Collapsed в обработчике событий DragOver и Drop.Пожалуйста, используйте следующий код.

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>

Опубликуемый ниже счет пользователя, если кто-то посчитает это полезным, пожалуйста, проголосуйте.

Разрешение пользовательского интерфейса воздушной капли при перетаскивании элементов ListView