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秒のカウントダウン後、写真を撮影して結果を画面に表示する機能を実装してみます。 プレビュー画面をクリックするとカウントダウンが始まり、写真が撮影された後はプレビューが消えて撮影された写真、再撮影、印刷ボタンが表示されます。
前回の記事でカメラプレビュー機能を実装したので、今回はカウントダウンと撮影機能を追加してよりインタラクティブなアプリに発展させてみます。
ユーザーがアプリを使う時に経験する流れは次のようになります:
まず、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>