Windowsストアアプリの画面構成部品、コントロール
CodeZine / 2012年12月21日 14時0分
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ストアアプリケーションのコントロールについて見ていきましょう。
■関連記事
Windowsストアアプリのコントラクトの基礎 ――検索、共有、設定、リモート再生
グリッドデータをドラッグ&ドロップで操作し新しい表を作成する.NETアプリケーションを作る
Windows Azureモバイルサービスからプッシュ通信を利用しよう
Collection 2題:「WPFにバインドできる辞書」と「重複を許す検索set」
Windowsストアアプリの画面構成部品、コントロール
■記事全文へ
トピックスRSS
ランキング
-
1トレエン斎藤さん「浮気写真」がSNSで流出!女芸人に晒されてしまう
秒刊SUNDAY / 2018年4月21日 9時26分
-
2見方を変えると読める文字!見た瞬間に読める人がいるらしい!
秒刊SUNDAY / 2018年4月21日 7時42分
-
3聯合ニュース「?????」 Yahoo!配信記事、丸ごと文字化けの珍事
J-CASTニュース / 2018年4月24日 19時47分
-
4テレ朝・小松靖アナの発言が話題 「テレビ朝日の信頼は地に墜ちた」
STANDBY / 2018年4月21日 8時58分
-
5デル、新ゲーミングPC「Dell G」を国内投入 - 高性能ながら低価格目指す
マイナビニュース / 2018年4月24日 21時18分