CODEWITHSUNDEEP
c#xamluwp
Karthik
Karthik

Reputation: 95

UWP:- How to create drag UI (indicating where the items are to be dropped) while dragging items?

I'm trying to create a drag UI of something like in the below screenshot. If I set AllowDrop in my listview to "true", it automatically opens up spaces to give room for the dragged items to drop. But, I'm more keen on giving a UI indicating stating "drop here" instead of spaces.

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

Any thoughts?

enter image description here

enter image description here

enter image description here

Upvotes: 2

Views: 676

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

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

For your requirement, you could use ListView Footer to realize this feature, and process Footer Collapsed property in the DragOver and Drop event handler. Please refer the following code.

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 posted uservoice below, if anyone think this helpful please vote it up.

Allowing custom air drop UI while dragging items of a ListView

Upvotes: 2

Related Questions