半人前プログラマーの技術談議

開発した物と,C#を入門者向けに解説した記事を書いています!

【C# GUI】基本操作 part4-4【WPF XAML】

calendar

reload

【C# GUI】基本操作 part4-4【WPF XAML】

こんにちは!シロウです!

今回はWPFについて紹介していきます!

WPF

概要

WPF(Windows Presentation Foundation)は,Windowsアプリケーションを作成する為の次世代フレームワークです.

WPFには次のような特徴があります.

  • 独特のUIを表現できる.
  • UI部分はXAMLで記述する.
  • ロジックコード(処理)はC#またはVisual Basicで開発する.
  • MVVMでコーディングする.

Windowsフォームアプリケーションとの違いは,外観を大きく変えられる所です.

例として,Visual StudioはWPFで開発されています.

その為,UIの表現度を高める為に,XAMLを使っています.

 

XAML

概要

XAML(Extensible Application Markup Language)は,マークアップ言語の1つです.

マークアップ言語と言えば他に,HTMLやXMLなどがあります.

どちらかと言えば,HTMLに似ています.

C#に比べれば覚える事は少ないです.

早速プロジェクトを作成してみましょう.

 

プロジェクトの作成

Visual Studioを起動したら,画面左上のファイルメニューから,新規作成→プロジェクトの順に選択します.

新しいプロジェクトのダイアログボックスが表示されるので,左側のインストール済みタブから,Visual C#をクリックし,WPF アプリ(.NET Framework)を選択し,画面下側の名前と場所を決めてOKをクリックする.

名前は,「WPF_RandomNumber」とします.

しばらくすると,MainWindow.xamlが画面に表示されます.

画面上部にはUIデザインが表示され,下部にはXAMLが表示されます.

XAMLを変更すると,リアルタイムでUIに反映されるのですぐに確認できます.

最初に生成されている10行程のコードですが,必要な情報なのでうかつに削除しないように注意しましょう.

XAMLは,タグ(<>で囲まれたもの)を使ってコードを記述します.

例えば,Window要素は1行目で始まり,12行目で終わっています.

Window要素の中にGrid要素が配置されています.

Gridはレイアウト用のUI要素です

 

WPFのコントロール

WPFにも,Windowsフォームアプリケーションと同様にコントロールがあります.

画面左側のツールボックスを選択して,確認してみましょう.

今回はこの中のButtonを例に,XAMLを扱っていきます.

 

ボタンを追加

Gridタグ内に,buttonを追加します.

ツールボックスから追加してもいいですが,余分な設定が負荷されてしまうので,コードで記述します.

IntelliSense(インテリセンス)を活用すれば,簡単に記述ができます.

画面上部のデザインエリアには,ボタンがウィンドウ全体に表示されます.

Contentプロパティには設定した値がボタンに表示されます.

 

ボタンのサイズ

次に,サイズを指定しましょう.

サイズの指定には,WidthプロパティとHeightプロパティを使います.

サイズを指定するとウィンドウの中央にボタンが配置されます.

 

ボタンの配置

次に,配置を変えてみましょう.

配置の変更には,HorizontalAlignmentプロパティとVerticalAlignmentプロパティを使います.

HorizontalAlignmentプロパティは,

Left(左端),Right(右端),Center(中央),Stretch(拡張)の値を設定でき,

VerticalAlignmentプロパティは,

Top(上端),Bottom(下端),Center(中央),Stretch(拡張)の値を設定できます.

一度実行してみましょう.

ボタンが左上に配置されています.

また,マウスポインタ―をボタンに合わせるとボタンの背景色が水色に変わります.

 

ボタンのフォント

ボタンのフォントサイズを変更します.

フォントサイズを変更するには,FontSizeプロパティを使います.

今回は20ptに設定してみましょう.(デフォルトでは12ptに設定されています.)

次に,背景色を変更します.

背景色を変更するには,Backgroundプロパティを使います.

今回はBlackに設定してみましょう.

このままでは文字が見えないので,文字の色を変えます.

文字の色の変更には,Foregroundプロパティを使います.

今回はWhiteに設定してみましょう.

これで文字が見えるようになりました.

最後に実行して確認してみます.

今回扱った内容は,実は画面右側下部のプロパティからも同様の設定ができます.

しかし,細かい設定をしたい場合はXAMLで記述していく必要があります.

他のコントロールも同様に記述していくことで,ボタンと同じように設定する事が可能です.

次回はボタン以外の実装から始めたいと思います.

この記事をシェアする

コメント

コメントはありません。

down コメントを残す