How do you overlay a control over a grid that it is not in (xaml/wpf)

Question

I have a grid that serves as a drag/drop area between textboxes, however, placing it between them causes the textboxes to be displaced. How can I get it so that the drag/drop grid is behind the text boxes, instead of in between them?

The first grid is the drag/drop area and below is the code for the textboxes:

<Grid Grid.Column="0" Height="Auto" Width="20" AllowDrop="True" Background="White"
      DragEnter="Grid_DragEnter" DragLeave="Grid_DragLeave" Drop="Grid_Drop" Tag="{Binding}"/>

<Grid>
   <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>
   <TextBlock HorizontalAlignment="Left" Margin="5,2" 
        Text="some text" 
        VerticalAlignment="Center" FontSize="5" />
</Grid>

A picture of what I mean , where the black boxes are the textboxes, and everything enclosed in the red is the grid area where things can be dragged and dropped.

Answer 1

This works for me. Code behind is a mild bummer, especially referencing the droptarget by name. It would be easy to turn that into an attached property that you bind to the droptarget element, which would be convenient for use in templates etc. Anyhow you can't do drag/drop without codebehind, so there you are. Sometimes life gives you codebehind. Use it to, uh, make, um, lemons.

A lot of this XAML is just fussing around to make the elements overlap each other the way yours do. The Grid.Column / Grid.ColumnSpan stuff is important for the overlapping layout you have in mind.

Note that the TextBoxes use the PreviewDragOver event, not DragOver . DragOver wasn't being raised. Not sure if that's a bug or my faulty understanding, but a lot of people seem to have run into trouble getting DragOver to work with WPF TextBox .

XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <Grid 
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Margin="80,0,80,0"
        Height="80"
        VerticalAlignment="Center"
        HorizontalAlignment="Stretch"
        Drop="TextBox_Drop"
        DragOver="TextBox_DragOver"
        Background="DeepSkyBlue"
        x:Name="DropTargetGrid"
        AllowDrop="True"
        ></Grid>

    <TextBox 
        Grid.Column="0"
        Margin="40,40,10,40" 
        Drop="TextBox_Drop"
        PreviewDragOver="TextBox_DragOver"
        AllowDrop="True"
        VerticalAlignment="Center"
        />

    <TextBox 
        Grid.Column="1"
        Margin="10,40,40,40" 
        Drop="TextBox_Drop"
        PreviewDragOver="TextBox_DragOver"
        AllowDrop="True"
        VerticalAlignment="Center"
        />
</Grid>

Code behind:

private void TextBox_Drop(object sender, DragEventArgs e)
{
    //  Do whatever
}

private void TextBox_DragOver(object sender, DragEventArgs e)
{
    var ptTargetClient = e.GetPosition(DropTargetGrid);

    if (ptTargetClient.X >= 0 && ptTargetClient.X <= DropTargetGrid.ActualWidth
        && ptTargetClient.Y >= 0 && ptTargetClient.Y <= DropTargetGrid.ActualHeight)
    {
        e.Handled = true;
        e.Effects = DragDropEffects.Move;
    }
}