ManipulationDelta事件會是在觸摸位置發生變化是引發,比如可以根據用戶在觸摸屏中移動的位置,圖片發生相應的位移,根據客戶兩手指在觸摸屏上的位置,進行圖片的放大縮小;這裏用到的案例就是對圖片實現位移和縮放;
MainPage.xaml主要代碼:
<!--ContentPanel - 在此處放置其他內容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Source="1.jpg" x:Name="imgScale" Width="200" Height="200" ManipulationDelta="imgScale_ManipulationDelta" >
</Image>
</Grid>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Source="1.jpg" x:Name="imgScale" Width="200" Height="200" ManipulationDelta="imgScale_ManipulationDelta" >
</Image>
</Grid>
效果:
從上面可以看到我們引用了一張圖片,並設置了ManipulationDelta事件,該事件的實現是:
View Code
private void imgScale_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
Image els = sender as Image;
CompositeTransform ct = new CompositeTransform();
ct.TranslateX = 0;
if (e.DeltaManipulation.Scale.X!=0||e.DeltaManipulation.Scale.Y!=0)
{
double maxOne = Math.Max(e.DeltaManipulation.Scale.Y, e.DeltaManipulation.Scale.X);
ct.ScaleX *= maxOne;
ct.ScaleY *= maxOne;
}
//e.IsInertial
this.PageTitle.Text = "移動,X:" + e.ManipulationOrigin.X.ToString() + "\nY:" + e.ManipulationOrigin.Y.ToString();
ct.TranslateX = e.DeltaManipulation.Translation.X;
ct.TranslateY = e.DeltaManipulation.Translation.Y;
els.RenderTransform = ct;
e.Handled = true;
}
{
Image els = sender as Image;
CompositeTransform ct = new CompositeTransform();
ct.TranslateX = 0;
if (e.DeltaManipulation.Scale.X!=0||e.DeltaManipulation.Scale.Y!=0)
{
double maxOne = Math.Max(e.DeltaManipulation.Scale.Y, e.DeltaManipulation.Scale.X);
ct.ScaleX *= maxOne;
ct.ScaleY *= maxOne;
}
//e.IsInertial
this.PageTitle.Text = "移動,X:" + e.ManipulationOrigin.X.ToString() + "\nY:" + e.ManipulationOrigin.Y.ToString();
ct.TranslateX = e.DeltaManipulation.Translation.X;
ct.TranslateY = e.DeltaManipulation.Translation.Y;
els.RenderTransform = ct;
e.Handled = true;
}
上述代碼的藐視:獲得xaml中已經實例的Ellipse對象,並實例化一個新的CompositeTransform對象,判斷縮放的比例是否爲空,如果不爲空,判斷在X軸和Y軸哪個比例較大,取較大者作爲縮放比例,然後實現相應的位移;這裏用到的幾個知識點是:
sender as [元素類] 獲得發生該事件的元素
e.DeltaManipulation 獲得最近發生的更改
e.DeltaManipulation.Scale 官方:獲取操作已調整的作爲乘數的量 (我的理解:獲取移動的值並作爲放大縮小的比例值),可繼續點出對應的X,Y值
e.DeltaManipulation.Translation 獲取通過觸摸移動的尺寸,可繼續點出對應的X,Y值
e.ManipulationOrigin 獲得操作的起始點,可繼續點出對應的X,Y值
e.IsInertial 獲取是否在慣性運動期間發生 ManipulationDelta 事件,在上一篇中介紹到變換,你會發現很多文字都會超出文本所能承受的區域,此時就可以判斷文字的變換效果十分超出現實區域,如果超過,則e.complete(); 結束該觸摸事件
e.CumulativeManipulation 獲取累計的操作更改,類似於歷史記錄
e.ManipulationContainer 獲取定義操作座標的容器,和sender as [元素類] 比如上列代碼的容器是Image
如果鼠標進行模擬,做水平向右移動,則效果是: