画面上のオブジェクトをタッチで移動する応用：Scale

#wp7dev_jp

機能紹介した、画面上のオブジェクトをタッチで移動する方法ですが、応用してみました。ScreenScaleです。

基準となる Rectangle と、移動させる Rectangle、さらにテキストを表示しています。

 <Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>

        <RowDefinition Height="75" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <Rectangle Fill="White" Opacity="0.5"

                Stroke="Green" StrokeThickness="1" />

    <Grid Grid.Row="1" Name="grid1">

        <TextBlock Name="textBlock1" FontSize="36"

                    VerticalAlignment="Center"

                    HorizontalAlignment="Center" />

        <Rectangle Fill="White" Height="75"

                    VerticalAlignment="Top" Opacity="0.5"

                    Stroke="Green" StrokeThickness="1"

                    MouseMove="Rectangle_MouseMove" />

    </Grid>

</Grid>

さて、実装今回は、縦方向だけの移動をとってます。基本は移動しているだけ。そして移動したドット数をテキストで表示しています。

 private void Rectangle_MouseMove(object sender, MouseEventArgs e)

    FrameworkElement obj = sender as FrameworkElement;

    Double y = e.GetPosition(grid1).Y - obj.Height / 2;

    if (y < 0) y = 0;

    obj.Margin = new Thickness( 0, y, 0, 0);

    textBlock1.Text = String.Format("{0:f2}", y/100)+" cm";

ね。実は上の Rectangle と移動できるRectangle の間の長さを図るアプリです。スクリーンスケールですね。IS12Tの液晶を測ってみてください。縦方向は800ドット≒8cmなんです。つまり、ドット数÷100でほぼ縦の長さ(cm) になるんですね。

IS12Tの液晶を測ってみてください。縦方向は800ドット≒8cmなんです。つまり、ドット数÷100でほぼ縦の長さ(cm) になるんですね。細かく言うと101で割るとちょうどいいです。

次回は、MouseMove ではなく、ManipulationDelta の使い方をご紹介します。

Additional resources