这个程序主要实现一个简单的手指拖动小球移动的效果,主要用到的是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状态如下: