Here’s a simple program called TouchCanvas. A Canvas
hosts three Ellipse elements colored
red, green, and blue:
Example 1. Silverlight
Project: TouchCanvas File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Canvas Name="canvas">
<Ellipse Canvas.Left="50"
Canvas.Top="50"
Width="100"
Height="100"
Fill="Red" />
<Ellipse Canvas.Left="150"
Canvas.Top="150"
Width="100"
Height="100"
Fill="Green" />
<Ellipse Canvas.Left="250"
Canvas.Top="250"
Width="100"
Height="100"
Fill="Blue" />
</Canvas>
</Grid>
|
The code file overrides the OnManipulationStarted and OnManipulationDelta methods in MainPage. Setting the ManipulationContainer property to the Canvas in the first override isn’t strictly
required.
Example 2. Silverlight
Project: TouchCanvas File: MainPage.xaml.cs (excerpt)
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
{
args.ManipulationContainer = canvas;
base.OnManipulationStarted(args);
}
protected override void OnManipulationDelta(ManipulationDeltaEventArgs args)
{
UIElement element = args.OriginalSource as UIElement;
Point translation = args.DeltaManipulation.Translation;
Canvas.SetLeft(element, Canvas.GetLeft(element) + translation.X);
Canvas.SetTop(element, Canvas.GetTop(element) + translation.Y);
args.Handled = true;
base.OnManipulationDelta(args);
}
}
|
The OnManipulationDelta override moves one of the ellipses by obtaining its Left and Top settings, adding the delta translation
factors, and then setting them back, all in fairly short and clean
statements.
