読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

メトロアプリでHello World

メトロアプリ Windows

概要

今月はメトロアプリを作ることになった
とりあえずHelloWorldを作ることによってプロジェクトを作る流れとか簡単な概念を覚える

詳細

メトロアプリとは

Windowsアプリとメトロアプリの違いとは、メトロアプリはWindows Storeからダウンロードできるアプリのこと
PC 用のアプリを入手する - Windows のチュートリアル

開発環境

Visual Studio 2013

プロジェクトのつくり方

メニューのファイルから新しいプロジェクト選択
f:id:tiro105:20150706135052p:plain

Visual C#から空のコンポーネント選択
f:id:tiro105:20150706135133p:plain

プロジェクトが作成される
f:id:tiro105:20150706135418p:plain

新しく作られたプロジェクトは最小限の項目として以下のものがそろっている

  • アプリ (アプリの名前、説明、タイル、開始ページなど) を説明し、アプリに含まれるファイルを一覧表示するマニフェスト ファイル (package.appxmanifest)
  • スタート画面に表示する大小のロゴ イメージ (Logo.scale-100.png と SmallLogo.scale-100.png) のセット
  • Windows ストアに表示するアプリの画像 (StoreLogo.scale-100.png)
  • アプリが起動したときに表示するスプラッシュ画面 (SplashScreen.scale-100.png)
  • アプリの XAML ファイルとコード ファイル (App.xaml と App.xaml.cs/.vb)
  • スタート ページ (MainPage.xaml) とそれに付随する、アプリの起動時に実行されるコード ファイル (MainPage.xaml.cs/.vb)

空のコンポーネントから作られたMainPageは空白のページテンプレートに基づいている
これはPageインスタンスを作成するための最小構成が記述されている
Page class - Windows app development
ただし、Windows ストア用のアプリを作成する場合は、より多くの作業が必要になる
たとえば、単純な 1 ページのアプリでも、さまざまなレイアウトやビューへの対応、中断時の状態の保存、再開時の状態の復元を行う必要がある
Visual Studio の他のプロジェクト テンプレートと Page テンプレートには、ビューと状態の管理に役立つコードとヘルパー クラスが含まれている

そのため MainPage を基本ページ テンプレートを使うページに置き換える

  1. ソリューション エクスプローラーで、MainPage.xaml を右クリックし、[削除] をクリック
  2. 削除を確認するメッセージが表示されたら、[OK] をクリック
  3. [プロジェクト] の [新しい項目の追加] をクリック、[新しい項目の追加] ダイアログ ボックスが開く
  4. 左側のウィンドウの [Visual C#] を選ぶ
  5. 中央のウィンドウで、プロジェクトに追加するページの種類として [基本ページ] を選ぶ
  6. ページの名前として「MainPage.xaml」と入力
  7. [追加] をクリック
  8. 空白のページ以外の新しいページを初めて追加すると、プロジェクトに含まれていないファイルが追加されることを通知するメッセージ ボックスが表示されます。[はい] をクリックしてこれらのファイルを追加します。さまざまなユーティリティ クラスのファイルが、プロジェクトの Common フォルダーに追加される
  9. ページの XAML とコード ビハインド ファイルがプロジェクトに追加される
  10. [ビルド]、[ソリューションのビルド] の順にクリックして、アプリをビルド
  11. F5を押下しデバッグ実行

f:id:tiro105:20150706142312p:plain

  1. Alt + F4で閉じる

ファイルの内容

プロジェクトを作成した時点で、アプリを動かす上で必要なファイルがいろいろ作られている
それらをソリューションエクスプローラーからダブルクリックして選択することにより加工していく

App.xaml

App.xaml は、アプリ全体で使われるリソースを宣言するファイル

<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld">

</Application>
App.xaml.cs

App.xaml.csは、App.xaml 用のコード ビハインド ファイル
コード ビハインドは、XAML ページの部分クラスと結合されるコード
XAML とコード ビハインドがまとまって、完全なクラスが作成される
App.xaml.csは、アプリのエントリ ポイントとなる
すべてのコード ビハインド ページと同じように、InitializeComponent メソッドを呼び出すコンストラクターが含まれている
InitializeComponent メソッドは自分で記述する必要はなく、isual Studio によって生成されるこのメソッドの主な目的は、XAML ファイルに宣言された要素を初期化すること
App.xaml.csには、アプリのアクティブ化と中断を処理するためのメソッドも含まれており、それらが必要な際には、これらのメソッドにコードを追加

MainPage.xaml

MainPage.xaml ファイルには、アプリの UI を定義する
要素の追加は、XAML マークアップを使って直接行うことも、Visual Studio のデザイン ツールを使って行うこともできるされる
このほか、このテンプレートには、戻るボタンやページ タイトルなどのシンプルなコンテンツや、ナビゲーションや状態管理のためのメソッドが含まれている

MainPage.xaml.cs

MainPage.xaml.csは、MainPage.xaml 用のコード ビハインド ページ
ここには、アプリのロジックとイベント ハンドラーを追加する
基本ページ テンプレートには、ページの状態を保存できるメソッドとページの状態を読み込むことのできるメソッドの 2 つのメソッドが含まれている

スタート ページの変更

アプリにコンテンツを追加してみる

  • MainPage.xamlをダブルクリックして選択
  • XamlデザイナーページでMyApplicationを選択する

f:id:tiro105:20150706145454p:plain

  • TextBlockが選択されているところを確認し、TextのStaticResource AppNameでF12を押下し定義へ遷移
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>
  • これをHello, world!に変更する
    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">Hello, world!</x:String>
    </Page.Resources>

こんな感じになる
f:id:tiro105:20150706150148p:plain

  • XAML エディターで、UI のコントロールを追加

戻るボタンやページ タイトルが含まれる Grid の直後のルート Grid で、次の XAML を追加する
この XAML には、ユーザーの名前をたずねる TextBlock、ユーザーの名前を受け取る TextBox 要素、Button、もう 1 つの TextBlock 要素を持つ StackPanel が含まれる
Grid Class (Windows)
TextBlock Class (Windows)
TextBox Class (Windows)
Button Class (Windows)
StackPanel class - Windows app development

        <StackPanel Grid.Row="1" Margin="120,30,0,0">
            <TextBlock Text="What's your name?"/>
            <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
                <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
                <Button Content="Say &quot;Hello&quot;"/>
            </StackPanel>
            <TextBlock x:Name="greetingOutput"/>
        </StackPanel>

イベントハンドラの設定

XAML 要素は、特定のイベントが発生したときにメッセージを送信できる
イベントに応答するためのコードをイベント ハンドラー メソッドに配置し、 イベント メッセージにより、イベントに応答してアクションを実行できる
例えば、多くのアプリに共通するイベントの 1 つは、ユーザーが Button をクリックすることによりアクションが実行される
ボタンの Click イベント用のイベント ハンドラーを作成する
そのイベント ハンドラーは、nameInputTextBox コントロールからユーザー名を取得し、それを使ってあいさつを greetingOutputTextBlock に出力する

イベントハンドラを追加するには
  • XAML ビューまたはデザイン ビューで、MainPage.xaml に追加した "Say Hello" Button を選択
  • プロパティ ウィンドウの [イベント] ボタン (イベント ボタン) をクリック
  • イベントの一覧の先頭にある Click イベントに、イベントを処理する関数の名前を入力する、今回は「"Button_Click"」と入力
  • Enter キーを謳歌するとイベント ハンドラー メソッドが作成され、イベントの発生時に実行されるコードを追加できるように、コード エディターに表示される
  • XAML エディターでは、Button の XAML が更新されて、次のように Click イベント ハンドラーが宣言される
<Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>

f:id:tiro105:20150706154031p:plain

  • コード ビハインド ページに作成したイベント ハンドラーにコードが追加されているので処理を追記する
  • イベント ハンドラーで、nameInput TextBox コントロールからユーザー名を取得し、greetingOutputTextBlock を使って結果を表示する
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            greetingOutput.Text = "Hello, " + nameInput.Text + "!";
        }

こんな感じで実行される
f:id:tiro105:20150706154051p:plain

ページのスタイルを設定する

テーマを選ぶ

アプリの外観をカスタマイズする
既定では、アプリは濃色スタイルのリソースが使われているのを、淡色テーマに変えてみる

淡色テーマに切り替えるには

App.xamlのApplicationタグ内にRequestedTheme="Light"を追加する

<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld" 
    RequestedTheme="Light">

f:id:tiro105:20150706162025p:plain
アプリのテーマはアプリ実行中は変更できないので注意

要素のスタイルを設定するには
  • MainPage.xaml を開き、 "What's your name?" TextBlock を選ぶ
  • プロパティウィンドウのプロパティボタン(ツールっぽいボタン)を押下

f:id:tiro105:20150706163120p:plain

  • [その他] グループを展開し、Style プロパティのプロパティ マーカーをクリックして、メニューを開く
  • メニューの [システム リソース] をクリックし、BaseTextBlockStyle をクリック

f:id:tiro105:20150706163439p:plain

すると該当のTextBoxが更新される

<TextBlock Text="What's your name?" Style="{StaticResource BodyTextBlockStyle}"/>

このスタイル変更をgreetingOutputにも適用したあとのStackPanelが以下のようになる

        <StackPanel Grid.Row="1" Margin="120,30,0,0">
            <TextBlock Text="What's your name?" Style="{StaticResource BodyTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
                <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
                <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
            </StackPanel>
            <TextBlock x:Name="greetingOutput" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>

実行結果はこんな感じ
f:id:tiro105:20150706163704p:plain

要素に独自スタイルを設定するには
  • MainPage.xaml に追加した greetingOutput TextBlock を選択
  • [その他] グループを展開し、Style プロパティを選択
  • メニューの [新しいリソースに変換...] をクリック

f:id:tiro105:20150706164759p:plain

以下のように設定しOK
f:id:tiro105:20150706170350p:plain

OKを押下するとTextBlockが以下のように更新される

<TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
  • このままでは作成したスタイルを何も加工してないので、変化がない

作成したスタイルを色々修正していく

Styleプロパティの横のプロパティ マーカーをクリックして、メニューを再び開き、メニューの [リソースの編集] をクリック
f:id:tiro105:20150706170704p:plain

するとApp.xamlが開きstyleの設定をするタグができているので以下のように設定する

    <Application.Resources>
        <Style x:Key="BigGreenTextStyle" BasedOn="{StaticResource BaseTextBlockStyle}" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Green"/>
            <Setter Property="FontSize" Value="36"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="Typography.StylisticSet20" Value="True"/>
            <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
            <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <Setter Property="TextLineBounds" Value="TrimToBaseline"/>
            <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
        </Style>
    </Application.Resources>

fontサイズとか色とか決めてる

これで実行すると
f:id:tiro105:20150706170933p:plain
こんな感じになる