Learn Silverlight 2 series (5): Implement simple drag-and-drop function

This article is the fifth article in the series, using the mouse event processing described above to achieve a simple drag-and-drop function.

Preparing XAML

In the implementation of drag-and-drop functionality, there are three steps:

1. Press the mouse, trigger the MouseLeftButtonDown event, select the object you want to drag.

2. Move the mouse, trigger the MouseMove event, and move the selected object.

3. Release the mouse, trigger MouseLeftButtonUp events, stop capturing events.

Make a simple interface, with a button to display drag and drop, the following XAML declaration:

<Canvas Background="#46461F">
　　<Button
　　 　 MouseLeftButtonDown="OnMouseDown"
　　　 MouseMove="OnMouseMove"
　　　 MouseLeftButtonUp="OnMouseUp"
　 　　 Canvas.Left="50" Canvas.Top="50" Background="Red"
　　　 FontSize="18"
　　　 Width="160" Height="80">
　　　　 <Button.Content>
　　　　　　<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
　　　　　　 　　　　　　VerticalAlignment="Center">
　　　　　　　　 <Image Source="smile_6.png"></Image>
　　　　　　　　 <TextBlock Text="拖动我" VerticalAlignment="Center" Margin="10"></TextBlock>
　　　　　　 </StackPanel>
　　　　</Button.Content>
　　 </Button>
</Canvas>

Here for the interface to display the effect of the use of the control template, the following will be specifically mentioned.