How to move a Grid Panel in WPF Window

Question

HI,

How do I move (drag) a Grid Panel inside a WPF Window? The Grid Panel does not have a Position or Location or X and Y coordinate porperty. All I am looking at is to move the Grid Panel from its current location to a new location using Mouse so that the controls that are "burried" underneath it will show up.

Any pointers?

Many Thanks.

Solution 1

Here's some code examples to get you started:

In XAML:

Create a grid and define a render transform on it:

<Grid x:Name="grid" Background="Blue" 
      Width="100" Height="100" 
      MouseDown="Grid_MouseDown" MouseMove="Grid_MouseMove" MouseUp="Grid_MouseUp">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="tt"/>
    </Grid.RenderTransform>
</Grid>

Name the control that you want the grid to move within:

<Window x:Name="window" ...>
    <Grid x:Name="grid"...
</Window>

In code behind:

Point m_start;
Vector m_startOffset;

private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{
    m_start = e.GetPosition(window);
    m_startOffset = new Vector(tt.X, tt.Y);
    grid.CaptureMouse();
}

private void Grid_MouseMove(object sender, MouseEventArgs e)
{
    if (grid.IsMouseCaptured)
    {
        Vector offset = Point.Subtract(e.GetPosition(window), m_start);

        tt.X = m_startOffset.X + offset.X;
        tt.Y = m_startOffset.Y + offset.Y;
    }
}

private void Grid_MouseUp(object sender, MouseButtonEventArgs e)
{
    grid.ReleaseMouseCapture();
}

Solution 2

Based on Josh G's answer

Josh's answer is excellent if you want to move one grid, but lacks capabilities for movement of several elements.
This is how to move several elements separately

XAML

<Grid x:Name="gridHost">
    <Grid x:Name="gridBlue" Background="Blue" Width="100" Height="100" MouseDown="Grid_MouseDown" MouseMove="Grid_MouseMove" MouseUp="Grid_MouseUp" Margin="-100,0,0,0">
        <Grid.RenderTransform>
            <TranslateTransform/>
        </Grid.RenderTransform>
    </Grid>
    <Grid x:Name="gridRed" Background="Red" Width="100" Height="100" MouseDown="Grid_MouseDown" MouseMove="Grid_MouseMove" MouseUp="Grid_MouseUp" Margin="100,0,0,0">
        <Grid.RenderTransform>
            <TranslateTransform/>
        </Grid.RenderTransform>
    </Grid>
</Grid>

Code behind

Point m_start;
    Vector m_startOffset;

    private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
    {
        FrameworkElement element = sender as Grid;
        TranslateTransform translate = element.RenderTransform as TranslateTransform;

        m_start = e.GetPosition(gridHost);
        m_startOffset = new Vector(translate.X, translate.Y);
        element.CaptureMouse();
    }

    private void Grid_MouseMove(object sender, MouseEventArgs e)
    {
        FrameworkElement element = sender as Grid;
        TranslateTransform translate = element.RenderTransform as TranslateTransform;

        if (element.IsMouseCaptured)
        {
            Vector offset = Point.Subtract(e.GetPosition(gridHost), m_start);

            translate.X = m_startOffset.X + offset.X;
            translate.Y = m_startOffset.Y + offset.Y;
        }
    }

    private void Grid_MouseUp(object sender, MouseButtonEventArgs e)
    {
        FrameworkElement element = sender as Grid;
        element.ReleaseMouseCapture();
    }