画面上のオブジェクトをタッチで移動する応用: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) になるんですね。

scale image

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

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

Comments (0)

Skip to main content