Windows Store apps开发[30]移动控件位置

注：本文由BeyondVincent(破船)原创首发

        转载请注明出处：BeyondVincent(破船)@DevDiv.com

更多内容请查看下面的帖子

[DevDiv原创]Windows 8 开发Step by Step

今天看到坛子里有人问如何移动图片

http://www.devdiv.com/thread-135266-1-1.html 

    刚好小弟我略懂，就为大家写一个小示例：如何在画面中用手势移动一个控件的位置，就不多说原理，直接上代码和效果图，其实原理也很简单哦。要是不懂的话，跟帖，我会随时来解答滴。

这里有官方参考资料

http://msdn.microsoft.com/en-us/library/windows/apps/hh761498.aspx

1、新建一个Blank App

2、在MainPage.xaml文件中添加如下代码

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">    <Image Source="/Assets/1.jpg"            ManipulationStarted="Image_ManipulationStarted_1"            ManipulationDelta="Image_ManipulationDelta_1"            ManipulationCompleted="Image_ManipulationCompleted_1"             ManipulationMode="All"             Margin="342,34,591,337">        <Image.RenderTransform>            <TranslateTransform x:Name="translateTransform"/>        </Image.RenderTransform>    </Image>    <Image Source="/Assets/BeyondVincentWin8Logo.png" Height="100" Margin="568,658,0,10"                    ManipulationStarted="Image_ManipulationStarted_1"                    ManipulationDelta="Image_ManipulationDelta_1"                    ManipulationCompleted="Image_ManipulationCompleted_1"                     ManipulationMode="All" >                <Image.RenderTransform>                    <TranslateTransform x:Name="translateTransform1"/>                </Image.RenderTransform>    </Image></Grid>

代码中要注意下面三个东西是添加事件处理

ManipulationStarted

ManipulationDelta

ManipulationCompleted

记得再加上ManipulationMode="All"

3、MainPage.xaml.cs文件中，添加如下代码

private void Image_ManipulationStarted_1(object sender, ManipulationStartedRoutedEventArgs e){    e.Handled = true;}private void Image_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e){    Image image = sender as Image;                    if (image.RenderTransform.Equals(translateTransform))    {        this.translateTransform.X += e.Delta.Translation.X;        this.translateTransform.Y += e.Delta.Translation.Y;    }    else    {        this.translateTransform1.X += e.Delta.Translation.X;        this.translateTransform1.Y += e.Delta.Translation.Y;    }}private void Image_ManipulationCompleted_1(object sender, ManipulationCompletedRoutedEventArgs e){    e.Handled = true;}

4、运行效果如下：

用鼠标可以拖动图片

5、代码下载地址