[Silverlight][基礎] コントロールの配置と命名

コントロールの配置

Silverlightでコントロールを配置するには、ソリューションエクスプローラーでデザインを行うXAMLファイルをファブルクリックして開きます。

次に、ツールボックスから配置したいコントロールをXAMLページ上にドラッグ&ドロップします。

以下は ButtonコントロールをXAMLページへドラッグ&ドロップする例です。

コントロールの配置

上記の他にXAMLコードをを直接記述しても配置が可能です。


 コントロールの命名

次に、配置したコントロールに名前を付ける方法を見てみましょう。

一番簡単なのはプロパティウィンドウから名前を付ける方法です。

任意のコントロールを選択したら、プロパティウィンドウの「名前」欄に入力します。

コントロールに名前を付ける

 

XAMLを直接編集してコントロールに名前を付ける場合は、属性名を x:Name とし属性値にコントロールに付ける名前を記述します。

以下の例では、x:Name=”btnSend” となっている部分です。

<Button x:Name="btnSend" Content="Button" HorizontalAlignment="Left" Margin="54,66,0,0" VerticalAlignment="Top" Width="75"/>

 

[Silverlight][基礎] XAMLの文法 ~プロパティ~

今回はSilverlightにおけるXMALのプロパティについて見ていきます。


属性値は自動で型変換される

まずは以下のButtonコントロールを表すXAMLを見てみましょう。

<Button Width="300" Content="Click Me!" Background="#FF1D73BD" />

Width, Content, Background のそれぞれの属性の値は、すべてシングルクォートで囲まれており、いずれも文字列で指定されていることがわかります。

XAMLで記述されたこれらの値は、自動で型変換が行われます。

上記の例だと

  • Widthの値 “300” → Double型
  • Content の値 “Click Me!” → String型
  • Backgroun の値 “#FF1D73BD” → Brush型

となります。


親のプロパティを子がそれぞれ指定できる

Silverlightでは(WPFも)、コントロールは階層構造を持ちます。

Gridコントロール上に配置した ButtonコントロールのXAMl例を以下に記します。

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="129*"/>
        <ColumnDefinition Width="271*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="17*"/>
        <RowDefinition Height="83*"/>
    </Grid.RowDefinitions>

    <Button Content="Click Me!" Background="#FF1D73BD" Margin="10,0" 
    	Grid.Row="1" Grid.Column="1" />
</Grid>

コントロールの詳しい説明は今後の記事で紹介します。

ここで見ていただきたいのは、12行目です。

Gridコントロールは、2行2列の表の形となっているのですが、Buttonコントロールに Grid.Row と Grid.Coumnのプロパティがあることが確認できます。

この Buttonコントロールに記述された Grid.Row, Grid.Coumn はButtonコントロールを配置している親プロパティを指しています。ここではButtonコントロールを Gridの行1、列1に配置することを表しています。

このように、親要素て定義されているプロパティに対して、子要素でそれぞれの値を指定可能なプロパティを、添付プロパティと呼びます。

今回は GridコントロールにButtononトロールを配置しましたが、CheckBoxコントロールなどの他のコントロールを配置しても添付プロパティを使用することができます。

 

次回から、プロパティウィンドウの使い方について説明します。

次回は、コントロールの配置について説明します。

[Silverlight][基礎] XAMLの文法 ~XAMLを理解する~

前回の記事では、XMLの文法について説明しました。

今回は、XMLの文法を踏まえた上で、XAMLの文法を理解していきます。


まずは CheckBoxをXAMLで記述する例を見てみましょう(リスト1)。

リスト1

<CheckBox HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Click="CheckBox_Click">Silverlight</CheckBox>

要素

リスト1で要素は CheckBox です。CheckBoxはC#やVBではクラスとして表されます。

よって要素はクラスに対応しています。

このCheckBoxのXAML例にはありませんが、要素はプロパティを表すものもあります。

属性

リスト1には、HorizontalAlignment, Margin, VerticalAlignment, Click の属性があります。

Windowsアプリケーションを作成したことがある方ならわかるかもしれませんが、HorizontalAlignmentは水平方向の文字位置、Marginは余白、VeriticalAlignmentは縦方向の文字位置を表しており、これらはプロパティです。

また、Click属性はClickイベントと結びつけられています。

このように、属性はプロパティとイベントと紐付きます。

コンテント

リスト1のコンテント部分は<CheckBox>と</CheckBox>の間にある「Silverlight」という文字列です。

このようにコンテントはCheckBoxに表示される文字列、つまりプロパティと紐付いています。


名前空間

XAMLもC#やVB.NETのように名前空間を表すことができます。
[Silverlight][基礎] SIlverlightプロジェクトを作成する で作成したプロジェクトを開き、MainPage.xamlファイルを開いてみましょう。

以下のようなコードになっているかと思います。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication1.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
    
    </Grid>
</UserControl>

2行目の

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

は xmlns という属性です。この属性は名前空間を表す属性で、

http://http://schemas.microsoft.com/winfx/2006/xaml/presentation” と書くことにより、以下に示す複数のCLR名前空間が参照されるようになります。

  • System.Windows
  • System.Windows.Controls
  • System.Windows.Controls.Primitives
  • System.Windows.Data
  • System.Windows.Documents
  • System.Windows.Ink
  • System.Windows.Input
  • System.Windows.Markup
  • System.Windows.Media
  • System.Windows.Media.Animation
  • System.Windows.Media.Effects
  • System.Windows.Media.Imaging
  • System.Windows.Media.Media3D
  • System.Windows.Shapes
  • System.Windows.Automation

このほかにも xmlns:x, xmlns:d, xmlns:mcなどがありますが、以下のような意味があります。

  • xmlns:x x名前空間:xamlの言語機能
  • xmlns:d d名前空間:Visual StudioやBlendで使用する機能
  • xmlns:mc mc名前空間:実行時に不要な機能を無視する機能
  • xmlns:sdk sdk名前空間:sdkを参照する
  • mc:d  上記xmlns:d をアプリ実行時に無視する
  • x:Class このxamlが紐付いているクラスファイルを指定する(この例ではSilverlightApplication.MainPage)

すべてを理解する必要はありません。

名前空間にはこのようなものがあるんだな、くらいに認識しておきましょう。

 

次回は、xamlでのプロパティや属性についてもう少し掘り下げて見ていきます。

 

[Silverlight][基礎] XAMLの文法~まずはXMLから~

Silverlightで画面に表示するコントロールや画像といったUI情報は Extensible Application Markup Language(XAML)と呼ばれる XMLをベースとした言語を使用します。

XAMLはWPFアプリケーションのUIを作成する言語としても使われます。

HTMLやXMLを使用したことがあれば、理解しやすい言語です。


まずは、前回作成したソリューションを開き、SilverlightApplication1プロジェクトの中にある MainPage.xamlをダブルクリックしてみましょう

以下のような画面になるはずです。

MainPage.xamlを開いたときの Visual Studio

真ん中の領域は、上がデザイナで下にはそのデザインを構成してるXAMLコードが表示されます。

XAMLコードは以下のようになっています。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication1.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

上記のXAMLコードは、大きく以下の2つの要素からなります。

  • <UserControl>~</UserControl>
  • <UserControl>タグの内側にある<Grid>

とは言っても、XMLやらHTMLに触れたことのない方には敷居が高く見えてしまうと思います。

そこで、XMLから学んでいきましょう。


 XMLについて学ぶ

XMLは独自のタグを指定することができメタ言語とも呼ばれています。
情報を記述するには、要素や属性を決める必要があります。

1.タグ

XMLはタグを使ってデータを表現します。タグは要素とも呼ばれます。

タグは < と > の記号を使って表現し、開始タグと終了タグとがあります。

たとえば Personというデータをタグで表現すると、以下のようになります。

<Person>HIRO</Person>

この例では、開始タグは<Person>で終了タグは</Person>です。

終了タグは </ で始まります。

2.コンテンツ

コンテンツとは開始タグ~終了タグの間の部分です。

先ほどの例では「HIRO」の部分がコンテンツにあたります。

コンテンツは、要素を入れ子にすることもできます。

<Person>
    <Name>HIRO</Name>
</Person>

また、コンテンツを持たない要素というものもあります。

<Person />

3.属性

属性は、開始タグの中に記述する情報(データ)です。

以下はPersonにidという属性を持たせた例です。idには0001という値を持たせています。

このように、属性は名前と値のペアになります。

<Person id="0001">HIRO</Person>

属性は複数持たせることも可能です。

<Person id="0001" section="IS">HIRO</Person>

このほか、属性にはW3Cで定義されている特別な属性があります。

  • xml:lang
  • xml:space

xml:langはコンテンツの記述に使用されている言語を示すための属性です。

xml:spaceはコンテンツ中の文字列に含まれるスペースをどのように扱うかを決定するための属性です。

4.コメント

コメントは <!– から –> の間に記述します。

<!-- ここにコメントを記述します -->

5.CDATAセクション

XMLはマークアップ言語であり、XML文書を作成するために使用される記号は直接記述できないものがあります。

このようなマークアップ専用の記号を通常の文字列として扱うためには CDATAセクションを使用します。

CDATAセクションは <![CDATA [ではじまり ]]> で終わります。

例えば < という記号は開始タグに使用される文字であるため、「X < 3 」のような文字列を直接記述できません。

CDATAセクションを使用すると、以下のように直接記述することができます。

<Calc><![CDATA[ X < 3 ]]></Calc>

 

 

次回はXAMLについて説明します。

[Silverlight][基礎] Silverlightアプリケーションのプロジェクト構成を理解する

前回はSilverlightアプリケーションのプロジェクトの作成方法について説明しました。

今回は、作成されたプロジェクトの構成がどのようになっているのかを理解していきます。


Silverlightアプリケーションのソリューション構成

まずは、前回作成した「SilverlightApplication1」を開き、ソリューションエクスプローラーを開きます。

ソリューション構成

ソリューションの構成を見るとわかるとおり、

  • SilverlightApplication1
  • SilverlightApplication1.Web

の2つのプロジェクトが追加されていることがわかります。

SilverlightApplication1プロジェクトは、Silverligthアプリ本体を作成するためのプロジェクトです。

SilverlightApplication1.Webプロジェクトは、Silverlightアプリケーションをホストする(つまり、Silverlightアプリケーションを表示するための)プロジェクトです。

よって、スタートアッププロジェクトはSilverlightApplication1.Webプロジェクトになります。

よく見ると、SilverlightApplication1.WebプロジェクトのSilverlightApplication1.xapというファイルがあることがわかります。

このSilverlightApplication1.xapが、SilverlightApplication1プロジェクトをビルドすると作成されるSilverlightアプリケーション本体です

SilverlightApplication1プロジェクトのプロパティを見てみましょう。Xapファイル名が「SilverlightApplication1.xap」となっていることがわかります。

このようにSilverlightアプリケーションはビルドするとXapファイルになります

Silverlightアプリケーション本体の確認


 

Silverlightアプリケーションを表示するWebプロジェクト 

上記でも説明したように、Silverlightアプリケーション本体はSilverlightApplication1プロジェクトです。

Silverlightアプリケーションは、そのままでは表示できないためホスト(表示)をするWebアプリケーションが必要となります。この例ではSilverlightApplication1.Webプロジェクトです。

この、SilverlightApplication1.Webプロジェクトには、

  • SilverlightApplication1TestPage.aspx
  • SilverlightApplication1TestPage.html

のファイルがあり、どちらもSIlverlightアプリケーション本体(SilverlightApplication1.xap)が表示できるように、あらかじめコードが記載された状態となっています。

既定では、SilverlightApplication1TestPage.aspx が起動するようになっています。


 

詳しい説明は次回以降に回すとして、とりあえずSilverlight本体がどの位置に表示されているのかを確認してみましょう。

ソリューションエクスプローラで、SilverlightApplication1プロジェクト内にある MainPage.xaml をダブルクリックして開きます。

次に、Xamlと書かれたタブ内で<Grid>タグ内にあるBackground属性にBlueを指定します。

Xamlの変更

変更が終わったら実行してみましょう。

Internet Explorerが開き、以下のような表示なると思います。

この青く塗りつぶされた部分が Silverlightアプリケーション本体です。

実行結果

次回はXAMLについて説明します。