連載
» 2013年11月25日 18時00分 公開

2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ(7):選択した画像と、テクスチャとなる画像を合成して保存するには (2/4)

[薬師寺国安,PROJECT KySS]

メイン画面の作成(MainPage.xaml)

 ツールボックスからデザイン画面上にコントロールをレイアウトする。書き出されるXAMLコードはリスト1のようになる。

<Page
    x:Class="WriteableBitmap_Bilt.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WriteableBitmap_Bilt"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Viewbox>■(1)
        <Grid Background="Black">
              <AppBarButton x:Name="backButton" Height="68" Width="84" Icon="Back" Label="戻る" Margin="-24,0,0,0" Visibility="Collapsed"/>■(2)
            <Image x:Name="Image1" HorizontalAlignment="Left" Height="480" Margin="65,24,0,0" VerticalAlignment="Top" Width="640" />■(3)
            <Image x:Name="Image2" HorizontalAlignment="Left" Height="480" Margin="712,22,0,0" VerticalAlignment="Top" Width="640" />■(4)
            <Button x:Name="makeButton" Content="合成" HorizontalAlignment="Left" Height="68" Margin="606,507,0,0" VerticalAlignment="Top" Width="191" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■(5)
            <Button x:Name="readButton1" Content="元画像" HorizontalAlignment="Left" Height="68" Margin="218,507,0,0" VerticalAlignment="Top" Width="191" FontFamily="Meiryo UI" FontSize="36"/>■(6)
            <Button x:Name="readButton2" Content="合成画像" HorizontalAlignment="Left" Height="68" Margin="914,507,0,0" VerticalAlignment="Top" Width="191" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■(7)
            <Frame x:Name="myFrame"  HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1291" Margin="65,0,0,0"/>■(8)
            <Button x:Name="ichiranButton" Content="データ一覧" HorizontalAlignment="Left" Height="80" Margin="545,609,0,0" VerticalAlignment="Top" Width="306" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■(9)
            <Image x:Name="resultImage" HorizontalAlignment="Left" Height="480" Margin="374,22,0,0" VerticalAlignment="Top" Width="640"/>■(10)
        </Grid>
    </Viewbox>■(1)
</Page>
リスト1 書き出されたXAMLコード(MainPage.xaml)

 以上、全てをレイアウトしたのが図7だ。

図7 各コントロールを配置

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

(1)

 Grid要素全体をViewBox要素で囲む。

(2)

 「backButton」という名前のAppBarButton要素を配置し、プロパティのIconに「←Back」、Labelに「戻る」と指定しておくが、Labelの値は表示しない。このAppBarButton要素は、最初の状態では非表示となっている。

(3)

 名前が「Image1」というImage要素を配置する。元画像が表示される領域だ。

(4)

 名前が「Image2」というImage要素を配置する。「合成画像」が表示される領域だ。

(5)

 名前が「makeButton」というButton要素を配置し、Contentプロパティに「合成」と指定する。最初の状態では使用不可としている。

(6)

 名前が「readButton1」というButton要素を配置し、Contentプロパティに「元画像」と指定する。

(7)

 名前が「readButton2」というButton要素を配置し、Contentプロパティに「合成画像」と指定する。最初の状態では使用不可としている。

(8)

 名前が「myFrame」というFrame要素を配置する。保存した合成画像の一覧ページに遷移する際に利用するフレームだ。

(9)

 名前が「ichiranButton」というButton要素を配置する。Contentプロパティに「データ一覧」と指定する。最初の状態では使用不可としている。

(10)

 名前が「resultImage」というImage要素を配置する。合成された結果の画像が表示される領域だ。

保存した画像を一覧するページの作成(BiltShowImage.xaml)

 VS2013のメニューから、[プロジェクト(P)]→[新しい項目の追加(W)]と選択し、表示される「新しい項目の追加」画面で、左のWindows ストアを選択し、右の欄から「空白のページ」を選択する。「名前(N)」には「BiltShowImage.xaml」と指定し、[追加(A)]ボタンをクリックする。BiltShowImage.xamlは保存した画像を一覧するページだ。

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

 書き出されるXAMLはリスト2のようになる。

<Page
    x:Class="WriteableBitmap_Bilt.BiltShowImage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WriteableBitmap_Bilt"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
    <Viewbox>■(1)
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ScrollViewer HorizontalScrollBarVisibility="Visible" Margin="10">■(2)
                <GridView x:Name="GridView1"  HorizontalAlignment="Left" VerticalAlignment="Center" Width="1336" FlowDirection="LeftToRight"  Height="699" />■(2)
            </ScrollViewer>■(2)
            <AppBar  Height="110" Background="Gray" Margin="0,668,-10,0">■(3)
                <StackPanel Orientation="Horizontal">■(3)
                    <AppBarButton x:Name="deleteButton" Label="削除" Icon="Delete" ClickMode="Press" Margin="10" Height="110"/>■(3)
                    <AppBarButton x:Name="AlldeleteButton" Label="一括削除" Icon="Delete" ClickMode="Press" Margin="10" Height="110"/>■(3)
                </StackPanel>■(3)
            </AppBar>■(3)
        </Grid>
    </Viewbox>■(1)
</Page>
リスト2 書き出され編集されたXAML(BiltShowImage.xaml)

 以上、全てをレイアウトしたのが図8だ。

図8 各コントロールをレイアウトした

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

(1)

 Grid要素全体をViewBox要素で囲む。

(2)

 ScrollViewer要素を配置し、その子要素として名前が「GridView1」というGridView要素を配置する。この中に保存された画像の一覧が表示される。ScrollViewer要素の子要素であるため、横にスクロールが可能だ。

(3)

 AppBar要素を配置し、背景色に「Gray」を指定する。AppBar要素の子要素として、Orientaionプロパティに水平方向を表す「Horizontal」を指定したStackPanel要素を配置し、その子要素として、名前が「deleteButton」「allDeleteButton」というAppBarButton要素を配置する。

 プロパティからIconに「Delete」を選択し、Labelに「削除」「一括削除」と指定する。AppBar要素は、マウスの右クリックで表示されるアプリケーションバーだ。表示された時に、アプリケーションバー内に「削除」アイコンと、「一括削除」アイコンが表示される。

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。