• Windows Phone 7触摸屏事件Manipulation的使用


     Windows Phone 7为Silverlight和XNA提供了一个非常灵敏的可触摸的屏幕,它不像一些旧的模拟鼠标的触屏,或识别字迹的屏。

      在Windows Phone 7的多触摸屏上可以检测到至少四根同时存在的手指,并且一起操作使触摸屏充分发挥效果

      在silverlight开发中通过事件来实现触屏事件的检测,包括低级别的和高级别的接口。低级别主要是FrameReported 事件,高级别的是定义在UIElement类中的事件,包含ManipulationStarted,Manipulationdelta,ManipulationCompleted,这三个事件互相配合来完成触控操作,它们可以在任何UIElement的子类中使用。

      今天这讲是Manipulation事件。

    一、事件说明

      1.ManipulationStarted事件

      当手指按下触摸屏时发生

      2.Manipulationdelta

      当手指在触摸屏移动时发生

      3.ManipulationCompleted

      当手指释放触摸屏时发生

    二、具体运用

    1.新建项目

    2.添加一张图片用于演示

    3.修改MainPage.xaml

    <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
           
            <TextBlock x:Name="title" FontSize="40" Text="Multi-Touch" TextAlignment="Center"/>
            <Canvas x:Name="ContentCanvas" Grid.Row="1">
                <Image Source="1.jpg"
                       x:Name="image1" Stretch="Fill" Width="500" ManipulationDelta="image1_ManipulationDelta" ManipulationStarted="image1_ManipulationStarted"  ManipulationCompleted="image1_ManipulationCompleted">
                </Image>
            </Canvas>
            <TextBlock x:Name="info" FontSize="25" Grid.Row="2" TextWrapping="Wrap" Width="500" MinHeight="40" Text="屏幕信息" TextAlignment="Center" VerticalAlignment="Bottom"/>
        </Grid>

    Image用于演示

    TextBlock用于显示移动手指的坐标信息

    4.修改MainPage.cs

     public partial class MainPage : PhoneApplicationPage
        {
            private CompositeTransform compositeTransform;

            // Constructor
            public MainPage()
            {
                InitializeComponent();
                SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

               
               // ManipulationDelta += image1_ManipulationDelta;
                compositeTransform = new CompositeTransform();
                image1.RenderTransform = compositeTransform;
            }

            private void image1_ManipulationDelta(Object sender, ManipulationDeltaEventArgs e)
            {
                if (e.DeltaManipulation.Scale.X != 0)
                    compositeTransform.ScaleX *= e.DeltaManipulation.Scale.X;
                if (e.DeltaManipulation.Scale.Y != 0)
                    compositeTransform.ScaleY *= e.DeltaManipulation.Scale.Y;

                compositeTransform.TranslateX += e.DeltaManipulation.Translation.X;
                compositeTransform.TranslateY += e.DeltaManipulation.Translation.Y;
                this.info.Text = "图片移动中" + "\n" + "X:" + e.ManipulationOrigin.X.ToString() + "   " + "Y:" + e.ManipulationOrigin.Y.ToString();
            }

            private void image1_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
            {
                this.info.Text = "图片开始移动"+"\n"+"X:"+e.ManipulationOrigin.X.ToString()+"   "+"Y:"+e.ManipulationOrigin.Y.ToString();
            }

            private void image1_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
            {
                this.info.Text = "图片停止移动" + "\n" + "X:" + e.ManipulationOrigin.X.ToString() + "   " + "Y:" + e.ManipulationOrigin.Y.ToString();
            }
        }

    源码下载

  • 相关阅读:
    网页简单布局之结构与表现原则(HTML/CSS)
    浅谈搜索引擎SEO(HTML/CSS)
    Vue小案例(一)
    vue2.0中的计算属性
    Vue.js双向绑定原理
    Vue实例对象的数据选项(火柴)
    基于Vue的WebApp项目开发(六)
    基于Vue的WebApp项目开发(五)
    基于Vue的WebApp项目开发(四)
    基于Vue的WebApp项目开发(三)
  • 原文地址:https://www.cnblogs.com/salam/p/1914167.html
Copyright © 2020-2023  润新知