プログラミングを試してみたい人向けのC#プログラミングチュートリアル

WPFアプリでよく使うコントロール

POINT
  • WPFアプリでよく使うコントロールをご紹介
  • ラベル、ボタン、パネル、テキストボックスの概要をご説明
目次

WPFアプリでよく使うコントロール

Windowsフォームアプリで紹介した内容がWPFアプリだとどうなるかを紹介します。
Windowsフォームアプリと同じく他にも多くのコントロールが存在します。
まずは、WPFアプリでどのように画面を構成していくか概要の紹介になります。

よく使うコントロールを使ったサンプルプログラム

実際によく使うコントロールを配置した画面を表示するサンプルプログラムを作って確認してみましょう。

実行結果サンプル

プログラムを実行すると次の画面を表示します。

プログラム実行時の画面

プログラム作成

ではプログラムを作成してみましょう。
次のファイルを同じフォルダに作成してください。

Program.cs
using System;
using System.Windows;

namespace SampleProgram 
{
    class Program
    {
        [STAThread]
        static void Main(string[] args)
        {
            try
            {
                var app = new Application();
                app.Run(new MainWindow().getWindow());
            }
            catch (Exception ex)
            {
                MessageBox.Show(String.Format("正常な処理をすることができませんでした。\r\n{0}\r\n{1}", ex.Message, ex.StackTrace));
                return;
            }
        }
    }
}

今回、xamlファイルにミスがあった場合にエラーメッセージで内容確認ができるようにtry catchを入れています。
catch (Exception ex)でエラーが発生した場合に、ex.Message, ex.StackTraceと合わせてメッセージボックスで表示します。
これによりxamlファイルが読み込めない場合に、どこに問題があるかをメッセージ表示してくれます。

MainWindow.cs
namespace SampleProgram 
{
    public class MainWindow
    {
        private System.Windows.Window _window;
        private System.Windows.Controls.Button _button1;

        // コンストラクタ
        public MainWindow()
        {
            // XAMLファイルを読み込んでフォーム生成
            string path = System.AppDomain.CurrentDomain.BaseDirectory;
            using (var fs = new System.IO.FileStream(path+"MainWindow.xaml", 
                System.IO.FileMode.Open, System.IO.FileAccess.Read))
            {
                _window = (System.Windows.Window)System.Windows.Markup.XamlReader.Load(fs);
            }
            
            // オブジェクト取得
            _button1 = (System.Windows.Controls.Button)_window.FindName("button1");
            
            // イベント設定
            _button1.Click += new System.Windows.RoutedEventHandler(button1_Click);
        }
        
        // Windowクラスを返す
        public System.Windows.Window getWindow()
        {
            return _window;
        }

        // ボタンクリック時の処理
        private void button1_Click(object sender, System.EventArgs e)
        {
            System.Windows.MessageBox.Show("Hello World!");
        }

    }
}
MainWindow.xaml
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	Title="SampleProgram" 
	Width="500"
	Height="300"
	WindowStartupLocation="CenterScreen"
	FontSize="13"
	FontFamily="メイリオ">

	<WrapPanel Orientation="Vertical">

		<Label 
			Content="ラベルコントロール" 
			x:Name="label1" 
			Margin="5,5,5,5" />
    
        <Button 
        	Content="ボタンコントロール" 
        	x:Name="button1"
            Margin="5, 5, 5, 5" />
        
        <WrapPanel
        	x:Name="panel1"
            Margin="5, 5, 5, 5"
            Background="Gray" >
        
            <Label 
                Content="ラベルコントロール" 
                x:Name="label2" 
                Margin="5,5,5,5" />
        
        </WrapPanel>
    
        <TextBox 
            x:Name="textbox1" 
        	Text="テキストボックス"
        	Margin="5,5,5,5" />
    
	</WrapPanel>
</Window>
Compile.bat
C:\Windows\Microsoft.NET\Framework\v4.0.30319\csc.exe ^
  /t:winexe ^
  /r:"WPF\PresentationCore.dll" ^
  /r:"WPF\PresentationFramework.dll" ^
  /r:"WPF\WindowsBase.dll" ^
  /r:"System.Xaml.dll" ^
  /out:SampleProgram.exe ^
  *.cs
pause

基本的な内容は、WPFアプリの作り方と同じです。
ファイルを作成できたらCompile.batを実行してみましょう。
同じフォルダにSampleProgram.exeが作成されます。
SampleProgram.exeを実行して実行結果サンプルのように動いたら成功です。

プログラム解説

作成したプログラムを解説していきます。
コントロールはすべてxamlファイルに記載しています。

ラベル

ラベルはLabelタグを記述して配置します。
Contentに表示する文字列をセットします。

MainWindow.xaml(抜粋)
		<Label 
			Content="ラベルコントロール" 
			x:Name="label1" 
			Margin="5,5,5,5" />

ボタン

ボタンはButtonタグを記述して配置します。
Contentに表示する文字列をセットします。
Clickにクリック時のイベントをセットします。
イベントについは、イベント処理のページを参照してください。

MainWindow.xaml(抜粋)
        <Button 
        	Content="ボタンコントロール" 
        	x:Name="button1"
            Margin="5, 5, 5, 5" />
MainWindow.cs(抜粋)
            // オブジェクト取得
            _button1 = (System.Windows.Controls.Button)_window.FindName("button1");
            
            // イベント設定
            _button1.Click += new System.Windows.RoutedEventHandler(button1_Click);

パネル

WPFアプリでは、パネルをうまく使って配置をしていきます。
WPFアプリでのパネルには、DockPanel、StackPanel、WrapPanel、Gridがあります。
パネルの扱い方はWPFアプリでは重要な部分なので、詳細は別途説明します。
今回はWrapPanelを使用して、コントロール並べるだけにしています。
パネルのタグでコントロールを括ることで、パネル上にコントロールが配置されます。
タグを入れ子にしていくことで、パネル上にパネルを乗せることができます。

MainWindow.xaml(抜粋)
	<WrapPanel Orientation="Vertical">
		・・・
        <WrapPanel
        	x:Name="panel1"
            Margin="5, 5, 5, 5"
            Background="Gray" >
        
            <Label 
                Content="ラベルコントロール" 
                x:Name="label2" 
                Margin="5,5,5,5" />
        
        </WrapPanel>
		・・・
	</WrapPanel>
</Window>

テキストボックス

テキストボックスはTextBoxタグを記述して配置します。
Textに表示する文字列をセットします。

MainWindow.xaml(抜粋)
        <TextBox 
            x:Name="textbox1" 
        	Text="テキストボックス"
        	Margin="5,5,5,5" />