XAML入門 XAMLの概要

アプリ開発

はじめに

筆者は、これまで組み込みプログラムを扱ってきたので、C言語中心でした。

少しプログラミングの幅を広げようとXAMLを勉強してみます。

XAML入門として、ここでは、XAMLの概要をまとめてみようと思います。

XAMLとは

XAMLとは、宣言型のパークアップ言語で、.NET Coreアプリのユーザーインターフェース(UI)を簡単に作成できる言語です。XAMLによるUIプログラムとC#などで記述される制御プログラムを分離することで、アプリの開発がしやすくなります。

XAMLファイルの拡張子は、「.xaml」です。XAMLファイルをテキストファイルとしてみると中身は、XMLファイルと同じ構成です。

XAMLの構文

上のXAMLの例では、StackPanelオブジェクトとButtonオブジェクトが定義されています。

XAMLの記述は、「<」から始まり、「>」で終わります。

「<」の次には、オブジェクトの名前がきます。オブジェクトの中には、コンテンツを含めることができます。StackPanelオブジェクトの中には、Buttonオブジェクトというコンテンツを含んでいます。

オブジェクトの終了は、

</  オブジェクト名  > 

となります。

コンテンツを含まないオブジェクトは、Buttonオブジェクトのように「/>」で終了します。XAMLの名前は、大文字と小文字を区別します。

プロパティ

プロパティは、オブジェクトの要素の属性を表します。

上の例では、Buttonオブジェクトの属性BackgroundにBlueという属性値を設定しています。

このように、属性の書き方は、

オブジェクト名 属性 = ” 属性値 ”

です。

ここでのボタンオブジェクトは、赤色のテキストで「Click」と表示される背景が青色のボタンとなります。

プロパティ要素構文

プロパティ値を指定するために必要なオブジェクト、または、情報をプロパティの引用符、文字列制限内で表現できない場合は、プロパティ要素構文を使います。

プロパティ要素構文は、次のような構成です。

プロパティ要素構文は、オブジェクト名とプロパティ名をドット「.」で接続します。

Buttonオブジェクトに関するプロパティ要素構文の例を示します。

<Button>
  <Button.Background>
    <SolidColorBrush Color="Blue"/>
  </Button.Background>
  <Button.Foreground>
    <SolidColorBrush Color="Red"/>
  </Button.Foreground>
  <Button.Content>
    This is a button
  </Button.Content>
</Button>

コレクション構文

プロパティ値の型がコレクション型の場合、XAMLでは、コレクション構文を使います。

<LinearGradientBrush>
  <LinearGradientBrush.GradientStops>
  <GradientStop Offset="0.0" Color="Red" />
    <GradientStop Offset="1.0" Color="Blue" />
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

線形グラデーションの位置と色をコレクションで設定しています。

このようにプロパティの要素を1つ以上の子要素として記述します。

コンテンツプロパティ

XAMLでは、クラスは、1つのプロパティをコンテンツプロパティとして指定できます。

親オブジェクトに対して、1つのオブジェクトが子要素であるとき、そのオブジェクトを親オブジェクトのコンテンツプロパティとして指定します。

例えば、Borderオブジェクトの子オブジェクトとして、TextBoxオブジェクトを定義するとき、次のように書けます。

<Border>
  <TextBox Width="300"/>
</Border>

コンテンツプロパティは、コレクション構文と組み合わせて記述することもできます。

  <StackPanel>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </StackPanel>

StackPanelオブジェクトの子オブジェクトButtonオブジェクトは、コレクションで設定しています。

イベント

XAMLでは、イベントを記述できます。

  <Button Click="Button_Click" >Click Me!</Button>

Buttonオブジェクトには、Clickイベントという、ボタンをクリックしたときに発生するイベントがあります。

上の例では、Clickイベント発生時に処理されるイベントとして、Button_Clickを登録しています。

ルート要素

XAMLファイルは、1つのルート要素を持ちます。

例えば、ページの場合は、次のようにPageの要素を持ちます。

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Page>

ルート要素には、xmlnsとxmlns:x属性を含みます。これは、XAMLの名前空間を表します。

まとめ

ここでは、XAMLの基本的な構文についてまとめました。

これらのXAMLの構文を使ってUI部分を作成して、制御プログラムをC#で記述して、アプリケーションを構築できるように学習を進めていきたいと思います。

コメント

タイトルとURLをコピーしました