VB.NET メニュー画面ひな型

# ■概要

ウィンドウサイズに応じて中の要素が拡大縮小するメニュー画面と、説明付きボタン、画像付きボタンのサンプルです。
![vbmn00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/909bb51b-020e-e710-9a9d-c6da95234c84.png)

# ■作り方

## ◇プロジェクトの作成

[こちら](https://qiita.com/Kosen-amai/items/d44b9adbdf9eb3ba8e22 "VB.NETでGUIアプリ入門（.NET Framework 4.x編）")を参考に、プロジェクトを作成します。
ここでは`MenuSample`というプロジェクト名にしました。

## ◇画像リソースの取り込み

終了ボタンに使う画像を読み込みます。
ソリューションエクスプローラーで`My Project`をダブルクリックします。
![vbmn01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/dbdf8328-8111-feae-bfcc-6fe20d39ba81.png)

左の一覧から`リソース`を選択し、`リソースの追加`の▼を開き、`既存のファイルの追加`を選択します。
![vbmn02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6c479adc-fa32-6f92-9888-a35e6d1c0c16.png)

画像を選択します。画像は各自用意してください。
![vbmn03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/df1d4506-c1a2-1107-6200-29aea2b2de5a.png)

プロジェクトに追加されました。
![vbmn04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/bddb9c7e-6856-a6de-dd33-1e369baaecc1.png)

`Resources`フォルダが作成され、画像が配置されます。
![vbmn05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2cc7a9e0-3d73-9aa5-a948-444869bd938d.png)

ソリューションエクスプローラーで`Resources`フォルダの画像を選択し、プロパティタブを選択、ビルドアクションの設定を変更します。
![vbmn06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f830f965-fc0c-e20b-8d0c-a580469cceb1.png)

ビルドアクションを`Resource`に設定します。
![vbmn07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/bf9244fb-d3f0-bd2a-8166-2bd51cb52a3a.png)

## ◇画面の作成

ボタン1, 2は普通のボタン、3, 4は中に説明テキストがあるボタンです。
終了ボタンは画像付きボタンです。

```Xml:MainWindow.xaml
<Window
    x:Class="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:local="clr-namespace:MenuSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="メニュー"
    Width="450"
    Height="500"
    Background="LightCyan"
    ResizeMode="CanResizeWithGrip"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">

    <!--  コントロールの共通スタイル定義  -->
    <Window.Resources>
        <!--  ボタンの既定スタイル  -->
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="Margin" Value="8" />
            <Setter Property="Width" Value="250" />
        </Style>
        <!--  ボタンのメインテキストスタイル（ボタン3, 4用）  -->
        <Style x:Key="ButtonMainTextStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
        <!--  ボタンのサブテキストスタイル（ボタン3, 4用）  -->
        <Style x:Key="ButtonSubTextStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="10" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
        <!--  チェックボックスの既定スタイル  -->
        <Style TargetType="CheckBox">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Margin" Value="8" />
        </Style>
    </Window.Resources>

    <!--  縦横比を維持して拡大縮小する場合はStretchにUniformを設定  -->
    <Viewbox VerticalAlignment="Top" Stretch="Fill">
        <StackPanel>
            <Button
                x:Name="Button1"
                Click="Button1_Click"
                Content="ボタン1" />

            <Button
                x:Name="Button2"
                Click="Button2_Click"
                Content="ボタン2" />

            <Button x:Name="Button3" Click="Button3_Click">
                <StackPanel>
                    <TextBlock Style="{StaticResource ButtonMainTextStyle}" Text="ボタン3" />
                    <TextBlock Style="{StaticResource ButtonSubTextStyle}" Text="ボタン3サブテキスト" />
                </StackPanel>
            </Button>

            <Button x:Name="Button4" Click="Button4_Click">
                <StackPanel>
                    <TextBlock Style="{StaticResource ButtonMainTextStyle}" Text="ボタン4" />
                    <TextBlock Style="{StaticResource ButtonSubTextStyle}" Text="ボタン4サブテキスト" />
                </StackPanel>
            </Button>

            <CheckBox
                x:Name="Check5"
                Content="チェックボックス5"
                IsChecked="True" />

            <!--  終了ボタン  -->
            <Button
                x:Name="ButtonClose"
                Width="100"
                Margin="8,16,8,8"
                HorizontalAlignment="Right"
                Click="ButtonClose_Click">
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                    <Image Margin="0,0,4,0" Source="Resources/exit16.png" />
                    <TextBlock Text="終了" />
                </StackPanel>
            </Button>
        </StackPanel>

    </Viewbox>
</Window>
```

## ◇ロジックの作成

```Vb:MainWindow.xaml.vb
Class MainWindow
    Private Sub Button1_Click(sender As Object, e As RoutedEventArgs)
        Me.Hide()

        MessageBox.Show("こんにちは")

        Me.Show()
    End Sub

    Private Sub Button2_Click(sender As Object, e As RoutedEventArgs)

    End Sub

    Private Sub Button3_Click(sender As Object, e As RoutedEventArgs)

    End Sub

    Private Sub Button4_Click(sender As Object, e As RoutedEventArgs)

    End Sub

    ''' <summary>
    ''' 終了ボタンクリック時
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub ButtonClose_Click(sender As Object, e As RoutedEventArgs)
        Close()
    End Sub
End Class
```

# ■補足

一覧系のコントロールや、長い文字列が入るテキストボックスなどがある画面はサイズ変更に対応するのは当然として、サイズ変更するメリットが見いだせない画面は安易にサイズ変更不可にするのではなく、中身を丸ごと拡大縮小させてしまえばお手軽にメリットを付加することができます。
ウィンドウを小さくできることで、他のウィンドウ（別アプリ含む）を同時に表示しやすくなりますし（ウィンドウサイズを変えられる事そのものが一つのメリット）、ウィンドウコンテンツを拡大できることで目の悪い人にやさしいアプリケーションになります。

または、画面サイズに応じてレイアウトを切り替える方法もあります。
例）
![vbmn10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4d24772a-7551-5525-00d5-94bc6e525a0e.png)