Manu Fourneau Manu Fourneau - 1 month ago 15
C# Question

Drop event not firing on wpf grid

I'm trying to develop an ancient form of chess, Chaturaji, as an assignment for school. I've got some very basic xaml setup that should allow me to drag and drop an image element within a grid.

<Page
x:Class="Projectg.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Projectg"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid AllowDrop="True" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="900">
</ColumnDefinition>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="900"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Background="Transparent" x:Name="grdGrid" AllowDrop="True" Grid.Column="1" Grid.Row="1" Drop="grdGrid_Drop" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />

</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image CanDrag="True" x:Name="Image" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="0" Source="/images/boat.png" DragStarting="Boat_DragStarting" Drop="Boat_Drop" DragOver="Image_DragOver" ></Image>
<Image CanDrag="True" Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="0" Source="/images/horse.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="0" Source="/images/elephant.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="0" Source="/images/crown.png" ></Image>

<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="0" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="1" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="2" Grid.Column="1" Source="/images/pawn.png" ></Image>
<Image Canvas.ZIndex="1" Height="80" Width="80" Grid.Row="3" Grid.Column="1" Source="/images/pawn.png" ></Image>


</Grid>

</Grid>
</Page>


When I try to drag the image over the grid the mouse shows the “Drop Not Allowed” cursor and releasing the image does not fire the Drop event. I asked a teacher about this and she said it was probably because I did not set a background for my grid.

I quickly updated the code, but no luck, the event still did not fire. She didn't really know what was going on and told me to email her if the problem persisted.

I thought I would ask here first.

Thanks in advance for any help.

Answer

A quick glance at the MSDN UWP Drag and Drop page suggests that you need to handle the DragOver event, and indicate what drop operations the control will accept (true in any form of XAML and IIRC winforms etc. as well). In UWP, that's the AccepttedOperation property on the event args object (WPF calls that property Effects and it's a different enum type):

private void Grid_DragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
}
Comments