【WPF】WPFってなんですか？

記事内に広告を含みます

もくじ非表示

WPFについて
WPFの特長を感じてみる
WPFに先はあるのか？

目次へ

WPFについて

WPFってなに？: WPF(Windows Presentation Foundation)は、Microsoft社が開発したGUI(グラフィカルユーザーインターフェース)開発用のフレームワークです。

WPFの特長は？: WPFでは、GUIのデザインを決まったパーツではなく、XAMLと呼ばれる拡張マークアップ言語を使って、いわゆるXMLのように”<>”でタグを記述して画面をデザインしていきます。

かつて、.NET Frameworkのアプリを開発するときに主流だったのはWindows Formsでした。しかし、デザインパーツは決まったものを使用するため「デザイン性」が課題でした。

その点、WPFは自分好みのデザインのパーツが自作できるなど、非常にカスタマイズ性に優れています。

WPFを使うメリットってあるの？: WPFは画面表示をXAML、ビジネスロジックをC#で記述するように構成されているため、画面設計とロジック設計を別々に進めることができます。

このように、WPFというのは『GUIデザインの自由度の向上』と、『アプリケーション開発の並行タスク化』を目指したフレームワークということが言えるのではないかと思います。

WPFを使うには

WPFはVisual Studio上で動作しますので、以下の記事からダウンロード&インストールしてもらえば利用することができます。

こちらの記事もおすすめ

【開発環境】WindowsにVisual Studio Community導入

金欠ぱとろん　技術日記

WPFの特長を感じてみる

まずはWPFでアプリを作ってみる

アプリの仕様

AボタンおよびBボタンをクリックした数が表示されるアプリを作ります。

ボタンは交互に押すことを強制するために片方をクリックすると非アクティブになり、もう一方がアクティブになるようにします。

アプリの画面

アプリの画面はこんな感じです。

Windows.Forms版のソースコード

Windows.Formsでは、コード上で参照するときにわかりやすくするためにパーツのプロパティからNameを設定します。

ソースコードはこちら

using System;
using System.Windows.Forms;
namespace WindowsForms
{
public partial class Form1 : Form
{
private uint m_Acount;
private uint m_Bcount;
public Form1( )
{
InitializeComponent( );
m_Acount = 0;
m_Bcount = 0;
BtnA.Enabled = true;
BtnB.Enabled = false;
}
private void ButtonA_Click( object sender, EventArgs e )
{
m_Acount++;
Lbl_AClick_Count.Text = m_Acount.ToString( );
BtnA.Enabled = false;
BtnB.Enabled = true;
}
private void ButtonB_Click( object sender, EventArgs e )
{
m_Bcount++;
Lbl_BClick_Count.Text = m_Bcount.ToString( );
BtnA.Enabled = true;
BtnB.Enabled = false;
}
}
}

using System;

using System.Windows.Forms;

namespace WindowsForms

{

public partial class Form1 : Form

{

private uint m_Acount;

private uint m_Bcount;

public Form1( )

{

InitializeComponent( );

m_Acount = 0;

m_Bcount = 0;

BtnA.Enabled = true;

BtnB.Enabled = false;

}

private void ButtonA_Click( object sender, EventArgs e )

{

m_Acount++;

Lbl_AClick_Count.Text = m_Acount.ToString( );

BtnA.Enabled = false;

BtnB.Enabled = true;

}

private void ButtonB_Click( object sender, EventArgs e )

{

m_Bcount++;

Lbl_BClick_Count.Text = m_Bcount.ToString( );

BtnA.Enabled = true;

BtnB.Enabled = false;

}

WPF版のソースコード

通常、WPFのプロジェクトを新規作成すると「①.xamlファイル」と「②.xaml.csファイル」が生成されます。

WPFはこの①にビューを②にビジネスロジックを記述するように設計されているのですが、今回はMVVMパターンでアプリを作成したので、「①.xamlファイル」のみ使用します。

一方、ビジネスロジックについては、追加したViewModelとModelのうちModelに記述することにしました。

補足

アプリ作成は、MVVMフレームワークのPrismを利用しています。

『MVVM』および『Prism』については、こちらで詳しく解説しています。

こちらの記事もおすすめ

【WPF】MVVMでの実装の仕方[実例付き]

金欠ぱとろん　技術日記

こちらの記事もおすすめ

【WPF】MVVMフレームワーク『Prism』のインストールの仕方

金欠ぱとろん　技術日記

Viewのソースコードはこちら

<Window x:Class="WPFs.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFs"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<!--行の定義-->
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Content="{ Binding Acount }"
FontSize="50" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Label Grid.Row="0"
Grid.Column="1"
Content="{ Binding Bcount }"
FontSize="50" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Button Grid.Row="1"
Grid.Column="0"
Command="{ Binding Abutton_Command }"
IsEnabled="{ Binding Abutton_Is_Enabled }"
Content="Aボタン"
FontSize="36"
Height="100"
Width="250" />
<Button Grid.Row="1"
Grid.Column="1"
Command="{ Binding Bbutton_Command }"
IsEnabled="{ Binding Bbutton_Is_Enabled }"
Content="Bボタン"
FontSize="36"
Height="100"
Width="250" />
</Grid>
</Window>

<Window x:Class="WPFs.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:WPFs"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Window.DataContext>

<local:MainWindowViewModel />

</Window.DataContext>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label Grid.Row="0"

Grid.Column="0"

Content="{ Binding Acount }"

FontSize="50" HorizontalContentAlignment="Center"

VerticalContentAlignment="Center" />

<Label Grid.Row="0"

Grid.Column="1"

Content="{ Binding Bcount }"

FontSize="50" HorizontalContentAlignment="Center"

VerticalContentAlignment="Center" />

<Button Grid.Row="1"

Grid.Column="0"

Command="{ Binding Abutton_Command }"

IsEnabled="{ Binding Abutton_Is_Enabled }"

Content="Aボタン"

FontSize="36"

Height="100"

Width="250" />

<Button Grid.Row="1"

Grid.Column="1"

Command="{ Binding Bbutton_Command }"

IsEnabled="{ Binding Bbutton_Is_Enabled }"

Content="Bボタン"

FontSize="36"

Height="100"

Width="250" />

</Grid>

</Window>

ViewModelのソースコードはこちら

using Prism.Commands;
using Prism.Mvvm;
namespace WPFs
{
public class MainWindowViewModel : BindableBase
{
private ABCounter m_ABCounter;
public DelegateCommand Abutton_Command { get; }
public DelegateCommand Bbutton_Command { get; }
public uint Acount
{
get { return m_ABCounter.Acount; }
set { m_ABCounter.Acount = value; }
}
public uint Bcount
{
get { return m_ABCounter.Bcount; }
set { m_ABCounter.Bcount = value; }
}
public bool Abutton_Is_Enabled
{
get { return m_ABCounter.Abutton_Is_Enabled; }
set { m_ABCounter.Abutton_Is_Enabled = value; }
}
public bool Bbutton_Is_Enabled
{
get { return m_ABCounter.Bbutton_Is_Enabled; }
set { m_ABCounter.Bbutton_Is_Enabled = value; }
}
/// <summary>
/// コンストラクタ
/// </summary>
public MainWindowViewModel( )
{
m_ABCounter = new ABCounter( );
m_ABCounter.PropertyChanged += ( sender, e ) => RaisePropertyChanged( e.PropertyName );
Abutton_Command = new DelegateCommand( Abutton_Click );
Bbutton_Command = new DelegateCommand( Bbutton_Click );
}
private void Abutton_Click( )
{
m_ABCounter.A_Add( );
}
private void Bbutton_Click( )
{
m_ABCounter.B_Add( );
}
}
}

using Prism.Commands;

using Prism.Mvvm;

namespace WPFs

{

public class MainWindowViewModel : BindableBase

{

private ABCounter m_ABCounter;

public DelegateCommand Abutton_Command { get; }

public DelegateCommand Bbutton_Command { get; }

public uint Acount

{

get { return m_ABCounter.Acount; }

set { m_ABCounter.Acount = value; }

}

public uint Bcount

{

get { return m_ABCounter.Bcount; }

set { m_ABCounter.Bcount = value; }

}

public bool Abutton_Is_Enabled

{

get { return m_ABCounter.Abutton_Is_Enabled; }

set { m_ABCounter.Abutton_Is_Enabled = value; }

}

public bool Bbutton_Is_Enabled

{

get { return m_ABCounter.Bbutton_Is_Enabled; }

set { m_ABCounter.Bbutton_Is_Enabled = value; }

}

/// <summary>

/// コンストラクタ

/// </summary>

public MainWindowViewModel( )

{

m_ABCounter = new ABCounter( );

m_ABCounter.PropertyChanged += ( sender, e ) => RaisePropertyChanged( e.PropertyName );

Abutton_Command = new DelegateCommand( Abutton_Click );

Bbutton_Command = new DelegateCommand( Bbutton_Click );

}

private void Abutton_Click( )

{

m_ABCounter.A_Add( );

}

private void Bbutton_Click( )

{

m_ABCounter.B_Add( );

}

Modelのソースコードはこちら

using Prism.Mvvm;
namespace WPFs
{
public class ABCounter : BindableBase
{
private uint m_Acount = 0;
public uint Acount
{
get { return m_Acount; }
set
{
SetProperty( ref m_Acount, value );
}
}
private uint m_Bcount = 0;
public uint Bcount
{
get { return m_Bcount; }
set
{
SetProperty( ref m_Bcount, value );
}
}
private bool m_Abutton_Is_Enabled = true;
public bool Abutton_Is_Enabled
{
get { return m_Abutton_Is_Enabled; }
set
{
SetProperty( ref m_Abutton_Is_Enabled, value );
}
}
private bool m_Bbutton_Is_Enabled = false;
public bool Bbutton_Is_Enabled
{
get { return m_Bbutton_Is_Enabled; }
set
{
SetProperty( ref m_Bbutton_Is_Enabled, value );
}
}
public void A_Add( )
{
Acount++;
Abutton_Is_Enabled = false;
Bbutton_Is_Enabled = true;
}
public void B_Add( )
{
Bcount++;
Abutton_Is_Enabled = true;
Bbutton_Is_Enabled = false;
}
}
}

using Prism.Mvvm;

namespace WPFs

{

public class ABCounter : BindableBase

{

private uint m_Acount = 0;

public uint Acount

{

get { return m_Acount; }

set

{

SetProperty( ref m_Acount, value );

}

private uint m_Bcount = 0;

public uint Bcount

{

get { return m_Bcount; }

set

{

SetProperty( ref m_Bcount, value );

}

private bool m_Abutton_Is_Enabled = true;

public bool Abutton_Is_Enabled

{

get { return m_Abutton_Is_Enabled; }

set

{

SetProperty( ref m_Abutton_Is_Enabled, value );

}

private bool m_Bbutton_Is_Enabled = false;

public bool Bbutton_Is_Enabled

{

get { return m_Bbutton_Is_Enabled; }

set

{

SetProperty( ref m_Bbutton_Is_Enabled, value );

}

public void A_Add( )

{

Acount++;

Abutton_Is_Enabled = false;

Bbutton_Is_Enabled = true;

}

public void B_Add( )

{

Bcount++;

Abutton_Is_Enabled = true;

Bbutton_Is_Enabled = false;

}

これでひとまずWindows.Forms、WPFともに同じ動作のアプリを作成することができました。

もしもアプリの仕様が突然変わったら・・・

ある日、アプリの仕様変更の依頼があり、『Labelコントロールへの表示ではなく、TextBoxへの表示に変更になってしまった』としましょう。

すると、Forms版およびWPF版のそれぞれ以下のような変更が必要になります。

Forms版の変更箇所WPF版の変更箇所

TextBoxに変更するためにNameプロパティを変更します。

さらに、これに合わせてロジックも変更する必要があります。

using System;
using System.Windows.Forms;
namespace WindowsForms
{
public partial class Form1 : Form
{
private uint m_Acount;
private uint m_Bcount;
public Form1( )
{
InitializeComponent( );
m_Acount = 0;
m_Bcount = 0;
BtnA.Enabled = true;
BtnB.Enabled = false;
}
private void ButtonA_Click( object sender, EventArgs e )
{
m_Acount++;
Txt_AClick_Count.Text = m_Acount.ToString( );
BtnA.Enabled = false;
BtnB.Enabled = true;
}
private void ButtonB_Click( object sender, EventArgs e )
{
m_Bcount++;
Txt_BClick_Count.Text = m_Bcount.ToString( );
BtnA.Enabled = true;
BtnB.Enabled = false;
}
}
}

using System;

using System.Windows.Forms;

namespace WindowsForms

{

public partial class Form1 : Form

{

private uint m_Acount;

private uint m_Bcount;

public Form1( )

{

InitializeComponent( );

m_Acount = 0;

m_Bcount = 0;

BtnA.Enabled = true;

BtnB.Enabled = false;

}

private void ButtonA_Click( object sender, EventArgs e )

{

m_Acount++;

Txt_AClick_Count.Text = m_Acount.ToString( );

BtnA.Enabled = false;

BtnB.Enabled = true;

}

private void ButtonB_Click( object sender, EventArgs e )

{

m_Bcount++;

Txt_BClick_Count.Text = m_Bcount.ToString( );

BtnA.Enabled = true;

BtnB.Enabled = false;

}

WPF版の方はビュー側のXAMLだけ変更すればOKです。

<Window x:Class="WPFs.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFs"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<!--行の定義-->
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0"
Grid.Column="0"
Text="{ Binding Acount }"
FontSize="50"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<TextBox Grid.Row="0"
Grid.Column="1"
Text="{ Binding Bcount }"
FontSize="50"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<Button Grid.Row="1"
Grid.Column="0"
Command="{ Binding Abutton_Command }"
IsEnabled="{ Binding Abutton_Is_Enabled }"
Content="Aボタン"
FontSize="36"
Height="100"
Width="250" />
<Button Grid.Row="1"
Grid.Column="1"
Command="{ Binding Bbutton_Command }"
IsEnabled="{ Binding Bbutton_Is_Enabled }"
Content="Bボタン"
FontSize="36"
Height="100"
Width="250" />
</Grid>
</Window>