[UWPアプリ] データバインディング

WindowsアプリケーションでTextBoxコントロールにデータを表示する場合は、以下のように記述するのが一般的です。

textBox1.Text = "HIRO";

UWPアプリでも以下のように記述してデータを表示することが可能です。

textBlock.Text = "HIRO";

UWPアプリでは上記以外に、見た目の部分とデータの部分を分離して管理するデータバインディングという機能があります。

今回は、このデータバインディングについて見ていきます(以下バインディング)。

バインディングを理解するには以下の2つについて知っておく必用があります。

  1. バインディングターゲット
  2. バインディングソース

バインディングターゲットとは、コントロールやユーザーインターフェースの要素を表し、バインディングソースはクラスのインスタンスプロパティ(表示するデータや、見た目の装飾を表す値など)のことです。

データバインディングを理解するためにシンプルなアプリを作成します。

はじめに新規プロジェクトとして「空のアプリ(WIndows)」を作成します。

続いてバインディングターゲットを作成します。ここでは、MainPage.xaml を開き、2つのTextBlockを配置こととします。

TextBlockを2つ配置したMainPage.xaml

これらのTextBlockをバインディングターゲットとし、氏名と電話番号のデータが表示されるようにしていきます。

バインディングソースは、普通のクラスとして作成し、バインディングターゲットに表示するためのデータである氏名と電話番号をプロパティとして持たせます。

新規でPersonクラス(Person.cs)を作成し、コードを以下のように記述します。

public class Person
{
    /// <summary>
    /// 氏名
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// 電話番号
    /// </summary>
    public string Tel { get; set; }

    /// <summary>
    /// コンストラクタ
    /// </summary>
    public Person()
    {
        this.Name = "HIRO";
        this.Tel = "090-XXXX-XXXX";
    }
}

続いて、ViewModelを作成します。ViewModelというのは、バインディングターゲットとバインディングソースの橋渡しをする役目を担います。

ViewModelには、先ほど作成したPersonクラスのインスタンスをプロパティとして持たせます

実際にはこのViewModelを介してデータの変更をしたり、バインディングターゲットからのデータを受け取ったります。

新規クラスとしてPersonViewModelというクラス(PersonViewModel.cs)を作成して、以下のようにコードを編集します。

public class PersonViewModel
{
    private Person _personData = new Person();
    public Person PersonData
    {
        get
        {
            return this._personData;
        }
    }
}

続いてMainPage.xaml.csでPersonViewModelのインスタンスをプロパティとして公開するコードを記述します。

public sealed partial class MainPage : Page
{
    /// <summary>
    /// PersonViewModelのインスタンスをViewModelプロパティとして公開する
    /// </summary>
    public PersonViewModel ViewModel { get; set; }

    public MainPage()
    {
        this.InitializeComponent();

        // PersonViewModelのインスタンスをViewModelプロパティに代入
        this.ViewModel = new PersonViewModel();
    }
}

これで、氏名と電話番号データをバインディングソースとして公開する準備ができました。

最後に、MainPage.xamlのTextBlockのコードを以下のように編集します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock Text="{x:Bind ViewModel.PersonData.Name}" Margin="10,10,0,0" />
    <TextBlock Text="{x:Bind ViewModel.PersonData.Tel}" Margin="10,35,0,0"/>
</Grid>

上記コードのTextBlockに注目してください。

Text属性は、TextBlockに表示する文字をセットする場所です。

ここに”{X:Bind~”という記述があります。この部分が先ほど作成したPersonクラスのデータをバインド(連結)している部分です。バインドしている値は、MainPage.xaml.csで作成したViewModelプロパティの値です。ViewModel.PersonData.Nameが氏名のデータで、ViewModel.PersonData.Telが電話番号のデータです。

これでデータバインディングを使用したアプリの完成です。

実際に実行して確認をしてみましょう。

「textBlock.Text = “HIRO”」のようなコードを記述することなくデータが表示されるのを確認できることでしょう。

実行結果

冒頭で述べた通り、以下のようなコードでもデータは表示することが可能です。

textBlock.Text = "HIRO";

このような書き方の方がコード量は少ないのですが、データバインディングを使用することで、どのコントロールにどのデータを表示するかをいちいち意識しなくても済むようになります。

 

[UWPアプリ] ボタンのクリックイベントを作成する

今回はボタンのクリックイベントを作成してみましょう。

クリックイベントの作成方法は2通りあります。

  • デザイナに貼り付けたボタンをダブルクリックする
  • デザイナでボタンを選択状態にしたあと、プロパティウィンドウからクリックイベントを作成する

プロパティウィンドウからクリックイベントを作成してみましょう。

MainPage.xaml に貼り付けたボタンを選択状態にしたら、プロパティウィンドウで雷マークのアイコンをクリックします。

イベント一覧が表示されるので、Clickと書かれた場所をダブルクリックします。

Clickイベントの作成

Clickイベントが作成され、コードエディタが開きます。

作成されたクリックイベント

イベントが作成できたら、TextBlockに文字を表示するコードを書いてみましょう。

TextBlockにテキストを表示するには、Textプロパティを使用します。

今回は「Hello, UWP!!」と表示させてみましょう。

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

コードの入力が完了したら、実行して動作を確認します。

Buttonをクリックすると、TextBlockに「Hello UWP!!」が表示されます。

実行画面

[UWPアプリ] 画面のデザイン

前回作成したプロジェクトを開いて、画面のデザインをしてみます。

最初に、ソリューションエクスプローラーからMainPage.xamlをダブルクリックして表示します。

もし、MainPage.xamlが正常に表示されない場合は、開発者モードを有効にしていないことが考えられます。この場合は、前回の記事を参考に開発者モードを有効にしてください。それでもエラーになる場合は、一度MainPage.xamlを閉じてソリューションをクリーン/ビルドしてから再度表示してみてください。

MainPage.xamlを開いたときの画面は以下のように、既定でWIndows Phoneサイズの画面になっています。

MainPage.xaml

このまま開発しても問題ないですが、デスクトップアプリケーションを軸として開発できるよう、ここでは「23” Desktop(1920×1080) 100%スケール」を選択してみましょう。

画面サイズの変更

それでは、画面へコントロールを貼り付けてみましょう。

コントロールは「ツールボックス」にあります。「ツールボックス」が表示されていない場合は、Visual Studioのメニューで[表示]-[ツールボックス]を選択します。

ツールボックスには様々なコントロールがあります。

今回は、ButtonとTextBlockを配置してみましょう。

TextBlockとは、文字列を表示するためのコントロールです。クラシックアプリケーションでいうLabelコントロールと思えばよいでしょう。

ツールボックスからButtonとTextBlockを画面にドラッグ&ドロップしましょう。

あとは任意の位置へ移動して配置します。

画面へのコントロールの配置

ほかにも様々な部品がありますが、配置方法は同じです

次回はボタンクリックのイベントを作成してみましょう。

[UWPアプリ] 新規プロジェクトの作成と各種ファイル

Visual StudioでUWPアプリケーション開発用のプロジェクトを新規作成してみましょう。
Visual Studioを起動したら、新しいプロジェクトの作成をします。

テンプレートで、「ユニバーサル」を選択後、一覧から「空白のアプリ(ユニバーサルWindows)」を選択し、プロジェクト名を入力して[OK]ボタンをクリックします。

プロジェクトの新規作成

初回の場合は「Windows 10 開発者モードを有効にする」が表示されます。

開発者モードを有効にする

 

本文中の「開発者向け設定」のリンクをクリックして、以下の画面が表示されたら「開発者モード」にチェックをつけて有効にします。この設定を行わないと画面のデザインも行えないので注意が必要です。

開発者モードを有効にする

 

プロジェクトを作成したらソリューションエクスプローラーでファイルを確認してみましょう。

ソリューションエクスプローラー

  • Properties – 各種設定用
  • Assets – 各種画像ファイル置き場
  • App.xaml – アプリケーションのソースコードファイル
  • ApplicationInsights.config – アプリケーションの構成ファイル
  • MainPage.xaml – アプリケーションのメイン画面用ファイル
  • Package.appxmanifest – アプリケーションの設定情報を含むマニフェストファイル
  • project.json – コマンド実行の定義ファイル

様々なファイルがあることがわかります。

次回は実際にアプリケーション画面のデザインについて説明します。

 

[UWPアプリ] ユニバーサルテンプレート

今回は、Adobe IllustratorやPowerPoint用のテンプレートについて紹介します。

これらのテンプレートを使用することで開発を行う前に、Adobe IllustratorやPowerPointを使用してUWPアプリケーションや従来のデスクトップアプリケーション画面のデザインを行うことができます。

ダウンロード先は以下の通りです。

管理人はIllustratorを持っていないため、Powerpointの方を紹介します。

リンクをクリックすると、Microsoft PowerPoint templates for UWP apps (Preview version).zipというファイルがダウンロードされます。

解凍すると、以下の6つのPowerpointファイルがあることを確認できます。

  • UWP app settings templates for PCs.pptx
  • UWP app settings templates for phones.pptx
  • UWP app settings templates for tablets.pptx
  • UWP app templates for PCs.pptx
  • UWP app templates for phones.pptx
  • UWP app templates for tablets.pptx

また、Storyboard shapesというフォルダの中には以下3つののSBSXファイルがあります。

  • Windows Controls Shapes.sbsx
  • Windows Elements Shapes.sbsx
  • Windows Settings App Controls.sbsx

これら3つのファイルはPowerPointの「ストーリーボード」タブからインポートして使用します(PowerPoint 2013で説明します)。

PowerPointで「ストーリーボード」タブを選択したら、「図形のインポート」をクリックします。

図形のインポート

3つのファイルをインポートすると、以下のようにストーリーボードで使用できる図形が追加されます。

インポートされた図形

多くのテンプレートが含まれており、簡単にアプリケーションのデザインを行うことが可能です。

テンプレートを使用したデザイン