XAML8行 コード5行でルーペアプリを作る

#wp7dev_jp

Raw カメラを使った簡単なルーペアプリです。枠やテキストは雰囲気づくりだけで機能には全く関係がありません。

 <phone:PhoneApplicationPage 

          :

    SupportedOrientations="Landscape" Orientation="LandscapeRight"

    >

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

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

        <Rectangle x:Name="lense" 

                   Height="{Binding ElementName=zoom, Path=Value}" 

                   Width="{Binding ElementName=zoom, Path=Value}" 

                   HorizontalAlignment="Center" VerticalAlignment="Center" 

                   Tap="lense_Tap">

            <Rectangle.Fill>

                <VideoBrush x:Name="viewfinderBrush" Stretch="UniformToFill"/>

            </Rectangle.Fill>

        </Rectangle>

        <Path Data="

              M56,24 C38,24 24,38 24,56 

              L24,424 C24,442 38,456 56,456 

              L744,456 C762,456 776,442 776,424 

              L776,56 C776,38 762,24 744,24 z 

              M0,0 L800,0 L800,480 L0,480 z" 

              Fill="#FF252525" Stretch="Fill" UseLayoutRounding="False"/>

        <TextBlock FontFamily="Segoe WP Light" FontSize="16" 

                   Text="Windows Phone Standard CAMERA LENS" 

                   Foreground="Gray" Margin="15,0,0,0" 

                   VerticalAlignment="Top" HorizontalAlignment="Left" />

        <TextBlock 

            HorizontalAlignment="Right" VerticalAlignment="Bottom" 

            FontFamily="Segoe WP Semibold" FontSize="16" 

            Text="6.0mm 1:3.5" Margin="0,0,58,0" Foreground="Pink" />

        <Slider Name="zoom" Opacity="0.5"

                Height="96" HorizontalAlignment="Right" Margin="0,0,50,0" 

                VerticalAlignment="Bottom" Width="350" 

                Maximum="2000" Minimum="800" Value="1500" />

    </Grid>

Rectangle を選択して、Tapイベントをダブルクリックすると一番簡単ですね。コードは実質５行追加するだけです。

 public partial class MainPage : PhoneApplicationPage

{

    PhotoCamera cam;

    // コンストラクター

    public MainPage()

    {

        InitializeComponent();

        cam = new PhotoCamera();

        cam.Initialized += (sender, e) => cam.FlashMode = FlashMode.Off;

        viewfinderBrush.SetSource(cam);

    }

    void lense_Tap(object sender, GestureEventArgs e)

    {

        cam.Focus();

    }

}

フラッシュモードを変更するには、Cameraの初期化が終わらないといけませんが、その辺りの処理はラムダ式を使って1行で納めています。

実行するとこんな感じ。拡大鏡でタップするとピントを合わせます。

まぁ、1発ネタですが意外と実用性もあるかも。

カメラ画像を1500x1500のRectangleに表示しているため拡大効果になっています。そして、このサイズをSliderをBindさせて変化させることで拡大率を変更しています。ここがコードを描かずにできていることがポイントの1つですね。