Xamlでメニューバーと画面分割をする

Mizeee

2024年7月9日 07:04

1. はじめに

　今回は、C# WPFを使用して下記のGUIを作成方法をまとめる。

(1) メニューバーを作成する
　GUIにメニューバーを付け、「ファイル」→「開く」を表示する。
(2) 画面を縦列に2分割する
(3) スクロールバーを付ける

　C# WPFでは、Xaml（eXtensible Application Markup Language）という言語でGUIを記述する。今回は、その記述方法がメインテーマである。

2. 現状の確認と完成イメージ

2.1 現状の確認

　まず、WPFプロジェクト作成直後の画面を確認する（図1）。

　MainWindowというタイトルに、最小化・最大化・閉じるが付いたシンプルな画面となっている。今回は、ここに追加していく。

2.2 完成イメージ

　下記の画面が完成イメージである（図2）。

　図2に示す通り、メニューバーがついており、左側のエリアと右側のエリアが分割されているイメージである。なお、左側のエリアにスクロールバーを付ける。

3. 作成方法

3.1 ①メニューバーを作成する

　GUIにメニューバーを付け、「ファイル」→「開く」を表示できるようにする。Xamlでメニューバーを付けるには、<MenuItem>タグを使用する。

<Window x:Class="MapEditor.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:MapEditor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Menu>
            <MenuItem Header="ファイル">
                <MenuItem Header="開く"></MenuItem>
            </MenuItem>
        </Menu>
    </Grid>
</Window>

　上記は、メニューバーに「ファイル」→「開く」を表示するプログラムである。<MenuItem>を階層構造にしていくことで、ファイルを選択すると、開くが表示できるようになる（図3）。

　図3よりも多くのメニューを追加する場合は、タグの階層を深くすることで実装できる。

    <Grid>
        <Menu>
            <MenuItem Header="ファイル">
                <MenuItem Header="開く"></MenuItem>
                <MenuItem Header="保存"></MenuItem>
                <MenuItem Header="新規作成"></MenuItem>
            </MenuItem>
            <MenuItem Header="ヘルプ">
                <MenuItem Header="ヘルプの表示"></MenuItem>
            </MenuItem>
        </Menu>
    </Grid>

　実行すると、図4の画面を表示する。

3.2 ②画面を2分割にする

　表示エリアを縦列で2分割する。Xamlで表示エリアを2分割するには、<ColumnDefinitions>タグを使用する。

<Window x:Class="MapEditor.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:MapEditor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Menu Grid.ColumnSpan="2">
            <MenuItem Header="ファイル">
                <MenuItem Header="開く"></MenuItem>
            </MenuItem>
        </Menu>

        <StackPanel Grid.Column="0" Margin="0,15,0,0">
            <Label Content="左側のエリア"></Label>
        </StackPanel>
        <StackPanel Grid.Column="1" Margin="0,15,0,0">
            <Label Content="右側のエリア"></Label>
        </StackPanel>
    </Grid>
</Window>

　今回は、1列目を300px、2列目を可変に設定した。また、実行結果がわかりやすいように<StackPanel>タグで左と右側のエリアがわかるように記述した（図5）。

3.3 ③スクロールバーを付ける

　2分割した箇所にスクロールバーを付ける。スクロールバーを付けるには、ScrollViewerタグを使用する。

<ScrollViewer Grid.Column="0" VerticalScrollBarVisibility="Auto" Margin="0,20,0,0">
            <StackPanel>
                <!-- 大量のコンテンツを追加 -->
                <Label Content="test 1"></Label>
                <Label Content="test 2"></Label>
                <Label Content="test 3"></Label>
                <Label Content="test 4"></Label>
                <Label Content="test 5"></Label>
                <Label Content="test 6"></Label>
                <Label Content="test 7"></Label>
                <Label Content="test 8"></Label>
                <Label Content="test 9"></Label>
                <Label Content="test 10"></Label>
                <Label Content="test 11"></Label>
                <Label Content="test 12"></Label>
                <Label Content="test 13"></Label>
                <Label Content="test 14"></Label>
                <Label Content="test 15"></Label>
                <Label Content="test 16"></Label>
                <Label Content="test 17"></Label>
                <Label Content="test 18"></Label>
                <Label Content="test 19"></Label>
                <Label Content="test 20"></Label>
            </StackPanel>
</ScrollViwer>

　これによって、図6の画面が表示できる。なお、スクロールバーが出るのは、表示項目が画面にはみ出した場合のみ表示される。

4. おわりに

　C#WPFを使用しておおまかな画面を作成した。今回やったことは、下記の3つである。

(1) メニューバーを作成する
(2) 画面を縦に2分割する
(3) スクロールバーを付ける

　メニューバーは、<MenuItem>タグで実装することができた。また、階層を深くすることで、複数のメニューを追加できる。

　画面を縦に2分割するには、<Grid.ColumnDefinitions>タグを使用する。今回は、横幅300px, 縦幅Autoと設定した。

　スクロールバーを付けるには、<ScrollViewer>タグを使用する。ただし、デフォルトの場合は、表示項目が画面からはみ出さないと表示されない。

この記事が気に入ったらサポートをしてみませんか？