XAMLを使用してパネルを定義する～1.Canvas～

WindowsPhone7に関して、前回”Windows Phone 7 の開発環境構築　～Hello WP7 World～“では開発環境の構築から簡単な文字列の出力までを解説しました。

今回はXAMLを使用してコントロール(マイクロソフト社のプラットフォームでのUI部品の総称)を配置するためのパネルについて解説します。

詳細は以下から。

XAMLとは

XAMLはXMLをベースとしたマークアップ言語です。この言語を使用することで、HTMLやAndroidのレイアウトファイルのような感覚でアプリケーションのレイアウトを定義することが可能になります。

また、XAMLは下記プラットフォームのレイアウトも作成することができます。

• WPF(Vistaから採用されたWindowsアプリケーションのプラットフォーム)
• SilverLight(マイクロソフト社が提供するリッチWEBコンテンツのプラットフォーム)

この言語に精通することで様々なプラットフォームでのデザインが行えるようになります。

XAMLではルート要素(WP7では<phone>)について１個のパネルを配置して、そのパネルにコントロールを配置していきます。

パネルとは

パネルとはコントロールを配置するための土台となる要素です。

プロジェクトを作成すると、<Grid>という要素が<phone>要素の子として記述されています。(下記コード参照)ここで使用されている<Grid>がパネルです。

<phone:PhoneApplicationPage
    ～省略～>

    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 追加コンテンツをここに入力します-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
    </Grid>
    ～省略～
</phone:PhoneApplicationPage>

パネルはコントロールだけでなく、パネルを子要素として記述することも可能です。

パネルは3種類あり、それぞれ特性が異なります。

【訂正】2011/10/04 WrapPanelとDockPanelがあると記述しておりましたが、これらはWPFプラットフォームで使用できますが、WP7プラットフォームでは使用できないことが判明したため、削除しました。

パネル名	概要
Canvas	親からの絶対位置で子要素を配置する。
StackPanel	子要素を縦か横方向に並べる。
Grid	子要素をHTMLのテーブルのように配置する。

今回はCanvasについて解説します。他のパネルについては次回以降で解説します。

Canvas

Canvasは親要素の上位置から子要素の上位置、親要素の左位置から子要素の左位置を子要素の属性として記述して子要素の位置を決定します。

まずは今回のサンプルから。

<phone:PhoneApplicationPage
    ～省略～>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        ～省略～
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" VerticalAlignment="Top">
            <Canvas
                Background="BlanchedAlmond"
                Height="200"
                Width="450">
                <TextBlock
                    Canvas.Left="70"
                    Canvas.Top="100"
                    Foreground="Blue"
                    Text="このレイアウトは"/>
                <TextBlock
                    Text="Canvasで配置されています"
                    Canvas.Left="200"
                    Canvas.Top="130"
                    Foreground="Blue"/>
            </Canvas>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

6行目でCanvas要素を定義しています。
Bacgroundで背景色を、Heightで縦の大きさ、Widthで横の大きさを指定しています。

11、17行目では親要素からの左位置をCanvas.Leftで指定しています。12、18行目では親要素からの上位置をCanvas.Topで指定しています。
Canvasの子要素として配置する要素にはこの２つの属性を記述することで、配置位置を指定することができます。

属性名	概要
Canvas.Left	親要素からの左位置を指定する。
Canvas.Top	親要素からの上位置を指定する。

次回はCanvas以外のパネルについて解説します。