「XAML」の版間の差分

提供: KZK memo wiki
移動: 案内検索
(準備)
31行: 31行:
 
#** デザインとXAMLが分割された状態になる。説明は主にこの画面で行う。
 
#** デザインとXAMLが分割された状態になる。説明は主にこの画面で行う。
  
 
+
[[ファイル:WindowsStoreApp Labo Project.png|300px|frame|none|プロジェクトの作成]]
 
+
====初期のXAMLコード====
+
  
 
<syntaxhighlight lang="xml">
 
<syntaxhighlight lang="xml">

2014年2月2日 (日) 16:43時点における版

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のグリッドを作成したい場合は次のように行う。

<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

Canvas


blog comments powered by Disqus