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

最新推荐文章于 2025-11-23 10:07:57 发布

原创最新推荐文章于 2025-11-23 10:07:57 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#windows #image #object

Windows Store apps 同时被 2 个专栏收录

88 篇文章

订阅专栏

Windows 8开发

56 篇文章

订阅专栏

本文详细介绍了如何在Windows Store应用中移动图片控件。通过新建一个Blank App，然后在MainPage.xaml和MainPage.xaml.cs文件中添加特定代码，实现了图片位置的动态改变。文中提供了一个简单的步骤指南，并展示了运行效果。

注：本文由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;
}