PR

四文字熟語の意味をキャラクターが声で教えてくれるアプリを作る

2014年3月27日(木)
薬師寺 国安

コントロールのレイアウト(MainPage.xaml)

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

書き出されるXAMLコードはリスト2のようになります。

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

(1)WinRT Xaml Toolkitのコントロールをデザイン画面に配置すると、Controlsという名前空間が自動的に追加されます。

(2)Page.Resourcesプロパティ要素内に、「headGridViewTemplate」というKey名のDataTemplate要素を配置します。その子要素としてStackPanel要素を配置し、さらに子要素として、Border要素を配置し、背景色(Bacground)に「White」、CornerRadisuに「12」を指定して四隅を丸め、枠線の色(BorderBrush)に「Gray」、枠線の幅(BorderThickness)に「3」を指定します。
その子要素としてStackPanel要素を配置し、Orientationプロパティに「Horizontal」と指定します。その子要素としてTextBlock要素を配置し、Textプロパティに「頭」をバインドします。

次に、「mainGridViewTemplate」というKey名のDataTemplate要素を配置し、子要素としてStackPanel要素を配置します。またその子要素として背景色(Background)が「Navy」のStackPanel要素を配置します。その子要素としてTextBlock要素を配置し、Textプロパティに「四文字熟語」をバインドします。

同じくStackPanel要素を配置し、背景色(Background)に「Blue」を指定し、子要素としてTextBlock要素を配置してTextプロパティに「読み」をバインドします。

同じくStackPanel要素を配置し、背景色(Background)に「SkyBlue」を指定し、子要素としてTextBlock要素を配置してTextプロパティに「意味」をバインドします。

次にKey名が「GridViewTemplate」というDataTemplate要素を配置し、子要素としてStackPanel要素を配置します。またその子要素として背景色(Background)が「Navy」のStackPanel要素を配置します。その子要素としてTextBlock要素を配置し、Textプロパティに「四文字熟語」をバインドします。

同じくStackPanel要素を配置し、背景色(Background)に「Blue」を指定し、子要素としてTextBlock要素を配置してTextプロパティに「読み」をバインドします。

同じくStackPanel要素を配置し、背景色(Background)に「Snow」を指定し、子要素としてTextBlock要素を配置してTextプロパティに「意味」をバインドします。

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

(4)Grid要素の背景色を「Black」と指定します。

(5)ScrollViwer要素を配置し、その子要素として、「headGridView」という名前のGridView要素を配置します。ItemTemplateプロパティにStaticResourceを使って(2)で定義したheadGridViewTemplateを参照します。

(6)同じく、ScrollViwer要素を配置し、その子要素として、「mainGridView」という名前のGridView要素を配置します。ItemTemplateプロパティにStaticResourceを使って(2)で定義したmainGridViewTemplateを参照します。

(7)StackPanel要素を配置し、Orientationプロパティに「Horizontal」と指定します。背景色に「Navy」を指定します。子要素としてタイトルとなるTextBlock要素を配置し、次に、Image要素を配置して、Sourceプロパティにソリューション・エクスプローラー内のImagesフォルダにある「syoko2.png」を指定します。
キャラクタに音声を喋らすための名前が「MediaElement1」というMediaElement要素を配置します。AutoPlayにはTrueを指定して自動再生を可能にしておきます。

(8)名前が「AppBar1」というAppBar要素を配置し、背景色に「DarkGreen」を指定します。その子要素としてGrid要素を配置し、その子要素として、StackPanel要素を配置します。その子要素として再度StackPanel要素を配置し、Orientationプロパティには「Horizontal」と指定します。その子要素として、WinRT Xaml Toolkitのコントロールである、名前が「yomiWatermarkTextBox」というControls:WatermarkTextBox要素を配置します。WaterTextに「読みを入力してください・・・・・・・・」と指定します。表示された際には、このメッセージが入力ボックスに表示されていますが、フォーカスがControls:WatermarkTextBox要素に移り、入力する際には、この表示は消えます。
名前が「okButton」というAppBarButton要素を配置し、IconプロパティにAccept、Labelプロパティに実行と指定しておきます。
ScrollViewer要素を配置し、名前が「GridView1」というGridView要素を配置します。ItemTemplateで、StaticResourceを使って(2)で定義した「GridViewTemplate」を参照します。

(9)選択された50音内に、いくつの四文字熟語が登録されているかの数を表示する、名前が「countTextBlock」というTextBlock要素を配置します。

(10)Image要素を配置し、Sourceプロパティに、ソリューション・エクスプローラー内のImagesフォルダにある「syoko5.png」を指定します。

(11)四文字熟語の意味を音声で喋っている間表示される、名前が「ProgressRing1」というProgressRing要素を配置します。最初は使用不可、非活動としておきます。

以上、全てをレイアウトしたのが図3になります。

<Page
  x:Class="syoko_YonmojiJyukugo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:syoko_YonmojiJyukugo"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Controls="using:WinRTXamlToolkit.Controls" 
  mc:Ignorable="d">
 
  <Page.Resources>
    <DataTemplate x:Key="headGridViewTemplate">
      <StackPanel >
        <Border BorderThickness="3" BorderBrush="Gray" CornerRadius="12" Background="White" Height="50">
          <StackPanel Orientation="Horizontal" Margin="5">
            <TextBlock Foreground="Navy" Text="{Binding 頭}" FontFamily="Meiryo UI" FontSize="30" Padding="3" Width="50" VerticalAlignment="Center" TextAlignment="Center"/>
            </StackPanel>
          </Border>
        </StackPanel>
      </DataTemplate>
 
      <DataTemplate x:Name="mainGridViewTemplate">
        <StackPanel  Margin="5" VerticalAlignment="Top">
          <StackPanel Background="Navy" VerticalAlignment="Top">
            <TextBlock Foreground="Silver" Text="{Binding 四文字熟語}" FontFamily="Meiryo UI" FontSize="36" Padding="5" Width="380" TextWrapping="Wrap"/>
          </StackPanel>
          <StackPanel Background="Blue" VerticalAlignment="Top">
            <TextBlock Foreground="Silver" Text="{Binding 読み}" FontFamily="Meiryo UI" FontSize="30" Padding="5" Width="380" TextWrapping="Wrap"/>
          </StackPanel>
          <StackPanel Background="SkyBlue" VerticalAlignment="Top">
            <TextBox Foreground="Black" Text="{Binding 意味}" FontFamily="Meiryo UI" FontSize="28" Padding="5" Width="380" TextWrapping="Wrap" Height="300"/>
          </StackPanel>
        </StackPanel>
      </DataTemplate>
 
      <DataTemplate x:Name="GridViewTemplate">
        <StackPanel  Margin="5" VerticalAlignment="Top">
          <StackPanel Background="Navy" VerticalAlignment="Top">
            <TextBlock Foreground="White" Text="{Binding 四文字熟語}" FontFamily="Meiryo UI" FontSize="28" Padding="5" Width="380" TextWrapping="Wrap"/>
          </StackPanel>
          <StackPanel Background="Blue" VerticalAlignment="Top">
            <TextBlock Foreground="Snow" Text="{Binding 読み}" FontFamily="Meiryo UI" FontSize="24" Padding="5" Width="380" TextWrapping="Wrap"/>
          </StackPanel>
          <StackPanel Background="Snow" VerticalAlignment="Top">
            <TextBox Foreground="Black" Text="{Binding 意味}" FontFamily="Meiryo UI" FontSize="24" Padding="5" Width="380" TextWrapping="Wrap" Height="250"/>
          </StackPanel>
        </StackPanel>
      </DataTemplate>
    </Page.Resources>
    <Viewbox>
      <Grid Background="Black">
        <ScrollViewer HorizontalAlignment="Left" Height="109" Margin="-13,102,0,0" VerticalAlignment="Top" Width="1383">
          <GridView Height="74" Width="1323" x:Name="headGridView" FlowDirection="LeftToRight" ItemTemplate="{StaticResource headGridViewTemplate}"/>
        </ScrollViewer>
        
        <ScrollViewer HorizontalAlignment="Left" Height="488" Margin="4,206,0,0" VerticalAlignment="Top" Width="1366">
          <GridView Height="444" Width="1352" x:Name="mainGridView" FlowDirection="LeftToRight" ItemTemplate="{StaticResource mainGridViewTemplate}"/>
        </ScrollViewer>
        <StackPanel HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="1370" Orientation="Horizontal" Background="Navy">
          <TextBlock Text="音声付き四文字熟語" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" Margin="10,20,0,14" Foreground="Beige"/>
          <Image Height="100" VerticalAlignment="Top" Width="124" Source="Images/syoko2.png" Margin="50,0,0,0"/>
          <MediaElement x:Name="MediaElement1" Height="39" Margin="0,32,0,0" VerticalAlignment="Top" Width="137" AutoPlay="True"/>
        </StackPanel>
        <AppBar  Margin="4,100,0,0" VerticalAlignment="Top" Background="Gray" Width="1366" HorizontalAlignment="Left" x:Name="AppBar1" Height="668">
          <StackPanel>
            <StackPanel Orientation="Horizontal">
              <Controls:WatermarkTextBox Width="718" WatermarkText="読みを入力してください・・・・・" x:Name="yomiWatermarkTextBox" Margin="10,12,0,17" FontSize="36"/>
              <AppBarButton x:Name="okButton" Content="OK" Margin="10,0,0,0" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold" Icon="Accept" Label="実行"/>
            </StackPanel>
          <ScrollViewer>
            <GridView x:Name="GridView1" FlowDirection="LeftToRight" ItemTemplate="{StaticResource GridViewTemplate}" Width="1366" Height="570"/>
          </ScrollViewer>
        </StackPanel>
      </AppBar>
      <TextBlock x:Name="countTextBlock"  FontSize="40" Foreground="Red" Margin="299,675,371,43" Height="50" Width="700" TextAlignment="Center" VerticalAlignment="Center"/>
      <Image x:Name="syokoImage" Width="258" Height="273" Source="Images/syoko5.png" Margin="1110,495,2,0"/>
      <ProgressRing x:Name="ProgressRing1" IsEnabled="False" IsActive="False" Width="200" Height="200"/>
    </Grid>
  </Viewbox>
</Page>
図3:各コントロールを配置した(クリックで拡大)
  • 四文字熟語の意味をキャラクターが声で教えてくれるアプリ

    『Windows 8.1+Visual Studio 2013によるWindows ストア・アプリ開発実例集』 第11回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています