Windows Presentation Foundation (WPF) に入門してみる part 4 Viewboxを使う


はじめに

xamlファイルを全く記述しないでC#のコードだけでGUIを構築するのが目標です。
今回も「XAML」「バインディング」などの知識ゼロのまま進めていきます。

前回まではButtonの文字サイズを自動調整するためにViewboxを使ってきました。

Button left_button = new Button();
left_button.Content = new Viewbox() { Child = new Label { Content = "左のbuttonだよ" } };



今回は少しちがう使い方を試してみます。

今回の目的


f:id:touch-sp:20210927082744p:plain
f:id:touch-sp:20210927082752p:plain
f:id:touch-sp:20210927082801p:plain


右半分の真ん中の白いエリアに注目して下さい。Windowサイズを変更しても正方形が崩れていません。
Viewboxを使うとこのようなことが可能になります。この方法について学習します。

方法

RowDefinitionのHeightをautoに設定する

right_grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
right_grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
right_grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });

センターに挿入するGridのサイズを指定する

サイズの数値はWidth、Heightの比が1:1であれば何でもいいです。

Grid right_center = new Grid() { Width = 200, Height = 200 };

センターに挿入するGridをViewboxに挿入する

Viewbox right_center_box = new Viewbox { Child = right_center };

ViewboxをGridに挿入する

Grid.SetRow(right_center_box, 1);

right_grid.Children.Add(right_center_box);

全体のコード

private void WindowSetting()
{
    Grid mainGrid = new Grid();
    mainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(7, GridUnitType.Star) });
    mainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(3, GridUnitType.Star) });

    Content = mainGrid;

    Button left_button = new Button();
    left_button.Content = new Viewbox() { Child = new Label { Content = "左のbuttonだよ" } };
    Grid.SetColumn(left_button, 0);
    mainGrid.Children.Add(left_button);

    Button button1 = new Button();
    button1.Content = new Viewbox() { Child = new Label { Content = "上のbuttonだよ" } };

    Button button2 = new Button();
    button2.Content = new Viewbox() { Child = new Label { Content = "下のbuttonだよ" } };

    Grid right_grid = new Grid();
    Grid.SetColumn(right_grid, 1);
    mainGrid.Children.Add(right_grid);

    right_grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
    right_grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
    right_grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });

    Grid right_center = new Grid() { Width = 200, Height = 200 };
    Viewbox right_center_box = new Viewbox { Child = right_center };

    Grid.SetRow(button1, 0);
    Grid.SetRow(right_center_box, 1);
    Grid.SetRow(button2, 2);

    right_grid.Children.Add(button1);
    right_grid.Children.Add(right_center_box);
    right_grid.Children.Add(button2);
}

さいごに

間違いや改善点があればコメント頂けましたら幸いです。

つづきはこちらです。
Windows Presentation Foundation (WPF) に入門してみる part 5 テンキー付きの計算ドリルを作る - パソコン関連もろもろ

前回までの記事

Windows Presentation Foundation (WPF) に入門してみる part 1 - パソコン関連もろもろ
Windows Presentation Foundation (WPF) に入門してみる part 2 Imageを並べる - パソコン関連もろもろ
Windows Presentation Foundation (WPF) に入門してみる part 3 ComboBoxを使う - パソコン関連もろもろ