Windows Phone 可以拖动的小球

这个程序主要实现一个简单的手指拖动小球移动的效果,主要用到的是Windows phone中的touch操作和元素的Transforms操作

效果如图:

Silverlight中高级的touch主要使用ManipulationStartedManipulationDelta ManipulationCompleted三个事件来处理,低级的touch主要是由 Touch.FrameReported 事件来处理 

 

这个小程序由于是使用手指拖动,故使用高级的touch,然后当手指拖动小球的时候根据手指位置移动改变小球的位置,

当手指做出缩放操作时候可以改变小球的大小(缩放在模拟器上没办法看到效果,因为模拟器不支持这种复杂的touch),

这个使用RenderTransformTranslateTransform(移动位置)、ScaleTransform(增加或者减小大小)即可实现。

 

首先是绘制界面,在ContentPane这个Grid中首先使用Ellispse绘制一个圆,为了看起来像个小球,可以给它添加一个放射性渐变的填充色。

为了移动和缩放小球当然得为椭圆添加一个RenderTransform了。

然后我想显示一些移动或者缩放的信息,所以我在里面又放进一个TextBlockXaml如下:

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Name="postionInfo" Text="textInfo"></TextBlock>
            <Ellipse Width="100" Height="100" Grid.Row="1" RenderTransformOrigin="0.5 0.5" ManipulationDelta="Ellipse_ManipulationDelta">
                <Ellipse.Fill>
                    <RadialGradientBrush Center="0.4 0.4" GradientOrigin="0.4 0.4">
                        <GradientStop Color="White" Offset="0"></GradientStop>
                        <GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"></GradientStop>
                    </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <CompositeTransform></CompositeTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>

  

您可能已经注意到上面为椭圆添加了ManipulationDelta事件, 通过该事件处理我们就能实现想要的效果了,当

手指在椭圆上移动的时候,就根据手指动作改变小球的RenderTransform,即实现了所要效果。

ManipulationDelta处理代码如下:

 private void Ellipse_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            Ellipse ellipse = sender as Ellipse;
            CompositeTransform transform = ellipse.RenderTransform as CompositeTransform;

            //如果是缩放操作
            if (e.DeltaManipulation.Scale.X > 0 || e.DeltaManipulation.Scale.Y > 0)
            {
                double maxScale = Math.Max(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.Y);
                transform.ScaleX *= maxScale;
                transform.ScaleY *= maxScale;
            }
            //移动操作
            transform.TranslateX += e.DeltaManipulation.Translation.X;
            transform.TranslateY += e.DeltaManipulation.Translation.Y;

            postionInfo.Text = "当前偏移量:X:" + transform.TranslateX.ToString() + " Y:" + transform.TranslateY.ToString()+" 半径:"+(ellipse.ActualWidth/2).ToString();
            //e.Handled=true; 表示该事件已经被处理,不要再执行后面的处理函数
            e.Handled = true;
        }

  

这样小球就可以随便拖动了,效果还可以了,呵呵。

Landscape状态如下:

  

转载于:https://www.cnblogs.com/yinghuochong/archive/2011/09/27/2193635.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值