前回まででWPFで複数のコントロールを扱えることが分かりましたので、これから当初の意図にもとづいてWPFで提供されている動画再生と音声再生のガジェット(Gadget)を探索してみたいと思います。
しかしっ！
その前にテストする器（ウィンドウ）を用意しなければなりません。先ずは動画再生用のダイアログを用意することにします。
以下のサンプルはWPFを学習し始めた当初の者なので、コメントで備忘を書き込んでいます。これと//解説：を参考にしてください。（WinformのDialogテンプレートを改造しているので、WinformとWPFの違いに言及しているところもあります。）
【Dialog_Type.cs】
//////////////////////////////////////////////
//Dialog_Type.cs - Dialog type window sample
//////////////////////////////////////////////
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media; //Brushes構造体使用の為
namespace Dialog_Type
{
///////////////////////////
//エントリーポイントクラス
///////////////////////////
class MainApp
{
[STAThread]
public static void Main()
{
DlgWindow dlg = new DlgWindow();
Application ap = new Application(); //明示的にインスタンスを作らなければならない
ap.Run(dlg);
}
}
public partial class DlgWindow : Window //派生元が"Form"から"Window"となる
{
//コントロール
Button Btn1, Btn2, Btn3, Btn4, extBtn;
public DlgWindow()
{
//Windowのプロパティ：https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.window?view=windowsdesktop-8.0
this.Title = "Dialog風ウィンドウ";
this.Width = 640;
this.Height = 480;
this.WindowStyle = WindowStyle.ThreeDBorderWindow;
/*
SingleBorderWindow 1 A window with a single border. This is the default value. --- Default
ThreeDBorderWindow 2 A window with a 3-D border.
ToolWindow 3 A fixed tool window.
*/
this.ResizeMode = ResizeMode.NoResize;
/*
CanMinimize 1 ウィンドウは最小化および元のサイズへの復元だけが可能です。 最小化ボタンと最大化ボタンが表示されますが、最小化ボタンだけが有効になります。
CanResize 2 ウィンドウのサイズは変更できます。 最小化ボタンと最大化ボタンはどちらも表示され、有効になります。
CanResizeWithGrip 3 ウィンドウのサイズは変更できます。 最小化ボタンと最大化ボタンはどちらも表示され、有効になります。 サイズ変更グリップがウィンドウの右下隅に表示されます。
NoResize 0 ウィンドウのサイズは変更できません。 最小化ボタンと最大化ボタンはタイトル バーに表示されません。
*/
this.WindowState = WindowState.Normal;
/*
Maximized 2 The window is maximized.
Minimized 1 The window is minimized.
Normal 0 The window is restored.
*/
this.WindowStartupLocation = WindowStartupLocation.CenterScreen; //Manual, CenterOwnerもある（Manyualの場合の設定方法不明）
//this.BackColor = SystemColors.Window; //Color BackColorからBrush Backgroundになった
this.Background = SystemColors.ControlBrush;
//this.Load += new EventHandler(DlgWindow_Load); //解説：WPFではLoadは無い。
this.Loaded += new RoutedEventHandler(DlgWindow_Loaded); //解説：LoadedもRoutedEventになる。
}
public void InitControls()
{
//参考：https://learn.microsoft.com/ja-jp/dotnet/desktop/wpf/advanced/alignment-margins-and-padding-overview?view=netframeworkdesktop-4.8
//WPFでは、親Content プロパティに対して子要素を直接1つしか持てない。その為、GridやStackPanelを使用する。
//グリッド（Grid）を作成
Grid grid = new Grid();
/* //行を定義
RowDefinition row1 = new RowDefinition();
RowDefinition row2 = new RowDefinition();
grid.RowDefinitions.Add(row1);
grid.RowDefinitions.Add(row2);
*/ //列を定義
ColumnDefinition colL = new ColumnDefinition();
colL.Width = new GridLength(540, GridUnitType.Pixel);
//colL.Width = GridLength.Auto; //中に何か入れないと幅が出ない
ColumnDefinition colR = new ColumnDefinition();
//colR.Width = new GridLength(80, GridUnitType.Pixel);
colR.Width = GridLength.Auto;
grid.ColumnDefinitions.Add(colL); //解説：列の定義です。行の定義はRowDefinition.Addメソッドを使います。
grid.ColumnDefinitions.Add(colR); //解説：同上。左から追加してゆきますので、二番目を右の列としています。
//スタックパネル（StackPanel）を作成
StackPanel stackPanel = new StackPanel();
stackPanel.Width = 80; //絶対値を入れてみた
stackPanel.Height = 420; //絶対値を入れてみた
stackPanel.HorizontalAlignment = HorizontalAlignment.Right; //右寄せ
//ボタン1
Btn1 = new Button();
Btn1.Width = 60;
Btn1.Height = 24;
//Btn1.Location = new Point(ClientSize.Width - Btn1.Width - 10, 10);
//Btn1.Anchor = (AnchorStyles.Top | AnchorStyles.Right);
//解説：↑はベースとしたWinFormの位置決めとウィンドウサイズ変更時の動作指定方法です。
Btn1.HorizontalAlignment = HorizontalAlignment.Right; //解説：WPFでは垂直水平方向での指定になります。
/*
Left 0 An element aligned to the left of the layout slot for the parent element.
Center 1 An element aligned to the center of the layout slot for the parent element.
Right 2 An element aligned to the right of the layout slot for the parent element.
Stretch 3 An element stretched to fill the entire layout slot of the parent element.
*/
Btn1.VerticalAlignment = VerticalAlignment.Top; //上→下のStackPanelの場合すべてTopになるみたい
/*
Top 0 子要素を、親のレイアウト スロットの上端に揃えて配置します。
Center 1 子要素を、親のレイアウト スロットの中央に揃えて配置します。
Bottom 2 子要素を、親のレイアウト スロットの下端に揃えて配置します。
Stretch 3 子要素を、親のレイアウト スロット全体に引き伸ばします。
*/
Btn1.Margin = new Thickness(10, 10, 10, 0); //外の余白（中の余白はPadding）
//解説：Margin、Padding共に指定方法は厚さ構造体 Thickness(左, 上, 右, 下)が使える。
//解説：WPFのコンテンツの配置の基本については、これを参考にしてください。
Btn1.Content = "Open";
Btn1.Click += Button1_Click; //解説：ボタンクリックイベントにメソッドを追加するとRoutedEventになります。
Btn1.PreviewMouseDown += Button1_ClickDown;
Btn1.PreviewMouseUp += Button1_ClickUp;
//this.Controls.Add(Btn1); //解説：WinFormでのボタン追加方法です。
stackPanel.Children.Add(Btn1);
//ボタン2ボタン
Btn2 = new Button();
Btn2.Width = 60;
Btn2.Height = 24;
//Btn2.Location = new Point(ClientSize.Width - Btn2.Width - 10, Btn1.Height + 20);
//Btn2.Anchor = (AnchorStyles.Top | AnchorStyles.Right);
Btn2.HorizontalAlignment = HorizontalAlignment.Right;
Btn2.VerticalAlignment = VerticalAlignment.Top;
Btn2.Margin = new Thickness(10, 10, 10, 0); //構造体 Thickness(左, 上, 右, 下)
Btn2.Content = "Play";
Btn2.Click += Button2_Click;
//this.Controls.Add(Btn2);
stackPanel.Children.Add(Btn2);
//ボタン3ボタン
Btn3 = new Button();
Btn3.Width = 60;
Btn3.Height = 24;
//Btn3.Location = new Point(ClientSize.Width - Btn3.Width - 10, Btn1.Height + Btn2.Height + 30);
//Btn3.Anchor = (AnchorStyles.Top | AnchorStyles.Right);
Btn3.HorizontalAlignment = HorizontalAlignment.Right;
Btn3.VerticalAlignment = VerticalAlignment.Top;
Btn3.Margin = new Thickness(10, 10, 10, 0); //構造体 Thickness(左, 上, 右, 下)
Btn3.Content = "Pause";
Btn3.Click += Button3_Click;
//this.Controls.Add(Btn3);
stackPanel.Children.Add(Btn3);
//ボタン4ボタン
Btn4 = new Button();
Btn4.Width = 60;
Btn4.Height = 24;
//Btn4.Location = new Point(ClientSize.Width - Btn4.Width - 10, Btn1.Height + Btn2.Height + Btn3.Height + 40);
//Btn4.Anchor = (AnchorStyles.Top | AnchorStyles.Right);
Btn4.HorizontalAlignment = HorizontalAlignment.Right;
Btn4.VerticalAlignment = VerticalAlignment.Top;
Btn4.Margin = new Thickness(10, 10, 10, 0); //構造体 Thickness(左, 上, 右, 下)
Btn4.Content = "Stop";
Btn4.Click += Button4_Click;
//this.Controls.Add(Btn4);
stackPanel.Children.Add(Btn4);
//終了ボタン
extBtn = new Button();
extBtn.Width = 60;
extBtn.Height = 24;
//extBtn.Location = new Point(ClientSize.Width - extBtn.Width - 10, ClientSize.Height - extBtn.Height - 10);
//extBtn.Anchor = (AnchorStyles.Bottom | AnchorStyles.Right);
extBtn.HorizontalAlignment = HorizontalAlignment.Right; //解説：左右いずれかに寄せられます。
extBtn.VerticalAlignment = VerticalAlignment.Bottom; //解説：Bottomは無視され、Topの動作になります。
extBtn.Margin = new Thickness(10, 10, 10, 10); //構造体 Thickness(左, 上, 右, 下)
extBtn.Content = "終了";
extBtn.Click += extBtn_Click;
//this.Controls.Add(extBtn);
stackPanel.Children.Add(extBtn);
//グリッド右列にスタックパネルを登録
Grid.SetColumn(stackPanel, 1); //0を指定するとグリッドの左列の右側にボタンが表示される
grid.Children.Add(stackPanel); //↑のようにコラムに設定しただけでは子コントロールとして表示されない
//ウィンドウにグリッドを登録
this.Content = grid;
}
private void DlgWindow_Loaded(object sender, RoutedEventArgs e) //解説：単なるEventArgsではありません。
{
//コントロールの付加
InitControls();
}
void Button1_ClickDown(object sender, RoutedEventArgs e)
{
Btn1.Background = Brushes.Red;
}
void Button1_Click(object sender, RoutedEventArgs e)
{
Btn1.Background = Brushes.Pink;
}
void Button1_ClickUp(object sender, RoutedEventArgs e)
{
Btn1.Background = Brushes.Blue;
}
void Button2_Click(object sender, RoutedEventArgs e)
{
Btn2.Background = Brushes.LightGreen;
}
void Button3_Click(object sender, RoutedEventArgs e)
{
Btn3.Background = Brushes.Blue;
}
void Button4_Click(object sender, RoutedEventArgs e)
{
Btn4.Background = Brushes.Red;
}
void extBtn_Click(object sender, RoutedEventArgs e)
{
Close();
}
}
}
このサンプルでは追加したボタンクリックイベントメソッドでボタンの色を変更するようにしてみました。（私の環境では、マウスがボタンを上にある時はライトブルーになります。）
特別な意味はありませんが、前に作ったWinFormのダイアログのイメージを載せます。Win32のGDI+で作成されたコントロールとボタンの外観が可也異なることが鮮明にわかります。
