[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でのプロパティや属性についてもう少し掘り下げて見ていきます。