WPF拖动按钮实现（一）

前台：page.xaml

<phone:PhoneApplicationPage 
    x:Class="PhoneApp1.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:behaviors="clr-namespace:MultiTouch.Behaviors.Silverlight4;assembly=MultiTouch.Behaviors.Silverlight.WP71"
    xmlns:gestures="clr-namespace:MultiTouch.Behaviors.Silverlight4.Gestures;assembly=MultiTouch.Behaviors.Silverlight.WP71"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"
    mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="728"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Canvas x:Name="LayoutRoot" MouseMove="LayoutRoot_MouseMove" MouseLeave="LayoutRoot_MouseLeave">
        <Canvas.Background>
            <ImageBrush Stretch="Fill" ImageSource="./Image/Backgroup.jpg"/>
        </Canvas.Background>
        <TextBlock x:Name="msgBlock" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom"/>
        <TextBlock x:Name="mouseMsg" Grid.Row="0" Grid.Column="1" VerticalAlignment="Bottom"/>
        <!--TitlePanel 包含应用程序的名称和页标题-->
        <StackPanel Grid.Row="2" Grid.Column="2" x:Name="TitlePanel" Margin="140,17,12,234" Canvas.Left="419" Canvas.Top="161" Height="96" Width="96">
            <Image Stretch="Fill" Source="./Image/doubleClick.png"></Image>
        </StackPanel>
        <StackPanel  Grid.Row="2" Grid.Column="2" Margin="82,128,67,118" x:Name="stackPanel2" Canvas.Left="432" Canvas.Top="193">
            <Image Stretch="Fill" Source="./Image/click.png" Height="100" Width="100" MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseLeftButtonUp="Image_MouseLeftButtonUp" />
        </StackPanel>
        <!--ContentPanel - 在此处放置其他内容-->
        <Canvas x:Name="ContentPanel" Grid.Row="2" Width="250" Height="250" MouseLeftButtonUp="ContentPanel_MouseLeftButtonUp" Margin="8,17,8,79" Canvas.Left="27" Canvas.Top="157">
            <Image x:Name="MouseButton" Stretch="None" Source="./Image/Button.png" Grid.ColumnSpan="2" Height="120" Width="120" Canvas.Top="65" Canvas.Left="65" MouseLeftButtonDown="MouseButton_MouseLeftButtonDown" MouseLeave="MouseButton_MouseLeave"/>
        </Canvas>
    </Canvas>
</phone:PhoneApplicationPage>

后台：page1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using MultiTouch.Behaviors.Silverlight4;

namespace PhoneApp1
{
    public partial class Page1 : PhoneApplicationPage
    {
        bool IsMove = false;
        bool IsClick = false;
        Point centerP = new Point(125, 125);
        Point mousePoint;
        double submitX, submitY;

        private double CentX
        {
            get
            {
                return (double)MouseButton.GetValue(Canvas.LeftProperty) + MouseButton.Width / 2;
            }
            set
            {
                value = value - MouseButton.Width / 2;
                MouseButton.SetValue(Canvas.LeftProperty, value);
            }
        }

        private double CentY
        {
            get
            {
                return (double)MouseButton.GetValue(Canvas.TopProperty) + MouseButton.Height / 2;
            }
            set
            {
                value = value - MouseButton.Height / 2;
                MouseButton.SetValue(Canvas.TopProperty, value);
            }
        }

        public Page1()
        {
            InitializeComponent();
        }

        private void MouseButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            IsMove = true;
            msgBlock.Text = string.Format("{0}:{1}", (int)mousePoint.X, (int)mousePoint.Y);
            msgBlock.Text = ((int)(Math.Sqrt((CentX - 125) * (CentX - 125) + (CentY - 125) * (CentY - 125)))).ToString();
            
        }

        private void ContentPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            IsMove = false;
            CentX = 125;
            CentY = 125;
        }

        private void MouseButton_MouseLeave(object sender, MouseEventArgs e)
        {
            Point mousePoint = e.GetPosition(ContentPanel);
        }

        private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        { 
            mousePoint = e.GetPosition(ContentPanel);
            msgBlock.Text = string.Format("{0}:{1}", (int)mousePoint.X, (int)mousePoint.Y);

            //要提交的坐标
            submitX = CentX - 125;
            submitY = CentY - 125;

            int range=(int)(Math.Sqrt(submitX * submitX + submitY * submitY));
            msgBlock.Text = range.ToString();
            if (IsMove)
            {
                Submit(submitX, submitY);
                //test...
                mouseMsg.Text = string.Format("{0}:{1}", (int)CentX, (int)CentY);
                //if (range < 65)
                //{
                    CentX = mousePoint.X - 5;
                    CentY = mousePoint.Y - 3;
                //}
                //else
                //{
                //    CentY = 65 * Math.Sin(Math.Asin(mousePoint.Y / Math.Sqrt((mousePoint.X * mousePoint.X) + (mousePoint.Y * mousePoint.Y)))) + 126;
                //    CentX = 65 * Math.Cos(Math.Acos(mousePoint.X / Math.Sqrt((mousePoint.X * mousePoint.X) + (mousePoint.Y * mousePoint.Y)))) + 126;
                //}
            }
        }

        private void LayoutRoot_MouseLeave(object sender, MouseEventArgs e)
        {
            IsMove = false;
            CentX = 125;
            CentY = 125;
        }

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            IsClick = true;
        }

        private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (IsClick)
            { 
            }
        }

        public void Submit(double submitX, double submitY)
        {
            //loding...
        }

    }
}

本来要实现限定按钮的移动范围，但是遇到点问题，下次更新时，实现。。。