選択した画像をトリミングして保存させるには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（9）（2/4 ページ）

» 2013年12月10日 18時00分公開

[薬師寺国安，PROJECT KySS]

メイン画面にコントロールをレイアウト（MainPage.xaml）

　ツールボックスからデザイン画面上に、各コントロールを配置する。

　今回、広告を表示させるために使用している、「AdControl」についての解説は割愛する。また別な機会に詳細を解説したいと思う。よって今回は広告に関しては無視してほしい。

　書き出されるXAMLコードは下記リストのようになる。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageTriming"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
    x:Class="ImageTriming.MainPage"
    mc:Ignorable="d">
    <Viewbox>■（1）
       <Grid>
            <Grid  Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Left" ManipulationStarted="ContentPanel_ManipulationStarted" ManipulationDelta="ContentPanel_ManipulationDelta" ManipulationMode="All" Margin="0,60,0,0">■（2）
                <Border Width="640" Height="480" BorderThickness="1" BorderBrush="White">■（3）
                    <Image  x:Name="Image1"  Width="640" Height="480" Stretch="None"  Margin="0,2,0,-2"/>■（3）
                </Border>■（3）
                <Rectangle x:Name="Rectangle1" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top"  StrokeDashArray="2,2" Stroke="Yellow" StrokeThickness="3"  Fill="#20000000"  ManipulationDelta="Rectangle1_ManipulationDelta"  ManipulationStarted="Rectangle1_ManipulationStarted" ManipulationMode="All"/>■（3）
            </Grid>■（2）
            <Button x:Name="Button1" Content="切り出す" HorizontalAlignment="Left" Height="63" Margin="23,549,0,0" VerticalAlignment="Top" Width="198" FontFamily="Meiryo UI" FontSize="36"/>■（4）
            <Button x:Name="imageSelectButton" Content="画像選択" HorizontalAlignment="Left" Height="63" Margin="226,549,0,0" VerticalAlignment="Top" Width="198" FontFamily="Meiryo UI" FontSize="36"/>■（4）
            <StackPanel Margin="666,107,10,167" Orientation="Horizontal">
                <Image x:Name="resultImage" HorizontalAlignment="Left"   VerticalAlignment="Top"  Stretch="None"/>■（5）
                <AppBarButton x:Name="saveButton" Icon="Save" Label="保存" HorizontalAlignment="Left" Height="90"  VerticalAlignment="Top" Width="84"   IsEnabled="False" />■（6）
            </StackPanel>
            <ScrollViewer HorizontalAlignment="Left" Height="141" Margin="10,617,0,0" VerticalAlignment="Top" Width="1346" HorizontalScrollBarVisibility="Visible">■（7）
                <GridView Height="120" Width="1336" FlowDirection="LeftToRight" x:Name="GridView1"/>■（7）
            </ScrollViewer>■（7）
            <AppBarButton x:Name="deleteButton" Icon="Delete" Label="削除" Margin="433,549,0,0"/>■（8）
            <AppBarButton x:Name="allDeleteButton" Icon="Delete" Label="一括削除" Margin="509,549,0,138"  Width="80"/>■（8）
            <TextBlock HorizontalAlignment="Left" Height="45" Margin="23,10,0,0" TextWrapping="Wrap" Text="画像のトリミング" VerticalAlignment="Top" Width="368" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold" Foreground="Crimson"/>■（9）
            <UI:AdControl ApplicationId="8377ae29-8082-4035-be1e-7e5737cbe26d" AdUnitId="10056643" HorizontalAlignment="Left" Height="90" Margin="640,2,-11,0" VerticalAlignment="Top" Width="728"/>
        </Grid>
    </Viewbox>■（1）
</Page>

リスト　書き出されたXAMLコード（MainPage.xaml）

　以上、全てのコントロールをレイアウトしたのが図6だ。

図6　各コントロールを配置した

　以降は、ソースコードに割り振った番号ごとに詳細に見ていこう。

（1）

　Grid要素全体をViewBox要素で囲む。ViewBox要素は、伸縮およびスケーリングを実行して単一の子を使用可能な領域全体に引き伸ばせるコンテンツデコレーターを定義する。

（2）

　Grid要素を配置し、GridコントロールのBackgroundには「Transparent」を指定する。Backgroundに何も指定していないと、タッチのイベントが拾えないので、注意してほしい。

　また、ユーザーがタッチ操作を開始したときに発生する、ManipulationStartedに「ContentPanel_ManipulationStarted」イベントハンドラーを関連付け、ユーザーが指を動かしてタッチ操作に変化が生じたときに発生するManipulationDeltaに「ContentPanel_ManipulationDelta」イベントハンドラーを関連付ける。

　UIElementのBehaviorとジェスチャーの相互作用を使用するための値を設定する、ManipulationModeプロパティには「All（すべての相互作用のモードを有効にする）」を指定する。

　ManipulationModeプロパティの値については下記のURLを参照してほしい。

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.input.manipulationmodes

（3）

　Grid要素の子要素としてImageとRectangle要素を配置する。名前が「Image1」というImage要素をBorder要素でくくり周囲に白い枠線を描く。名前が「Rectangle1」というRectangle要素にもまた、ユーザーが指を動かしてタッチ操作に変化が生じたときに発生するManipulationDeltaプロパティに「Rectangle1_ManipulationDelta」イベントハンドラーを関連付ける。

　ユーザーがタッチ操作を開始したときに発生する、ManipulationStartedプロパティに「Rectangle1_ManipulationStarted」イベントハンドラーを関連付ける。ManipulationModeプロパティにも「All」を指定する。StrokeDashArrayプロパティには「2,2」と指定して描かれる矩形を破線で表示する。Visibilityプロパティには「Collaspsed」を指定して、最初は非表示としている。

（4）

　名前が「Button1」という「切り出す」用のButton要素を配置し、名前が「ImageSelectButton」という、「画像選択」ボタンを配置する

（5）

　矩形で選択された範囲を切り出して表示する、名前が「resultImage」というImage要素を配置する。

（6）

　名前が「saveButton」というAppBarButton要素を配置する。この「保存」アイコンは最初の状態では使用不可としている。

　VS 2012では、StyleプロパティでStaticResourceを使って、［ソリューション・エクスプローラー］内の「Common」フォルダー内にある「StandardStyles.xaml」の中のスタイルを参照していた。しかしVS 2013では、このStandardStyles.xamlはなくなり、ツールボックスにあるAppBarButtonを使うようになるので、注意が必要だ（図7）。