「XAML」の版間の差分

提供: KZK memo wiki
移動: 案内検索
(StackPanel)
1行: 1行:
==StackPanel==
 
  
===プロパティ===
+
WindowsStoreアプリを作りたいわけだが、XAMLを使ったレイアウトをしたことがない。
 +
その為なかなか着手が出来ず長い足踏みとなってしまったが、簡単なことだけはまとめておきたい。
  
; Orientation : 要素を列挙する方向を指定する。Horizontal(水平方向)/Vertical(垂直方向|既定値)。
+
==前提==
; HorizontalAlignment : 水平方向の位置を調整する。Left/Center/Right。
+
 
; VerticalAlignment : 垂直方向の位置を調整する。Top/Center/Bottom。
+
===環境===
 +
{| border="1"
 +
|-
 +
! OS
 +
| Windows 8.1 Pro
 +
|-
 +
! 開発環境
 +
| VisualStudio Express 2013 for Windows
 +
|-
 +
! 開発言語
 +
| VisualC#
 +
|}
 +
 
 +
===準備===
 +
 
 +
# プロジェクトを作成する
 +
# VisualStudio 2013 Express for Windows を起動する。
 +
# 新しいプロジェクトを作成する。
 +
#* ''ファイル(F)'' -> ''新しいプロジェクト(P)''
 +
#* ''テンプレート''から''Visual C#''を選択する。
 +
#* ''新しいアプリケーション(XAML)''を選択、プロジェクト名を設定する。
 +
#** 今回は'''Labo'''とした。
 +
# '''MainPage.xaml'''を開く。
 +
#* '''App.xaml.cs'''が開いた状態で、アプリケーションが開始されるが''ソリューションエクスプローラ''を開き、'''MainPage.xaml'''を開く。
 +
#** デザインとXAMLが分割された状態になる。説明は主にこの画面で行う。
 +
 
 +
 
 +
 
 +
====初期のXAMLコード====
  
 
<syntaxhighlight lang="xml">
 
<syntaxhighlight lang="xml">
<StackPanel>
+
<Page
    <TexBlock>
+
x:Class="Labo.MainPage"
    <TexBlock>
+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    <TexBlock>
+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
</StackPanel>
+
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}">
  
<!-- TextBlockが水平方向に並ぶ -->
+
</Grid>
<StackPanel Orientation="Horizontal">
+
</Page>
    <TexBlock>
+
</syntaxhighlight>
    <TexBlock>
+
    <TexBlock>
+
</StackPanel>
+
  
 +
初期の状態でGridが定義されているが、理解するまでは邪魔なのでコメントアウトしてよい。
 +
 +
==レイアウト==
 +
 +
ツールボックスから必要なアイテムをドラッグすることで自由にアイテムを配置できる。
 +
しかし、GridやStackPanelやCanvasを利用せずにレイアウトすると非効率で煩雑な物になってしまう可能性がある。
 +
 +
ここではGrid、StackPanel、Canvasをの利用方法を簡単にまとめておきたい。
 +
 +
 +
===Grid===
 +
 +
Gridは描画エリアを格子状に分割しレイアウトする仕組み。
 +
 +
====Gridの定義方法====
 +
 +
* デフォルトは1x1。
 +
** 行数(縦方向)を増やしたい場合はGrid.ColumnDefinitionsをGrid内に定義する。
 +
*** Grid.ColumnDefinitionsにはColumnDefinitionを必要な分だけ定義する。この定義数が行数となる。
 +
** 列数(横方向)を増やしたい場合はGrid.RowDefinitionsをGrid内に定義する。
 +
*** Grid.RowDefinitionsにはRowDefinitionを必要な分だけ定義する。この定義数が列数となる。
 +
 +
4x4のグリッドを作成したい場合は次のように行う。
 +
 +
<syntaxhighlight lang="xml">
 +
<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>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
==Grid==
 
  
画面上の領域を定義する。行や列などの領域。
+
====Gridの各エリアへの対応付け====
  
; RowDefinitions : 行の定義をする。行の数、高さなど。
+
* 分割されたエリアに要素を配置するには、'''Grid.Column'''、'''Grid.Row'''を、タグの属性に追加する。
;; RowDefinition :: 行の定義本体。
+
* TextBlockを用意し、4分割された左下のエリアに配置する。
; ColumnDefinitions : 列の定義をする。列の数、幅など。
+
*# ''Grid''内、''Grid.ColumnDefinistions''および''Grid.RowDefinitions''の次に、''TextBlock''を記述する。
;; ColomunDefinition :: 列の定義本体。
+
*#* ツールボックスからTextBlockをドラッグしても良い。
 +
*# ''TextBlock''の属性に'''Grid.Column'''と'''Grid.Row'''を定義する。
 +
*#* 左下のエリアに追加したいので、''Grid.Column''の値は'''0'''、''Grid.Row''の値は'''1'''にする。
 +
*# ''TextBlock''の文言を'''左下のテキストブロック'''に設定する。
 +
*#* ''TextBlock''の''Text属性''を設定すれば良い。
  
以下、2x2。左上から1行目'''aaaaa…''''''bbbbb…'''、2行目'''ccccc…'''、'''ddddd…'''が表示される。
+
上記の手順で、左下にグリッドの左下に''左下のテキストブロック''というTextBlockが配置される。
<syntaxhighlight lang="csharp">
+
各エリアに''○○のテキストブロック''というTextBlockを配置させるコードは以下のようになる。
    <Grid>
+
        <!-- ------------------------------------------ 行の定義 -->
+
        <Grid.RowDefinitions>
+
            <RowDefinition Height="140"/>
+
            <RowDefinition Height="*" />
+
        </Grid.RowDefinitions>
+
        <!-- ------------------------------------------ 行の定義ここまで -->
+
       
+
        <!-- ------------------------------------------ 列の定義 -->
+
        <Grid.ColumnDefinitions>
+
            <ColumnDefinition Width="140"/>
+
            <ColumnDefinition Width="*"/>
+
        </Grid.ColumnDefinitions>
+
        <!-- ------------------------------------------ 列の定義ここまで -->
+
  
        <!-- ------------------------------------------ コンテンツそのもの -->
 
        <Grid Grid.Row="0" Grid.Column="0">
 
            <TextBlock Text="aaaaaaaaaaaaaaa" />
 
        </Grid>
 
        <Grid Grid.Row="0" Grid.Column="1">
 
            <TextBlock Text="bbbbbbbbbbbbbbb" />
 
        </Grid>
 
  
        <Grid Grid.Row="1" Grid.Column="0">
+
<syntaxhighlight lang="xml">
            <TextBlock Text="ccccccccccccccc" />
+
        </Grid>
+
        <Grid Grid.Row="1" Grid.Column="1">
+
            <TextBlock Text="ddddddddddddddd" />
+
        </Grid>
+
        <!-- ------------------------------------------ コンテンツそのものここまで -->
+
  
       
+
<Grid>
    </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>
  
 
</syntaxhighlight>
 
</syntaxhighlight>
  
==レイアウト==
+
===StackPanel===
 +
 
 +
 
 +
 
 +
===Canvas===
 +
 
 +
 
 +
 
  
 
{{Comments}}
 
{{Comments}}

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

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が分割された状態になる。説明は主にこの画面で行う。


初期の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