[UWP] 入門003:Hello World(1)

月曜日 , 21, 12月 2015 mac WinRT(UWP), UWP(Win 10), 入門 Leave a comment

　本記事はUWP（Universal Windows Platform）の入門記事第3回です。

　今回はHello Worldのアプリを作成し、PCでデバッグしてみます。次回は、様々な環境へのデバッグを、その次はプロジェクトの構成やフレームワークの仕組みを解説します。そのためHello Worldは全3回構成になります。

 

概要

 

　本記事では以下のことが学習できます。

 

・UWPプロジェクトの作成

・画面（XAML）の編集

・イベントハンドラー

・ビルド&デバッグ

 

環境条件

 

　本記事は以下の環境を前提としてます。

 

・Windows 10 OS(Pro以上)

・Visual Studio 2015(+UWP SDK)

 

プロジェクトの作成

 

　Visual Studioで開発する際には、まず「プロジェクト」を作成します。

　プロジェクトは以下の2つの方法で作成開始できます。

 

方法1:Visual Studioの左上、メニューバーから「ファイル」をクリック→「新規作成」にマウスオーバー→「プロジェクト」をクリックします。

001

 

方法2:Visual Studioを起動します（デフォルトの状態であればスタートページが表示されます）。スタートページの「新しいプロジェクト」をクリックします。

002

 

　「新しいプロジェクト」ポップアップウィンドウが起動します。

003

 

　ウィンドウ左のメニューから「Visual C#」をクリックして展開→「Windows」をクリックして展開→「ユニバーサル」をクリックするとUWP用のプロジェクトだけを表示することができます。

004

 

　ウィンドウ中央のプロジェクト一覧から「空白のアプリ（ユニバーサルWindows）」を選択。

　ウィンドウ下部名前項目に「Hello_UWP」と入力。

　ウィンドウ右の「Windows Dev Centerでtelemetryを表示」のチェックを外します。

（「Windows Dev Centerでtelemetryを表示」のチェックを入れておくと、アプリケーションンのパフォーマンスなどを測定できますが、今回の解説では使用しないため外します。）

　画面右下の「OK」をクリックすればプロジェクトが作成されます。

005

 

　プロジェクトが作成された状態が以下です。

006

 

画面の編集

 

　プロジェクトが作成できました。続いて、アプリケーションの画面を編集してHello Worldという文字を表示するための「コントロール」を画面に配置します、

　今回は最初は何も文字が表示されていないところに、ボタンをクリックすることでHello Worldの文字を表示することにします。

 

　画面右側の「ソリューションエクスプローラー」から「MainPage.xaml」をダブルクリックします。

007

 

　下記画像のようにMainPage.xamlのエディタが起動します。

　上部が「デザインビュー」、下部が「コードビュー」です。UWPではデザインビューにコントロールをドラッグ&ドロップして画面を作成することも、画面をxml形式で表現したxamlと呼ばれるコードを編集して画面を作成することもできます。

 

　まずは画面にボタンを配置します。

　Visual Studioの左端「ツールボックス」をクリックします。デフォルトの状態では「ツールボックス」は以下の画像のように折りたたまれて表示されています。

009

 

　「ツールボックス」をクリックします（初回時はツールボックスの初期化があるので、表示までに時間がかかる場合があります）。

010

 

ボタンの配置

 

　ツールボックスから「Button」をドラックしてビジュアルエディターにドロップします。

011

 

　ビジュアルエディタにButtonをドロップすることでコードエディタに以下のような一行が追記されます。

 

        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="95,301,0,0" VerticalAlignment="Top"/>

 

　これはビジュアルエディタの表示が、コードエディタに記述されたXAMLと呼ばれるXML形式の記述の結果を表現したものであり、相互に変更が反映されるためです。

　そのため、上記のようにビジュアルエディタにコントロールをドロップすることと、コードエディタを以下のように書き換えることは同じ結果となります。

 

<Page
    x:Class="Hello_UWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_UWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="95,301,0,0" VerticalAlignment="Top"/>
    </Grid>
</Page>

 

TextBlockの配置

 

　同様に、文字を表示するためのTextBlockをデザインビューにドロップします。

012

 

TextBlockの文字を変更する

 

　画面にTextBlockと表示されていますが、ボタンを押したタイミングで「Hello World」と表示したいため、この文字を消します。

　TextBlockをクリックして選択状態とし、画面右下のプロパティウィンドウのTextプロパティを空にします。

013

 

ボタンをクリックした際のイベントを記述する

 

　続いて、ボタンをクリックした際のイベントを作成します。

　ビジュアルエディター上のButtonコントロールをダブルクリックします。

　するとMainPage.xaml.csというC#でプログラムコードが書かれたファイルが開かれ、以下の行が自動で追記されます。

 

        private void button_Click(object sender, RoutedEventArgs e)
        {

        }

 

　このメソッド内にボタンが押された際の処理を記述することでイベントが記述できます。このようなメソッドを「イベントハンドラー」と呼びます。

　同時にMainPage.xamlのコードも以下のように変更されています。

 

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="95,301,0,0" VerticalAlignment="Top" Click="button_Click"/>

 

　「Click=”button_Click”」が追記されています。このbutton_ClickがMainPage.xaml.csのメソッド名と同一であることに注目してください。

　このようにxamlと対応するxaml.cs間では、「クリック（Click）イベントで実行するイベントハンドラーはbutton_Click」という指定が可能です。

 

ボタンクリックでテキストを変更する

 

　button_ClickイベントハンドラーにTextBlockを変更するコードを記述します。

 

        private void button_Click(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = "Hello World";
        }

 

　textBlock.Textプロパティに「Hello World」という文字列を代入しています。

　このtextBlockはTextBlockコントロールに以下のように付けられた名前（Nameプロパティ）です。

 

<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="95,243,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top"/>

 

　　「x:Name=”textBlock”」というのがコードビハインド（xaml.csファイル）から、xamlに記述されたコントロールを操作するための名前をつける記述です。

 

デバッグで動作を確認する

 

　ここまで記述したプログラムの動作を確認するために「デバッグ」を行います。

　Visual Studioの上部メニューバーの下記画像の「ローカルコンピューター」をクリックします。

（左の表示がDebugやx86、ローカルコンピューターでない場合は、それぞれの文字をクリックしてプルダウンを表示し、以下に合わせてください）

014

 

　するとアプリケーションが実行されます。

　Buttonと表示されたボタンをクリックすることでHello Worldの文字が表示されれば成功です。

 

015

 

最後に

 

　今回は、プロジェクトの作成から、xamlとxaml.csの修正、デバッグまでを解説しました。デバッグはローカルのコンピューターのみでしたが、次回はPCとMobileのシミュレーター、Mobileの実機でのデバッグについて紹介します。

 

　次回入門004:Hello World(2) デバッグ

 

このエントリーをはてなブックマークに追加
LINEで送る

関連記事:

  1. [UWP] 入門005:Hello World(3) 解説
  2. MetroStyleApp入門 vol9.ページ内に別のページを読み込む
  3. [UWP] 入門006:別のページに遷移する
  4. [UWP] 入門007:定期的に処理を行う(タイマーイベント)

Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。