Windows ストア アプリ初めの1歩

2014年4月29日(火)
薬師寺 国安

ボタンクリックで「Hello Windows Store App!」と表示する

MainPage.xaml内にツールボックスからButtonコントロールを1個、TextBlock要素を1個配置します。

Buttonコントロールのプロパティから「名前」に「startButton」と指定します。[テキスト]ペインの書体に「Meiryo UI」、「文字サイズ」に「48」を指定し、[共通]ペインの「Content」に「表示」と指定します(図13)。するとデザイン画面内のButtonコントロールにプロパティが適用されます。次にTextBlockにプロパティを設定しますが、これはリスト3で設定したプロパティと同じですが、今回はTextプロパティに指定されている「TextBlock」をTextプロパティごと削除します。ボタンクリックで文字列を表示させるので、最初からTextBlockという文字が表示されているとマズいからです。XAML内にもButton要素とTextBlock要素にプロパティが適用されて表示されます。

図13 Buttonコントロールにプロパティが適用され、TextBlockには枠以外に何も表示されていない(クリックで拡大)

次にリスト3と同じようにGrid要素をViewBoxで括り、Backgroundプロパティを削除します。コードはリスト4のようになります。

リスト4 ButtonとTextBlock要素を配置しプロパティを設定したコード

<Page
    x:Class="Beginners_Button.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Beginners_Button"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Viewbox>
    <Grid >
        <Button x:Name="startButton" Content="表示" HorizontalAlignment="Left" Height="115" Margin="482,116,0,0" VerticalAlignment="Top" Width="407" FontFamily="Meiryo UI" FontSize="48"/>
        <TextBlock x:Name="MessageTextBlock" HorizontalAlignment="Left"  TextWrapping="Wrap"  VerticalAlignment="Top" Height="106" Width="1366" FontFamily="Meiryo UI" FontSize="72" FontWeight="Bold" Foreground="Gold" TextAlignment="Center" Margin="0,319,0,0" />
    </Grid>
    </Viewbox>
</Page>

次に、[表示]ボタンをダブルクリックするとstartButtonのClickイベントのコードが表示されます。その中にリスト5のコードを記述しましょう。

リスト5 startButton_Ckickイベント内にコードを記述する。

Private Sub startButton_Click(sender As Object, e As RoutedEventArgs) Handles startButton.Click
        MessageTextBlock.Text = "Hello Windows Store App!"
    End Sub

最初のサンプルでは、アプリがアクティブになった時にすぐに「Hello Windows Store App!」が表示されましたが、今回は[表示]ボタンだけしか表示されません。この時点で[表示]ボタンをクリックすると「Hello Windows Store App!」と表示されます(図14)。

図14 [表示]ボタンをクリックして文字列が表示された(クリックで拡大)

今回はこれで終わりです。Windows ストア アプリの基本的な書き方と表示方法を解説しました。いかがだったでしょうか? Windows ストア アプリ初心者であっても、プログラムの経験があれば、容易に理解できたのではないでしょうか。

次回は、少し複雑なタイマーを使ったアプリについて解説します。お楽しみに。

  • Buttonクリックで「Hello Windows Store App!」と表示するサンプル

    『Windows ストア アプリ100行プログラミング』 第2回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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メルマガ会員のサービス内容を見る

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