Windows8のストア画面で手軽に時計を表示するサンプル

連載 :

2013年4月19日(金)

コントロールの配置

コントロールを配置する前に、ツールボックスにWinRT XAML Toolkitに含まれているコントロールを追加しておきましょう。ツールボックスの「コモンXAMLコントロール」のタブ上でマウスの右クリックをします。すると、「アイテムの選択(I)」が表示されますので、これをクリックします（図9）。

図9：ツールボックスから「アイテムの選択(I)」を表示する（クリックで拡大）

「ツールボックスアイテムの選択」画面が表示されますので、[参照(B)]ボタンをクリック、現在作成しているプロジェクトフォルダ内に作成されている、packagesフォルダを展開していきます。

プロジェクトを作成しているフォルダを以下のようにたどります。
\Win8_VoiceRecording\packages\winrtxamltoolkit.1.3.4\lib\winrt45
WinRtXAMLToolkit.dllが表示されますので、これを選択して[開く(O)]をクリックします。するとWinRT XAML Toolkitに含まれるコントロールが表示されチェックが付きます。[OK]ボタンで閉じます（図10）。
このpackagesフォルダはソリューションエクスプローラー上には表示されていません。

※WinRT XAML Toolkitはこまめにバージョンアップされていますので、フォルダのwinrtxamltoolkit.1.3.4の数値は変わる可能性があります。

図10：WinRT XAML Tookitに含まれるコントロールが表示された（クリックで拡大）

ツールボックスの「コモンXAMLコントロール」内にWinRT XAML Toolkitのコントロールが表示されます（図11）。

図11：ツールボックスにWinRT XAML Tookitに含まれるコントロールが表示された（クリックで拡大）

ツールボックスからデザイン画面上にScrollViewerコントロールを1個、HorizontalScrollBarVisibilityにVisibleを指定して、横のスクロールを可能にします。これは、シミュレーターで実行した際、シミュレーターを縦にした場合、横にスクロールができるようにするためです。

背景に敷くImageコントロールを1個配置し、SourceプロパティにImageフォルダ内の画像を指定します。すると背景に時計の画像が敷かれます。
Opacityに0.2を指定して半透明化しておきます。
次にWinRT XAML Tookitのコントロールである、CascadingTextBlockコントロールを1個配置します。このコントロールを追加すると、Controlsという名前空間が自動的に追加されます。
プロパティの「寄せ集め」パネル内にあるCascadeOutにチェックを付けます。これにチェックを付けることで、表示される時刻が、アニメーションで現れて、アニメーションで消えていきます。AnimationOnloadプロパティにもチェックを付けておきます。
CascadingTextBlockコントロールが読み込まれるとすぐにアニメーションが実行されます。

次に、Buttonコントロールを1個配置します。
Styleプロパティに"{StaticResourceSettingsAppBarButtonStyle}"と指定してSettingsアイコンを表示します。
このSettingsAppBarButtonStyleは、Commonフォルダ内のStandardStyles.xaml内に定義されています。
大部分がコメントアウトされて使用できないようになっていますので、VS2012のメニューの「編集(E)／検索と置換(F)」と選択して、「Settings」という名前で検索して、SettingsAppBarButtonStyleが定義されているStyleを見つけてください。コメントアウトされている場合はコメントを外します。

次にStackPanel内にTextBlockを1個と、RadioButtonコントロールを5個、Buttonコントロールを1個配置します。
StackPanelのOrientationプロパティにはHorizontalを指定し中に配置されているコントロールのスタック方向を水平方向とします。VisibilityにはCollaspedを指定して非表示としておきます。
すべてのRadioButtonのContentプロパティに色名を指定し、GroupNameにmojiColorと指定しておきます。
すべてのRadioButtonコントロールのGroupNameにmojiColorと指定します。同じGroupNameを指定していないと、複数のRadioButtonが選択可能な状態になってしまいます。
ButtonのStyleプロパティには{StaticResourceSaveAppBarButtonStyle}と指定してフロッピーのSaveアイコンを表示します。これも先に述べたようにCommonフォルダのStandardStyles.xaml内に定義されています。

次にWinRT XAML Toolkitのコントロールである、CountdownControlを配置します。
Secondsプロパティに10を指定します。
実行するとすぐに10からのカウントダウンが開始されます。
TextBlockコントロールを配置しTextプロパティに「時刻は10秒間隔で表示されます。」と表示しておきます。

書き出されるXAMLコードはリスト1。レイアウトは図12になります。

リスト1　書き出されたXAMLコード(MainPage.xaml)

（1）要素を配置しHorizontalScrollBarVisibilityプロパティにVisibleを指定して、水平スクロールを可能にしています。この要素の子要素として以下の要素を配置します。
（2）要素を配置し、背景に画像を敷いています。Opacityに0.2を指定して半透明化しています。
（3）要素を配置し、CascadeOutプロパティにTrue、AnimateOnLoadedプロパティにTrueを指定しています。10秒のカウントダウンが終わると、アニメーションを伴った時刻が表示されては消えていきます。
（4）
（5）要素を配置し、OrientaionにHorizontal、VisibilityにCollapsedを指定して非表示としておきます。ただし図12では配置が分かるように、一時的に表示させています。
（6）要素を配置し、Contentプロパティに色名を指定し、Foregroundの文字色にもContentプロパティと同じ色を指定します。GroupNameには同じ名称を指定します。
（7）
（8）要素を配置し、Secondsプロパティに10を指定して、10秒のカウントダウンを実行させます。

01<Page
02  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04  xmlns:local="using:TimeShow"
05  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
06  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
07  xmlns:Controls="using:WinRTXamlToolkit.Controls"
08  x:Class="TimeShow.MainPage"
09  mc:Ignorable="d">
10  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
11    <ScrollViewerHorizontalScrollBarVisibility="Visible">■（1）
12      <Grid>
13      <Image Source="Image/clock.png" Margin="239,0,197,10" Opacity="0.2"/>■（2）
14    <Controls:CascadingTextBlockx:Name="CascadingTextBlock1" HorizontalAlignment="Left" Height="363" Margin="96,232,0,0" VerticalAlignment="Top" Width="1165" FontFamily="Meiryo UI" FontSize="80" CascadeOut="True"  AnimateOnLoaded="True" FontWeight="Bold" />■（3）
15    <Button x:Name="settingButton"  HorizontalAlignment="Left" Height="87" Margin="1246,78,0,0" VerticalAlignment="Top" Width="101" Style="{StaticResourceSettingsAppBarButtonStyle}"/>■（4）
16    <StackPanelx:Name="StackPanel1" HorizontalAlignment="Left" Height="84" Margin="600,78,0,0" VerticalAlignment="Top" Width="646" Orientation="Horizontal" Visibility="Collapsed" >■（5）
17      <TextBlock Height="31" Margin="0,10,0,0" TextWrapping="Wrap" Text="文字色" VerticalAlignment="Center" Width="79" FontFamily="Meiryo UI" FontSize="22" FontWeight="Bold"/>
18      <RadioButtonx:Name="redRadioButton" Content="赤" HorizontalAlignment="Left" Height="37" Margin="17,0,0,0" Width="78" VerticalAlignment="Center" FontFamily="Meiryo UI" FontSize="24" GroupName="mojiColor" Foreground="Red"/>■（6）
19      <RadioButtonx:Name="blueRadioButton" Content="青" HorizontalAlignment="Left" Height="37" Margin="17,0,0,0" Width="78" VerticalAlignment="Center" FontFamily="Meiryo UI" FontSize="24" GroupName="mojiColor" RenderTransformOrigin="1.244,0.297" Foreground="Blue"/>■（6）
20      <RadioButtonx:Name="greenRadioButton" Content="緑" HorizontalAlignment="Left" Height="37" Width="78" VerticalAlignment="Center" FontFamily="Meiryo UI" FontSize="24" GroupName="mojiColor" Foreground="Green"/>■（6）
21      <RadioButtonx:Name="whiteRadioButton" Content="白" HorizontalAlignment="Left" Height="37" Width="78" VerticalAlignment="Center" FontFamily="Meiryo UI" FontSize="24" GroupName="mojiColor" IsChecked="True"/>■（6）
22      <RadioButtonx:Name="goldRadioButton" Content="黄" HorizontalAlignment="Left" Height="37" Width="78" VerticalAlignment="Center" FontFamily="Meiryo UI" FontSize="24" GroupName="mojiColor" Foreground="Gold"/>■（6）
23      <Button x:Name="saveButton"  Height="84" VerticalAlignment="Top" Width="83" Style="{StaticResourceSaveAppBarButtonStyle}"/>■（7）
24    </StackPanel>
25    <Controls:CountdownControlx:Name="CountdownControl1" HorizontalAlignment="Left" Height="276" Margin="527,247,0,0" VerticalAlignment="Top" Width="317" Seconds="10" FontFamily="Meiryo UI" FontSize="72"/>■（8）
26      <TextBlockHorizontalAlignment="Left" Height="68" Margin="359,670,0,0" TextWrapping="Wrap" Text="時刻は10秒間隔で表示されます。" VerticalAlignment="Top" Width="676" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold"/>
27    </Grid>
28    </ScrollViewer>
29    </Grid>
30</Page>

図12：各コントロールを配置した（クリックで拡大）

ピクチャライブラリへのアクセス許可の設定

今回のサンプルは、ピクチャライブラリ内にアクセスしますので、「画像ライブラリ」へのアクセス許可が必要になります。ソリューションエクスプローラー内にpackage.appxmanifestというファイルがありますので、このファイルをダブルクリックします。「機能」タブをクリックして、表示される画面の「機能：」にある、「画像ライブラリ」にチェックを付けます（図13）。

図13：package.appxmanifestファイルを開き「画像ライブラリ」にチェックを付ける（クリックで拡大）

開発 / Windows 8 / サンプルアプリ / Windows8 ストア

Windows 8のWindowsストア画面で手軽に時計を表示させるためのサンプル

4060_1.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストアアプリを多数公開中。

Microsoft MVP for Development Platforms - Client App Dev （Oct 2003-Sep 2012）。Microsoft MVP for Development Platforms - Windows Phone Development（Oct 2012-Sep 2013）。Microsoft MVP for Development Platforms - Client Development（Oct 2013-Sep 2014）。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015）。