C#とWPFで所有ゲーム一覧ツールを作成する【メイン画面準備編】

前回は自分の困りごとを書き出してみました。

今回は実際に画面レイアウトを作成していきたいと思います。

前回の要望をもとに作成していきますので是非前回の記事をご確認ください！

生成されたファイルを確認してみよう
具体的なコードの紹介
完成！

生成されたファイルを確認してみよう

前回までにプロジェクトを作成したときに「MainWindow.xaml」と「MainWindow.xaml.cs」が自動生成していることを確認してください

MainWindow.xaml：画面レイアウト

MainWindow.xaml.cs：レイアウトから紐づけてしたい動作をプログラミングする所

となっています。

今回はレイアウトを作成するので「MainWindow.xaml」をクリックして作成画面を表示しましょう

本来は固定できるアイテムはこちらに記載していきますが、ボタンが可変となっているのでcsファイルからボタンを生成するようにしたいので生成する画面を配置するだけにします。

あと、オプションをメニューに表示したいので上部に「オプション」メニューを表示させました。

具体的なコードの紹介

では、実際に実装したコードを紹介します

全体のコード

現時点(2023年５月)ではこのようにレイアウトしました

<Window x:Class="FolderCustomize.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:FolderCustomize"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="850">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="40*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Menu>
            <MenuItem Header="オプション">
                <MenuItem Header="設定" Click="Option_Click"/>
            </MenuItem>
        </Menu>
        <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Column="0" Grid.Row="1">
            <StackPanel x:Name="xamlMainStackPanel"  />
        </ScrollViewer>
    </Grid>
</Window>

レイアウト設定

配置設定方法はいろいろありますが私はGridが好きなことと適当に配置しても整っているように見えるのでGridを採用しています

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="40*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
　　・・・
    </Grid>

「Grid.RowDefinitions」の中に「RowDefinition Height」を配置する行の幅を設定することができます

比率で等分されます。たとえば

<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />

とかにすると、行を3等分にするとことができます。この枠の何番目を指定をしてボタンやテキストボックスを配置することができます。

列は今回１つで十分なので

<ColumnDefinition Width="*" />

となっています

もちろんこちらも下記のように設定することができます

<ColumnDefinition Width="10*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="30*" />

比率となるので左から1:2:3のレイアウト設定ができます

メニュー設定

上部にオプションメニューを配置します

        <Menu>
            <MenuItem Header="オプション">
                <MenuItem Header="設定" Click="Option_Click"/>
            </MenuItem>
        </Menu>

と設定しました意味としては

オプション
　>設定

と表示させることができます

<MenuItem Header="設定" Click="Option_Click"/>

「Click=”Option_Click”」は今後記載しますがこの「設定」というメニューがクリックされたときにイベントハンドラの名称となっています

本体を生成する

今回のプログラミングする本体を定義します

       <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Column="0" Grid.Row="1">
            <StackPanel x:Name="xamlMainStackPanel"  />
        </ScrollViewer>

今回、ボタンを大量に配置することが予測されるので「ScrollViewer」を採用しました

<ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Column="0" Grid.Row="1">

HorizontalScrollBarVisibility：スクロールバーを表示するかどうかの指定

Grid.Column=”0″ Grid.Row=”1″：先ほどのレイアウトをもとに左上の枠を0,0とした時の位置を指定しています

完成！

こんな感じで作成できました！

次回はボタンをコードで生成する方法を記載したいと思います！

【スクリプト番外編】C#とWPFで所有ゲーム一覧ツールを作成するその2【メイン画面準備編】