WindowsのGUIアプリケーションを作成するために、WPFの基本操作を勉強しました。

画面にパーツを設置する

ツールボックスからドラッグアンドドロップすれば、ボタンなどのアイテムを画面に追加できます。

ラベルを選択した状態で画面の右下に、そのラベルのプロパティが表示されます。あらゆる状態を定義しています。

ここでラベルに名前を付けます。すると画面のXAMLにも変化が起きます。

<Grid>
        <Button Content="Button" HorizontalAlignment="Left" Margin="63,127,0,0" VerticalAlignment="Top"/>
        <Label x:Name="MyLabel" Content="Label" HorizontalAlignment="Left" Margin="155,121,0,0" VerticalAlignment="Top"/>
    </Grid>
</Window>

x:Nameという属性が付与されています。このようにxamlファイルにも反映されています。

ボタンにクリックイベントを追加する

ボタンを画面に追加したら、ダブルクリック？超絶クリックすると、xamlのCsharpScriptがエディタに表示されます。そしてついでにButton_Clickというコールバック関数が定義されます。

xamlファイルにもclickイベントの定義が追加れます。

<Button Content="Button" HorizontalAlignment="Left" Margin="63,127,0,0" VerticalAlignment="Top" Click="Button_Click"/>

早速、MainWindow.xaml.csのクリックイベントを実装します。名前を付けたLavelがcsで参照できるので、ラベルを変更してみます。

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MyLabel.Content = "涼風青葉";
        }
    }
}

ボタンをクリックすると、ラベルが変更されました。

ここまでで、学んだこと

ツールボックスからボタンやラベルを追加できる
画面アイテムのプロパティを変更すると、xamlに反映される
ボタンのクリックイベントはClick=”Button_Click”のように定義して、csファイルに実装を書く。
名前を付けたアイテム（今回はラベル）は、その名前でcsから修正できる。

レイアウトを学ぶ

まずは機能の実現ができることが重要だと思っているので、レイアウトは後回しでいいと思います。

WrapPanel

いちばんわかりやすいけど、使えんのかこれって思ってしまいました。

とにかく左から右に並べてくれます。cssのflexboxをイメージするとわかりやすいです。wrapのやつです。

<WrapPanel>
        <Label Content="Label"/>
        <Label Content="Label"/>
        <Label Content="Label"/>
        <Label Content="Label" Width="800"/>
        <Label Content="Label" Width="400"/>
        <Label Content="Label" Width="400"/>
    </WrapPanel>

これはMainWindowのサイズが800です

800サイズのラベルが来ると、それは折り返します。400サイズはぎりぎり２つ並ぶことができます。

ただ、画面サイズが変わると簡単にレイアウトが崩れました。

DockPanel

上下左右と指定して並べるやつ。いまいち使い方がわからない。最後の一個がどっかいく。。。

<DockPanel>

        <Label Content="涼風青葉" DockPanel.Dock="TOP"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="TOP"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="TOP"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="LEFT"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="LEFT"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="LEFT"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="LEFT"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="Right"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="Bottom"></Label>
        <Label Content="涼風青葉" DockPanel.Dock="Bottom"></Label>
    </DockPanel>

Grid

これはよさげでした。

まずは、Grid.ColumnDefinitionsグリッドの定義を行います。そのあとで、ラベルなどををどのカラムに入れるかを指定します。

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5* " />
            <ColumnDefinition Width="0.5* " />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Content="御坂美琴" />
        <Label Grid.Column="1" Content="白井黒子" />
    </Grid>

もちろん、colがあればrowもあるわけです。これにRowを追加します。

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5* " />
            <ColumnDefinition Width="0.5* " />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*" />
            <RowDefinition Height="0.5*" />
        </Grid.RowDefinitions>
        <Label Grid.Column="0" Content="御坂美琴" />
        <Label Grid.Column="1" Content="白井黒子" />
        <Label Grid.Column="0" Grid.Row ="1" Content="御坂美琴" />
        <Label Grid.Column="1" Grid.Row ="1" Content="御坂美琴" />
    </Grid>

画面サイズにも対応しているように見えます。しかもグリッドの定義と中身が分かれていて、逆にわかりやすい。

とりあえずGridを中心に組み立てていけば良さげに感じました。

ここで一つ頭に浮かんだのが、今までの使えないと思ったレイアウトも、Gridと組み合わせると最強なんじゃないか？と。

簡単なレイアウトを試す

このようなものを作ります。

メニューが一番上にあるので、大きくDockPanelで上下二段のレイアウトを取って、下にGridレイアウトをぶち込みます。

<DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="ファイル"></MenuItem>
            <MenuItem Header="編集"></MenuItem>
            <MenuItem Header="表示"></MenuItem>
        </Menu>
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5* " />
                <ColumnDefinition Width="0.5* " />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*" />
                <RowDefinition Height="0.5*" />
            </Grid.RowDefinitions>
            <Label Grid.Column="0" Content="御坂美琴" />
            <Label Grid.Column="1" Content="白井黒子" />
            <Label Grid.Column="0" Grid.Row ="1" Content="御坂美琴" />
            <Label Grid.Column="1" Grid.Row ="1" Content="御坂美琴" />
        </Grid>
    </DockPanel>

このDockPanleをLeftでとると、今風のナウいイケイケなレイアウトにもなりそう？でした。ただ、メニューは横並びになってしまうのでなんかしないとだめ

RowやColはSpanを使うと結合できます。

<DockPanel>
        <Menu DockPanel.Dock="Top" >
            <MenuItem Header="ファイル"></MenuItem>
            <MenuItem Header="編集"></MenuItem>
            <MenuItem Header="表示"></MenuItem>
        </Menu>
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5* " />
                <ColumnDefinition Width="0.5* " />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*" />
                <RowDefinition Height="0.5*" />
            </Grid.RowDefinitions>

            <Button Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Content="Button" />
            <TextBox Grid.Row="0" Grid.Column="1" Width="Auto" Height="Auto"/>
            <Label Grid.Row="1" Grid.Column="1" Content="御坂美琴" />

        </Grid>
    </DockPanel>

中身があれですけど、割とレイアウトは作れるようになった感覚があります。

ここまでで、学んだこと

レイアウトを取るためには色々用意されている
Gridは直感的でわかりやすい
PanelとGridを入れ子をしてデザインすると良い
GridはSpanで結合できる

データバインディング

Vueにもデータバインディングというのがありましたね。WPFでも同じようなものがあります。

xamlファイルに直接値を指定せずに、DataContextを介してデータを参照させます。

<Grid>
        <Label Content="{Binding title}" HorizontalAlignment="Left" Margin="197,78,0,0" VerticalAlignment="Top"/>
        <Label Content="{Binding mydata.day}" HorizontalAlignment="Left" Margin="341,278,0,0" VerticalAlignment="Top"/>
        <ComboBox ItemsSource="{Binding nameList}" HorizontalAlignment="Left" Margin="197,146,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>

実際に利用する値を{Biding key}のようにしておき、csではその値を設定する

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new
            {
                title = "ラブライブ",
                mydata = new { day = "2021/09/30" },
                nameList = new string[] { "かのん", "ちさと", "まんまる" }
            };

        }

    }

csでは、直接ボタンの要素に対して値を変更せず、DataContextに対して値を設定します。

するとxamlで設置したラベルやコンボボックスなどの値がバインドされています。

フォームとラベルのバインディング

フォームに入力した内容をラベルにバインディングさせることをやってみます。

TextBoxに名前を付けたら、LabelはそのTextBoxに、ElementNameを使ってバインドさせます。

これでTextBoxにバインドさせますが、その中でもTextに対してバインドするので、PathにTextを指定します。

<Grid>
        <TextBox x:Name="myTextBox" Width="200" Height="50" Margin="26,27,574,357" />
        <Label Content="{Binding ElementName=myTextBox, Path=Text}" HorizontalAlignment="Left" Margin="26,82,0,0" VerticalAlignment="Top"/>
    </Grid>

ソースの変数とバインドさせる

ソースの変数とバインドさせます。まずは以下のようなラベルを一個追加します。

<Grid>
        <TextBox x:Name="myTextBox" Width="200" Height="50" Margin="26,27,574,357" />
        <Label Content="{Binding ElementName=myTextBox, Path=Text}" HorizontalAlignment="Left" Margin="26,82,0,0" VerticalAlignment="Top"/>
        <Label Content="{Binding Path=myName}" HorizontalAlignment="Left" Margin="31,125,0,0" VerticalAlignment="Top"/>
    </Grid>

ソースコードでmyNameという変数を用意します。

public string myName { get; set; } = "新垣あやせ";

これで実行してもだめで、コンストラクタに以下のような記載を追加します。データコンテキストを明示的に指定することで、xamlもデータコンテキストからmyNameを探します。

public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
        }

WPFの基本操作を学ぶ