Question

I’m asking this question after reading this answer on StackOverflow.

The supplied answer works great for allow you to move a whole control. But supposed I have a Usercontrol I’ve created like so:

<UserControl x:Class='WpfTest.UserControl1'     xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'     xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'     Height='300' Width='300'>     <Border Background='Blue'>         <Grid>             <Grid.ColumnDefinitions>              </Grid.ColumnDefinitions>             <Grid.RowDefinitions>                 <RowDefinition Height='26'></RowDefinition>                 <RowDefinition Height='*'></RowDefinition>             </Grid.RowDefinitions>             <Canvas Grid.Row='0' Background='orange'></Canvas>             <Canvas Grid.Row='1' Background='Purple'></Canvas>         </Grid>     </Border> </UserControl> 

I only want the control to move when I’m mouse clicking on the header part of the control, Grid.Row[0] (orange part). I don’t want the control to respond to drag operations when clicking on the rest of the control.

How can I accomplish this?

Answer 1

So, after some digging around, I solved my problem. The solution was to utilize a Thumb.

My UserControl XAML looks like this:

<UserControl x:Class='WpfTest.UserControl1'     xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'     xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'     Height='300' Width='300'>     <Border Background='Blue'>         <Grid>             <Grid.ColumnDefinitions>              </Grid.ColumnDefinitions>             <Grid.RowDefinitions>                 <RowDefinition Height='26'></RowDefinition>                 <RowDefinition Height='*'></RowDefinition>             </Grid.RowDefinitions>             <Canvas Grid.Row='0' Background='orange'></Canvas>             <Thumb Grid.Row='0' Background='Cyan' DragCompleted='OnDragComplete' DragStarted='OnDragStarted' DragDelta='OnDragDelta' ></Thumb>             <Canvas Grid.Row='1' Background='Purple'></Canvas>         </Grid>     </Border> </UserControl> 

We can see the addition of the Thumb with a different color, which covers up the orange header (letting me know the thumb is actually there).

Code behind for the Thumb events looks like this:

public partial class UserControl1 : UserControl     {         private bool _isDragging;         private double _x;         private double _y;          public UserControl1()         {             InitializeComponent();         }          private void OnDragComplete(object sender, DragCompletedEventArgs e)         {             _isDragging = false;          }          private void OnDragStarted(object sender, DragStartedEventArgs e)         {             _isDragging = true;              _x = (double)GetValue(Canvas.LeftProperty);             _y = (double)GetValue(Canvas.TopProperty);          }          private void OnDragDelta(object sender, DragDeltaEventArgs e)         {             if (!_isDragging) return;              _x += e.HorizontalChange;             _y += e.VerticalChange;               SetValue(Canvas.LeftProperty,_x );             SetValue(Canvas.TopProperty,_y );         }     } 

And this got me exactly what I wanted. One question did remain: I see some tearing of the usercontrol when I move it around. It’s just not a smooth drawing effect, and I can’t seem to find a way to eliminate that. Any clues?