4行のXAMLと8行のコード追加でノギスアプリを作る

#wp7dev_jp

さて、ManipulationDelta を使ってノギスを作ってみます。

ソースコードは以下のものだけなので、ぜひ作ってみてください！

今回は横画面のアプリなので、PhoneApplicationPage のSupportedOrientations とOrientation のプロパティをどちらも Landscapeにします。

 <phone:PhoneApplicationPage 

         :

    SupportedOrientations="Landscape" Orientation="Landscape">

    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->

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

        <Path x:Name="move" Data="M132,0.5 L132,3.8 L127,3.8 L130,2.5 C130,1.8 130,1.1 132,0.5 z 

              M40,0.5 L40,66 L35,70 L35,100 L85,100 L85,100 L432,100 L432,103 

              L432,130 L432,260 L432,260 L432,260 C432,281 416,300 396,300 C375,300 

              360,280 360,260 L360,260 L175,260 L175,260 C167,295 142.,408 132,451 

              C117,481 91,481 87,481 L87,286 L92,281 C92,281 92,300 92,232 L92,230 L92,230 

              L92,130 L86,130  L0,131 L0,127 C0,103 0,85 0,85 C0,28 25,10 40,0.5 z" 

              Fill="#FF767575" Margin="8,0,0,0" Stretch="Fill" UseLayoutRounding="False" 

              HorizontalAlignment="Left" Width="433" Height="480" 

              ManipulationDelta="move_ManipulationDelta" />

        <Path x:Name="top" Data="M0,100 L50,100 L50,70 L45, 65 L45,0 C60,10 85,28 85,85 

              C85,85 85,280 85,280 L90,285 L90,480 C85,480 60,480 45,450 C33,400 0,250 0,250 z" 

              Fill="Gray" Margin="0" Stretch="Fill" UseLayoutRounding="False" 

              HorizontalAlignment="Left" Width="96" Height="480"/>

        <Rectangle x:Name="scale" Fill="#FF9F9F9F" Height="100" Margin="0,127,0,0" 

                   Stroke="Gray" VerticalAlignment="Top" StrokeThickness="6"/>

        <TextBlock Height="70" HorizontalAlignment="Center" Margin="12,143,0,0" 

                   Name="txtScale" Text="0.00 cm" VerticalAlignment="Top" FontSize="48" />

    </Grid>

さて、Path による絵が2つ、Rectangle が1つありますが、これが絵です。

動かすのは初めの Path （インスタンス名：move）だけです。ちゃんとノギスっぽくなってますね。

そしてTextBlockが1つ。

では、ManipulationDeltaの実装です。

 public partial class MainPage : PhoneApplicationPage

{

    private const Double leftside = 8.0;

    private const Double dpi = 101;

    Double X;

    // コンストラクター

    public MainPage()

    {

        InitializeComponent();

        X = leftside;

    }

    private void move_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

    {

        X += e.DeltaManipulation.Translation.X;

        if (X < leftside) X = leftside; 

        move.Margin = new Thickness(X, 0, 0, 0);

        txtScale.Text = String.Format("{0:f2}", (X-leftside) / dpi) + " cm";

    }

}

今回は初期位置補正用の leftside と、画面と実サイズのスケール値 dpi を変数として持っています。

実際の移動処理は、前回の ManipulationDelta と同じです。移動が横方向だけなのでより簡単です。そして、Marginの位置をdpiで割って実際のcmに換算しています。コード自体は10行にも満たないですね。

このアプリのdpi＝101はIS12Tですが、当然ほかのデバイスで使えるようにするためには、キャリブレーション機能が必要です。私がこの値を算出するときには画面上で5cmを図ってその時のMarginから計算しました。 dpi = Margin.Left / 500 なので、そういった機能をつけるとアプリとして仕上がるでしょうね。

今回、この画像はPathを使って描画しました。これは意味があります。それは次回。