第4回 画面を構成するさまざまなコントロールと画面遷移連載:Windowsストア・アプリ開発入門(1/6 ページ)

Windowsストア・アプリの画面に機能を追加してこう。今回はUIコントロールを紹介し、RSSフィードリーダーを作成する。

» 2013年10月17日 17時15分 公開
連載:Windowsストア・アプリ開発入門
業務アプリInsider/Insider.NET

powered by Insider.NET

「連載:Windowsストア・アプリ開発入門」のインデックス

連載目次

 前回から本格的にアプリを作り始めた。前回は、[ハブ アプリ (XAML)]プロジェクト・テンプレートを開始点として、スタート画面のタイルとスプラッシュスクリーン、そしてメイン画面のUI(ユーザーインターフェイス)を作成した。今回は、UIを作るために用意されている標準のコントロールを紹介し、WebViewコントロールを使って2つ目の画面のUIを作成して(次の画像)、メイン画面からの画面遷移を実装する。本稿のサンプルは「Dev Center - Windows Store apps サンプル: Windowsストア・アプリ開発入門:第4回」からダウンロードできる。

今回作成する画面(実行結果) 今回作成する画面(実行結果)
記事のタイトルと、記事のWebページを表示する(一部に画像処理を施してある)。

事前準備

 Windows 8.1(以降、Win 8.1)用のWindowsストア・アプリ(以降、Win 8.1アプリ)を開発するには、Win 8.1とVisual Studio 2013(以降、VS 2013)が必要だ。本稿執筆時点では、まだ製品版が一般にはリリースされていないので、Visual Studio Express 2013 Preview版とWindows 8.1 Preview版を使用する*1。詳しくは第2回の記事を参照してほしい。そして、前回終了時点のソースコード(「Windows Store app samples:Windowsストア・アプリ開発入門:第3回」からダウンロード可)を用意しておいてほしい。

*1 本稿はPreview版に基づいて記述しているため、製品版では異なる可能性がある。あらかじめご承知おきいただきたい。なお、10月18日から製品版が一般公開される。Expressエディションの製品版が利用可能になり次第、本連載も製品版に切り替える予定だ。


画面を構成するさまざまなコントロール

 VS 2013でXAMLエディタを開いているときに「ツールボックス」を開いてみよう(メニューバー―[表示]―[ツールボックス]で表示)。ツールボックスで[すべての XAML コントロール]を展開すると、標準で用意されているコントロールが一覧される(次の画像)。

標準で用意されているコントロールの一覧 標準で用意されているコントロールの一覧
画像を途中で切断し、左右に並べてある。最初の項目[ポインター]は、コントロールではなく、デザイン・ビュー(後述)でコントロールを選択するためのツール。

 これらのコントロールは画面のUIを作るために標準で用意されているものである。その中で、Windows.UI.Xaml.Controls名前空間のListViewコントロールやTextBlockコントロールなど、いくつかは前回までに使ってきた。

 これら標準のコントロールを知ることが、画面をデザインしていくうえで重要だ。ところが、ツールボックスにアルファベット順で並べられた一覧を見ていてもよく分からないだろう。おまけに、この一覧の中には通常は使わないものまで入っている。そこで、今回の末尾の[付録](「まとめ」のさらに後ろ)に、標準のコントロールを使用目的別に分けて掲載しておいた。それぞれに簡単な説明も付けてある。画面デザインを考えるときに役立ててほしい。

コントロールを画面に配置する方法

 コントロールを画面に配置するには、いろいろな方法がある。やりやすい方法を見つけてほしい。

 VS 2013でXAMLファイルを開くと、次の画像のようになる。

VS 2013でXAMLファイルを開いているところ VS 2013でXAMLファイルを開いているところ
XAMLエディタの上が「デザインビュー」((1))、下が「XAMLビュー」((2))、画面の左端には「ツールボックス」をピンで留めてある((3))。

 この画面で、コントロールを配置するには、次のような方法がある。

  • ツールボックスからデザインビューへ、コントロールをドラッグ&ドロップする
  • ツールボックスでコントロールをクリックしてから、デザインビューでクリックする
  • デザインビューで既存のコントロールをクリックしてから、ツールボックスでコントロールをダブルクリックする
  • ツールボックスからXAMLビューへ、コントロールをドラッグ&ドロップする
  • XAMLビューで配置したい箇所をクリックしてから、ツールボックスでコントロールをダブルクリックする
  • XAMLビューでXAMLコードを直接編集する
       1|2|3|4|5|6 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。