Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Windowsストアアプリの画面構成部品、コントロール

速習 Windowsストアアプリケーション 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/12/21 14:00

 Windows 8が発売され、タッチ操作向けのアプリケーションのストア「Windowsストア」がオープンしました。本記事ではその新しい「Windowsストア」向けのアプリケーションを開発するお手伝いをします。今回はアプリケーションの画面(UI)を構成するコントロールを紹介します。

目次

はじめに

 第1回第2回では、Windowsストアアプリケーションのデフォルトプロジェクトを解説しました。今回は、Windowsストアアプリケーションの画面を構成する部品「コントロール」について紹介します。

 なお、本記事はXAML+C#での開発を想定しています。

コントロールの概要

 コントロールは、画面にボタンや画像のようなパーツを配置するための部品です。コントロールには画像(Image)やボタンを配置するようなものから、レイアウトを制御するためのもの(Grid、Canvasなど)まで、さまざまな種類があります。

 Windowsストアアプリケーションでは、主にHTMLかXAMLを用いてコントロールを記述します。

XAMLコントロールの書き方

XAMLに記述するかコードから追加する

 コントロールはXAMLコードで記述するのが基本ですが、コードビハインド(C#)側から追加することも可能です。

 以下にボタン(Button)を表示するコード紹介します。XAMLでの記述以下のようになります。

XAMLコードでButtonコントロールを配置
<Grid x:Name="MainGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="Button" HorizontalAlignment="Left" Margin="99,122,0,0" VerticalAlignment="Top"/>
</Grid>

 続いて、C#のプログラムコードから追加する場合、以下のような記述になります。

C#コードでButtonコントロールを配置
var button = new Button();
button.Content = "Button";
button.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
button.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;

button.Margin = new Thickness(99, 122, 0, 0);

this.MainGrid.Children.Add(button);

 このようにC#上で追加するほうがコード量は多くなります。また、デザインビューでのプレビュー表示も確認できなくなりますので、プログラムコードから大きくプロパティを変えるような必要がない限り、XAMLで記述するのが良いでしょう。

 なお、コントロールのプロパティを変える方法としては、第2回で触れたVisualStateを変更する方法もあります。

デザインビューに追加する

 XAMLコードにコントロールを追加するには、コードビューにXAMLコードを記載する以外に、ツールボックスからデザインビューにドラッグ&ドロップすることもできます。ドロップで追加されたコントロールはXAMLコードにも追記されます。

デザインビューにドロップで配置することもできる
デザインビューにドロップで配置することもできる
コラム:実際の開発での使い分け

 私が実際に開発する場合、デザインビューにドラッグしてコントロールをどんどん配置し、その後で、プロパティウィンドウやXAMLのコードで値を調整したりバインディングの設定をしていきます。

 細かくスタイルを触りたい場合や、後述するリスト系コントロールのテンプレートを触りたい場合はBlendで編集します。

標準以外のコントロールを追加もできる

 コントロールは、最初から利用できるもの以外に、後から追加することもできます。

 下の画像では広告を追加するAdControl、Syncfution製のEssential Studio for WinRTが追加されています。

コントロールを追加した例
コントロールを追加した例

見た目はBlendのほうが編集しやすい

 コントロールの見た目の編集には、Visual Studio 2012に付随するBlend for Visual Studio 2012が向いています。Blend for Visual Studioについては別の回で解説する予定です。

コントロールの系統

 本記事ではコントロールをいくつかの分類に分けて紹介します。以下は公式のものではなく、本記事の説明のための分類です。

  • レイアウト系コントロール
  • ボタン系コントロール
  • フォーム系コントロール
  • リスト系コントロール
  • 広告
  • その他

 それでは、Windowsストアアプリケーションのコントロールについて見ていきましょう。


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

修正履歴

  • 2012/12/16 09:11 コラムの書き方確認

  • 2012/12/14 20:29 概要追加(西村)

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

バックナンバー

連載:速習 Windowsストアアプリケーション

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5