前回WPFにおけるコントロールの使い方作法を紹介しましたので、先ずはウィンドウに色々とコントロールを貼り付けてみようかと思いました。
しかし、
哀しい哉、私には絵心がない！
ので、Mirosoft Learningに載っているコントロールサンプルを3つ使って、それも一挙にウィンドウに張り付けることにしました。いつものようにコメントと「解説：」で紹介します。
【Window05.cs】
/////////////////
// Window05_1.cs
//参照：https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.controls.contentcontrol?view=windowsdesktop-8.0
// Window05_2.cs
//参照：https://learn.microsoft.com/ja-jp/dotnet/desktop/wpf/advanced/alignment-margins-and-padding-overview?view=netframeworkdesktop-4.8
// Window05_3.cs
//参照：https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.controls.canvas?view=windowsdesktop-8.0
/////////////////
using System;
using System.Windows;
using System.Windows.Controls; //コントロールを利用する為
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Imaging; //BitmapFrameを使用する為
namespace Window05_1
{
///////////////////////////
//エントリーポイントクラス
///////////////////////////
class MainApp
{
[STAThread]
public static void Main()
{
MainWindow mwnd = new MainWindow();
Application ap = new Application();
ap.Run(mwnd);
}
}
public partial class MainWindow : Window
{
public MainWindow()
{
/* ウィンドウスタイル、クライアントエリア色、アイコンとZオーダーの指定 */
this.WindowStyle = WindowStyle.ThreeDBorderWindow; //解説：３D境界（太いやつ）
this.Background = SystemColors.WindowBrush; //本例ではウインドウのクライアントエリア色にする
this.Icon = BitmapFrame.Create(new Uri("Icon.ico", UriKind.Relative)); //同じフォールダーのIcon.icoを読んで使用する
this.Topmost = false; //最上位ウィンドウとするか否か
/* 起動時の位置－上、左座標で指定または、起動時の位置で指定 */
this.WindowStartupLocation = WindowStartupLocation.CenterScreen;
/* ウィンドウサイズ－幅、高さで指定 */
this.Width = 640;
this.Height = 480;
this.ResizeMode = ResizeMode.CanResizeWithGrip; //解説：グリップ付きでサイズ変更可能
this.ShowActivated = true; //アクティブ状態で初期表示するかどうか（規定値 true）
this.ShowInTaskbar = true; //タスクバーにボタン表示するか否か
this.Title = "Window05";
InitControls();
}
/////////////////////////////////////////////
// Microsoft Learnのサンプルを三つ一緒にする
/////////////////////////////////////////////
public void InitControls()
{
/* ---------- */
/* Window05_1 */
/* ---------- */
/* 様々な様々なコンテンツの入ったボタン */
//文字列をいれたボタン
Button StrBtn = new Button();
StrBtn.Height = 32;
StrBtn.Width = 240;
StrBtn.HorizontalContentAlignment = HorizontalAlignment.Left; //解説：これはボタン内コンテンツの左寄せです。
StrBtn.VerticalContentAlignment = VerticalAlignment.Top; //解説：これはボタン内コンテンツの上寄せです。
//StrBtn.HorizontalContentAlignment = HorizontalAlignment.Right;
//StrBtn.VerticalContentAlignment = VerticalAlignment.Bottom;
StrBtn.Content = "This is string content of a Button"; //解説：ボタンはContentControlで一つだけ。
//DateTimeオブジェクトを入れたボタン
Button ObjBtn = new Button();
ObjBtn.Height = 32;
ObjBtn.Width = 180;
ObjBtn.HorizontalAlignment = HorizontalAlignment.Right;
ObjBtn.HorizontalContentAlignment = HorizontalAlignment.Right;
ObjBtn.VerticalContentAlignment = VerticalAlignment.Bottom;
DateTime dateTime1 = new DateTime(2004, 3, 4, 13, 6, 55);
ObjBtn.Content = dateTime1;
//単一UIElementを入れたボタン（塗潰し四角形）
Button UIEBtn = new Button();
UIEBtn.Height = 60;
UIEBtn.Width = 60;
UIEBtn.HorizontalAlignment = HorizontalAlignment.Center;
UIEBtn.HorizontalContentAlignment = HorizontalAlignment.Left;
UIEBtn.VerticalContentAlignment = VerticalAlignment.Bottom;
Rectangle rec = new Rectangle();
rec.Width = 40;
rec.Height = 40;
rec.Fill = Brushes.Blue;
UIEBtn.Content = rec;
//複数オブジェクトの入ったパネルを入れたボタン（スタックパネルを使用）
Button panelBtn = new Button();
panelBtn.Height = 240;
panelBtn.Width = 180;
panelBtn.HorizontalAlignment = HorizontalAlignment.Right;
panelBtn.HorizontalContentAlignment = HorizontalAlignment.Left;
panelBtn.VerticalContentAlignment = VerticalAlignment.Top;
StackPanel StckPanel = new StackPanel();
Ellipse ellipse = new Ellipse(); //解説：青塗りの円
TextBlock textBlock = new TextBlock(); //解説：改行文字列ブロック
ellipse.Width = 40;
ellipse.Height = 40;
ellipse.Fill = Brushes.Blue;
textBlock.TextAlignment = TextAlignment.Center;
textBlock.Text = "Multiple Objs Button";
StckPanel.Children.Add(ellipse); //解説：スタックパネルに円を追加
StckPanel.Children.Add(textBlock); //解説：同じく文字列ブロックを追加
panelBtn.Content = StckPanel; //解説：ボタンにスタックパネルを追加
//コンテナ（スタックパネル、ドックパネル、キャンバス）に入れる
StackPanel Container = new StackPanel(); //解説：スタックパネルに入れてみる。
//DockPanel Container = new DockPanel(); //解説：ドックパネルでも試せます。
//Canvas Container = new Canvas(); //解説：キャンバスでも試せます。
Container.HorizontalAlignment = HorizontalAlignment.Left;
Container.VerticalAlignment = VerticalAlignment.Top;
Container.Children.Add(StrBtn); //解説：文字列ボタンをスタックパネルに追加。
Container.Children.Add(ObjBtn); //解説：DateTimeインスタンスボタンを追加。
Container.Children.Add(UIEBtn); //解説：図形ボタンを追加。
Container.Children.Add(panelBtn); //解説：複数コントロールボタンを追加。
/* ---------- */
/* Window05_2 */
/* ---------- */
//Borderを追加（解説：ボーダーはPanelではなく、Decoratorクラスです。）
Border myBorder = new Border();
myBorder.Background = Brushes.LightBlue;
myBorder.BorderBrush = Brushes.Black;
myBorder.Padding = new Thickness(15); //解説：コントロール内側の余白ですね。
myBorder.BorderThickness = new Thickness(2); //解説：コントロールの外側の余白ですね。
//StackPanelを追加
StackPanel myStackPanel = new StackPanel();
myStackPanel.Background = Brushes.White;
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
myStackPanel.VerticalAlignment = VerticalAlignment.Top;
//TextBlockを追加
TextBlock myTextBlock = new TextBlock();
myTextBlock.Margin = new Thickness(5, 0, 5, 0);
myTextBlock.FontSize = 12;
myTextBlock.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock.Text = "Alignment, Margin and Padding Sample";
//Buttonを3つ追加
Button myButton1 = new Button();
myButton1.HorizontalAlignment = HorizontalAlignment.Left;
myButton1.Margin = new Thickness(20);
myButton1.Content = "My Button1";
Button myButton2 = new Button();
myButton2.HorizontalAlignment = HorizontalAlignment.Right;
myButton2.Margin = new Thickness(10);
myButton2.Content = "My Button 2";
Button myButton3 = new Button();
myButton3.HorizontalAlignment = HorizontalAlignment.Stretch;
myButton3.Margin = new Thickness(0);
myButton3.Content = "My Button 3";
//StackPanelにコントロールを要素として追加
myStackPanel.Children.Add(myTextBlock);
myStackPanel.Children.Add(myButton1);
myStackPanel.Children.Add(myButton2);
myStackPanel.Children.Add(myButton3);
//BorderにStackPanelを単独のコンテンツとして追加
myBorder.Child = myStackPanel;
/* ---------- */
/* Window05_3 */
/* ---------- */
//親Canvasの作成
Canvas ParentCvs = new Canvas();
//ParentCvs.Width = 210;
//ParentCvs.Height = 210;
double unit = this.Width / (3 * 4); //ウィンドウクライアントエリアの1/3を4等分する
//子Canvasの作成
Canvas ChildCvs1 = new Canvas();
ChildCvs1.Background = Brushes.Red;
ChildCvs1.Height = unit;
ChildCvs1.Width = unit;
Canvas.SetTop(ChildCvs1, unit * 0.5);
Canvas.SetLeft(ChildCvs1, unit);
Canvas ChildCvs2 = new Canvas();
ChildCvs2.Background = Brushes.Green;
ChildCvs2.Height = unit;
ChildCvs2.Width = unit;
Canvas.SetTop(ChildCvs2, unit);
Canvas.SetLeft(ChildCvs2, unit * 1.5);
Canvas ChildCvs3 = new Canvas();
ChildCvs3.Background = Brushes.Blue;
ChildCvs3.Height = unit;
ChildCvs3.Width = unit;
Canvas.SetTop(ChildCvs3, unit * 1.5);
Canvas.SetLeft(ChildCvs3, unit * 2);
//親へ子を追加する
ParentCvs.Children.Add(ChildCvs1);
ParentCvs.Children.Add(ChildCvs2);
ParentCvs.Children.Add(ChildCvs3);
//グリッド（解説：いよいよ3つのサンプルをグリッドに纏めます。）
Grid gridContainer = new Grid();
gridContainer.ColumnDefinitions.Add(new ColumnDefinition());
gridContainer.ColumnDefinitions.Add(new ColumnDefinition());
gridContainer.ColumnDefinitions.Add(new ColumnDefinition());
//Containerをグリッドに追加
Grid.SetColumn(Container, 0);
gridContainer.Children.Add(Container);
//myBorderをグリッドに追加
Grid.SetColumn(myBorder, 1);
gridContainer.Children.Add(myBorder);
//ParentCvsをグリッドに追加
Grid.SetColumn(ParentCvs, 2);
gridContainer.Children.Add(ParentCvs);
//メインウィンドウにgridContainerをコンテンツとして入れる
this.Content = gridContainer;
}
}
}
出来上がりがこれ↓です。右下のグリップを掴んでウィンドウサイズを変えるとコントロールの動きが分かりますよ。
次は当初の目的に沿った容れ物としてダイアログテンプレートみたいなものを作りましょう。