XAML

提供: KZK memo wiki
移動: 案内検索

WindowsStoreアプリを作りたいわけだが、XAMLを使ったレイアウトをしたことがない。 その為なかなか着手が出来ず長い足踏みとなってしまったが、簡単なことだけはまとめておきたい。

前提

環境

OS Windows 8.1 Pro
開発環境 VisualStudio Express 2013 for Windows
開発言語 VisualC#

準備

  1. プロジェクトを作成する
  2. VisualStudio 2013 Express for Windows を起動する。
  3. 新しいプロジェクトを作成する。
    • ファイル(F) -> 新しいプロジェクト(P)
    • テンプレートからVisual C#を選択する。
    • 新しいアプリケーション(XAML)を選択、プロジェクト名を設定する。
      • 今回はLaboとした。
  4. MainPage.xamlを開く。
    • App.xaml.csが開いた状態で、アプリケーションが開始されるがソリューションエクスプローラを開き、MainPage.xamlを開く。
      • デザインとXAMLが分割された状態になる。説明は主にこの画面で行う。


プロジェクトの作成
<Page
	x:Class="Labo.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:Labo"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d">
 
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
	</Grid>
</Page>

初期の状態でGridが定義されているが、理解するまでは邪魔なのでコメントアウトしてよい。

レイアウト

ツールボックスから必要なアイテムをドラッグすることで自由にアイテムを配置できる。 しかし、GridやStackPanelやCanvasを利用せずにレイアウトすると非効率で煩雑な物になってしまう可能性がある。

ここではGrid、StackPanel、Canvasをの利用方法を簡単にまとめておきたい。


Grid

Gridは描画エリアを格子状に分割しレイアウトする仕組み。

Gridの定義方法

  • デフォルトは1x1。
    • 列数(横方向)を増やしたい場合はGrid.ColumnDefinitionsをGrid内に定義する。
      • Grid.ColumnDefinitionsにはColumnDefinitionを必要な分だけ定義する。この定義数が行数となる。
    • 行数(縦方向)を増やしたい場合はGrid.RowDefinitionsをGrid内に定義する。
      • Grid.RowDefinitionsにはRowDefinitionを必要な分だけ定義する。この定義数が列数となる。

4x4のグリッドを作成したい場合は次のように行う。

Gridで4分割
<Page
	x:Class="Labo.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:Labo"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d">
 
	<Grid>
 
		<Grid.ColumnDefinitions>
			<!-- 列数の定義 -->
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
 
		<Grid.RowDefinitions>
			<!-- 行数の定義 -->
			<RowDefinition/>
			<RowDefinition/>
		</Grid.RowDefinitions>
 
	</Grid>
 
	<!-- はじめに記述されていたGridはコメントアウトしておく
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
	</Grid>
	-->
 
</Page>

Gridの各エリアへの対応付け

  • 分割されたエリアに要素を配置するには、Grid.ColumnGrid.Rowを、タグの属性に追加する。
  • TextBlockを用意し、4分割された左下のエリアに配置する。
    1. Grid内、Grid.ColumnDefinistionsおよびGrid.RowDefinitionsの次に、TextBlockを記述する。
      • ツールボックスからTextBlockをドラッグしても良い。
    2. TextBlockの属性にGrid.ColumnGrid.Rowを定義する。
      • 左下のエリアに追加したいので、Grid.Columnの値は0Grid.Rowの値は1にする。
    3. TextBlockの文言を左下のテキストブロックに設定する。
      • TextBlockText属性を設定すれば良い。

上記の手順で、左下にグリッドの左下に左下のテキストブロックというTextBlockが配置される。 各エリアに○○のテキストブロックというTextBlockを配置させるコードは以下のようになる。


<Grid>
 
	<Grid.ColumnDefinitions>
		<!-- 列数の定義 -->
		<ColumnDefinition/>
		<ColumnDefinition/>
	</Grid.ColumnDefinitions>
 
	<Grid.RowDefinitions>
		<!-- 行数の定義 -->
		<RowDefinition/>
		<RowDefinition/>
	</Grid.RowDefinitions>
 
	<TextBlock Grid.Column="0" Grid.Row="1" Text="左下のテキストブロック" />
 
	<TextBlock Grid.Column="0" Grid.Row="0" Text="左上のテキストブロック" />
 
	<TextBlock Grid.Column="1" Grid.Row="1" Text="右下のテキストブロック" />
 
	<TextBlock Grid.Column="1" Grid.Row="0" Text="右上のテキストブロック" />
 
</Grid>
配置イメージ

StackPanel

StackPanelは要素を垂直もしくは水平方向に列挙しレイアウトする仕組み。

StackPanelの定義方法

  • 子要素の列挙方向を定義する
    • 垂直方向に列挙する
      • Orientaton属性をVerticalにする。これがデフォルト。
    • 水平方向に列挙する
      • Orientaton属性をHorizontalにする。
	<!--垂直方向に要素を列挙する場合-->
        <StackPanel Orientation="Vertical">
            <TextBlock Text="1111111111"/>
            <TextBlock Text="2222222222"/>
            <TextBlock Text="3333333333"/>
        </StackPanel>
 
	<!--水平方向に要素を列挙する場合-->
        <StackPanel Orientation="Horizontal" >
            <TextBlock Text="1111111111"/>
            <TextBlock Text="2222222222"/>
            <TextBlock Text="3333333333"/>
        </StackPanel>

Gridを利用して全体を2分割し、各エリアにStackPanelを配置したソースコードが以下。

<Page
    x:Class="Labo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Labo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid>
        <!--画面を2分割-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <!--垂直方向に要素を列挙する場合-->
        <StackPanel Orientation="Vertical" Grid.Column="0">
            <TextBlock Text="1111111111"/>
            <TextBlock Text="2222222222"/>
            <TextBlock Text="3333333333"/>
        </StackPanel>
 
        <!--水平方向に要素を列挙する場合-->
        <StackPanel Orientation="Horizontal" Grid.Column="1">
            <TextBlock Text="1111111111"/>
            <TextBlock Text="2222222222"/>
            <TextBlock Text="3333333333"/>
        </StackPanel>
 
    </Grid>
 
    <!--
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    </Grid>
    -->
</Page>
StackPanelを2分割のGridに配置


Canvas

Canvasは左上からの距離指定でレイアウトする仕組み。

Canvasの定義方法

  • 子要素に位置を指定する。
    • Canvas.Top属性に値を設定する。
    • Canvas.Left属性に値を設定する。
<Page
    x:Class="Labo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Labo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Canvas>
        <TextBlock Canvas.Top="100" Canvas.Left="100" Text="1111111111"/>
        <TextBlock Canvas.Top="200" Canvas.Left="200" Text="2222222222"/>
        <TextBlock Canvas.Top="300" Canvas.Left="300" Text="3333333333"/>
    </Canvas>
 
    <!--
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    </Grid>
    -->
</Page>
CanvasにTextBlockを配置



blog comments powered by Disqus