Windows Phone 可以拖动的小球

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

效果如图：

Silverlight中高级的touch主要使用ManipulationStarted、ManipulationDelta 和 ManipulationCompleted三个事件来处理，低级的touch主要是由 Touch.FrameReported 事件来处理 

 

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

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

这个使用RenderTransform的TranslateTransform（移动位置）、ScaleTransform（增加或者减小大小）即可实现。

 

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

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

然后我想显示一些移动或者缩放的信息，所以我在里面又放进一个TextBlock。Xaml如下：

 <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状态如下：