cleanUrl: "/creating-a-uwp-desktop-application-with-c-sharp-3-5-jp"
floatFirstTOC: "right"

シリーズ

C#でUWPデスクトップアプリを作る 1/5: Hello World!

C#でUWPデスクトップアプリを作る 2/5: カメラプレビューを実装する

こんにちは！今回はUWPアプリで5秒のカウントダウン後、写真を撮影して結果を画面に表示する機能を実装してみます。 プレビュー画面をクリックするとカウントダウンが始まり、写真が撮影された後はプレビューが消えて撮影された写真、再撮影、印刷ボタンが表示されます。

前回の記事でカメラプレビュー機能を実装したので、今回はカウントダウンと撮影機能を追加してよりインタラクティブなアプリに発展させてみます。

1. アプリのフロー計画

ユーザーがアプリを使う時に経験する流れは次のようになります：

  1. プレビュー画面でユーザーが画面をクリックすると、5秒のカウントダウンが始まります。
  2. カウントダウンが終わると**写真が撮影され、**プレビュー画面が消えます。
  3. 撮影された写真が画面に表示され、再撮影と 印刷ボタンが表示されます。
  4. ユーザーが「再撮影」ボタンを押すとプレビュー画面に戻り、「印刷」ボタンを押すと(印刷機能は後日追加予定)、写真を印刷することができます。

2. UI構成

まず、UIを構成するためにMainPage.xamlを修正します。プレビュー画面、撮影された写真を表示する画像コントロール、そしてカウントダウンを表示するテキストブロックを追加しました。

<Page
    x:Class="PhotoBooth.MainPage"
    xmlns="<http://schemas.microsoft.com/winfx/2006/xaml/presentation>"
    xmlns:x="<http://schemas.microsoft.com/winfx/2006/xaml>"
    xmlns:local="using:PhotoBooth"
    xmlns:d="<http://schemas.microsoft.com/expression/blend/2008>"
    xmlns:mc="<http://schemas.openxmlformats.org/markup-compatibility/2006>"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- カメラプレビュー -->
        <CaptureElement x:Name="CameraPreview" HorizontalAlignment="Center" VerticalAlignment="Center" Width="640" Height="480" Grid.Row="0" Tapped="CameraPreview_Tapped"/>

        <!-- カウントダウンテキスト -->
        <TextBlock x:Name="CountdownText" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="60" Visibility="Collapsed" Grid.Row="0"/>

        <!-- 撮影した写真の表示 -->
        <Image x:Name="CapturedImage" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed" Width="640" Height="480" Grid.Row="0"/>

        <!-- 再撮影と印刷ボタン -->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Opacity="0" x:Name="ButtonPanel" Grid.Row="1" Margin="0,10,0,10">
            <Button Content="再撮影" Click="RetakeButton_Click" Margin="10"/>
            <Button Content="印刷" Click="PrintButton_Click" Margin="10"/>
        </StackPanel>
    </Grid>
</Page>

UIの説明