2013年01月18日

[C# WPF]xamlについて

前回HelloWorldプログラムを作成してみました。

プログラムにはMainWindow.xaml、MainWindow.xaml.csの
2つのファイルが自動生成されていました。

WPFプロジェクトではGUIを持つクラスは
○○○.xamlと○○○.xaml.csの2つのファイルを作成します。

○○○.xamlにはGUIコントロールの配置やデータの表示方法について記述します。
○○○.xaml.csにはデータを処理するコードを記述します。

xamlに記述するのと同じ動作をする処理を
Windowsフォームプロジェクトのようにcsファイルに記述する事もできますが
同じ内容を書くならxamlのほうが圧倒的に記述量を減らす事ができます。
また、データの処理と表示を完全に分離する事で
仕様変更が発生しても柔軟に対応する事が可能になります。

xamlでは基本的には以下のように記述します。

<コントロール プロパティ=値/>

HelloWorldのMainWindow.xamlを見ていただくとわかりやすいと思います。

xamlの記述方法にはいくつかのパターンがありますので次回紹介します。



WPFでの開発はロジックと表示を分離できているかどうかで良し悪しが分かれます。
これからWPFを学ぶ上でこちらを手元においておくと非常に便利です。
筆者も普段使っているので安心してお勧めできる一冊です。

【関連する記事】
posted by cw at 22:00| Comment(0) | xaml | このブログの読者になる | 更新情報をチェックする

[C# WPF]xamlの記述方法

今回はxamlの記述方法について解説します。

前回の記事で書きましたが
基本的には以下のように記述します。

<コントロール プロパティ=値/>

Buttonを例に示すと以下のように記述します。

<Button Content="Button" Width="70" Height="23" Margin="5" Click="Button_Click"/>

また、以下のようにも記述できます。

<コントロール プロパティ=値>
</コントロール>

開始、終了タグの間にプロパティの設定や
子要素の定義をする場合にこのように記述します。

上のButtonの例では以下のように記述します。

<Button>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="Button"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="23"/>
<Setter Property="Margin" Value="5"/>
<EventSetter Event="Click" Handler="Button_Click"/>
</Style>
</Button.Style>
</Button>

このように記述する事に意味のない例ですが
このように記述する方法もあるという事だけ理解しておいてください。
Style、Setter等についても後の記事で解説しますので今は無視していただいてかまいませn。
posted by cw at 21:30| Comment(0) | TrackBack(0) | xaml | このブログの読者になる | 更新情報をチェックする

[C# WPF]レイアウト用のプロパティ

今回は多くのコントロールに共通するレイアウト用のプロパティについて解説します。

@Width、Height
AMargin
BHorizontalAlignment
CVerticalAlignment

ツールボックスからドラッグして配置すると上記のプロパティが自動的に設定されます。

@Width、Height
これはコントロールの幅、高さです。
double型の浮動小数点数値で指定しますが
Autoを指定すると表示内容などから自動的に割り当てられます。

AMargin
これはコントロールの周囲の余白です。
左右上下それぞれの4つの値を指定できますが、省略する事もできます。
値を4つ指定する場合は以下のように指定します。

Margin="左側の余白幅,上側の余白高さ,右側の余白幅,下側の余白高さ"

値を1つしか指定しない場合は上下左右全てに指定した値の余白が適用されます。
値を2つ指定した場合は1番目の値が左右の余白幅、2番目の値が上下の余白高さとなります。
値を3つだけ指定する事はできません。

BHorizontalAlignment
水平方向の配置方法を指定します。
以下の値を設定できます。
Leftコントロールを領域の左端を基準に配置します。
これを指定した場合Marginの右側の値を指定しても無視されます。
Rightコントロールを領域の右端を基準に配置します。
これを指定した場合Marginの左側の値を指定しても無視されます。
Centerコントロールを領域の中央に配置します。
これを指定した場合Marginの左右の値は無視されます。
Stretch配置されている領域の水平方向を埋めるように配置します。
Widthプロパティに値を設定しているとLeftを指定したのと同じ状態になります。
領域を埋めるように配置するためにはWidthプロパティにAutoを設定します。

CVerticalAlignment
垂直方向の配置方法を指定します。
以下の値を設定できます。
Topコントロールを領域の上端を基準に配置します。
これを指定した場合Marginの下側の値を指定しても無視されます。
Bottomコントロールを領域の下端を基準に配置します。
これを指定した場合Marginの上側の値を指定しても無視されます。
Centerコントロールを領域の中央に配置します。
これを指定した場合Marginの上下の値は無視されます。
Stretch配置されている領域の上下方向を埋めるように配置します。
Heightプロパティに値を設定しているとTopを指定したのと同じ状態になります。
領域を埋めるように配置するためにはHeightプロパティにAutoを設定します。

いろいろ値を変えてみながらどのように配置されるか確認してみましょう。
posted by cw at 20:30| Comment(0) | TrackBack(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。