【Windowsストアアプリ】ピンチ操作による拡大・縮小
Windows8.1のストアアプリでセマンティックズームではなく、Webブラウザのようにピンチ操作で拡大・縮小したいという要望があり、やっつけ気味ですが実装してみました。
ピンチ操作に同期してScrollViewer内のGridのサイズを変更する事で内部のViewBoxを拡大・縮小表示します。
・・・なんですが、普通にやるとピンチもスワイプも効かない?
GridのサイズをScrollViewerより1ピクセルだけ大きくしてデフォルトでスクロールバーありの状態にする事でとりあえず回避しています。
WPFのScrollViewerとは少し勝手が違うんでよくわかりません。
本当はもっと良い方法があるんだろうな・・・。
《XAML》
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Width="1200" Height="600" ManipulationDelta="ManipulationDelta" ManipulationMode="All" MinZoomFactor="0.5" MaxZoomFactor="5">
<!-- なにやら動作しないのでScrollViewerよりちょっと大きく。。 -->
<Grid Name="grd" Width="1201" Height="601">
<Viewbox>
<StackPanel>
<TextBlock Text="あいうえお" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="かきくけこ" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="さしすせそ" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="たちつてと" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="なにぬねの" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</Viewbox>
</Grid>
</ScrollViewer>
《コードビハインド》
private void ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
// ピンチ操作時のスケールを元にサイズを再設定
grd.Width *= e.Delta.Scale;
grd.Height *= e.Delta.Scale;
}