LoginSignup
31
32

More than 3 years have passed since last update.

@Kosen-amai(Qiiwi)

Windows GUIプログラミング入門5 画面レイアウト(2)、画面遷移(1)

Last updated at Posted at 2017-02-12

■はじめに

今回は画面レイアウトの続きと、別画面の表示の仕方についてやります。

wbg5-00.png

[注意]
これまでの回で説明済みの操作方法等は、説明を省略したり簡略化している場合があります。

■開発環境

  • Windows 10
  • Visual Studio Community 2015 Update 3
  • .NET Framework 4.x

■ドキュメントアウトライン

まず、画面が入り組んでくると便利なツール、ドキュメントアウトラインを表示しておきます。
メニューの「表示」 - 「その他のウィンドウ」 - 「ドキュメントアウトライン」を選択します。
wbg5-01.png

フローティング状態にするなりドッキングするなり好きな場所に配置してください。
コントロールの階層構造がツリー形式で表示でき、ここからコントロールの選択もできます。
wbg5-02.png

■Grid

◇マウスで行、列分割

Gridを3行、2カラムにします。
ドキュメントアウトラインでGridを選択し、画面デザイナのGrid上端あたりにマウスをポイントしてください。
そうすると黄色い線が表示されるはずなので、大体真ん中あたりでクリックしてください。
wbg5-03.png

はい、Gridが2カラムになりました。
次にGridの左端の上の方をマウスクリックしてください。
wbg5-04.png

もう一か所、1行目と同じぐらいの行の高さになるようクリックしてください。
これで3行になります。
wbg5-05.png

■メイン画面作成

◇ボタンの配置

Gridの1行目左側にButtonをドラッグ＆ドロップしてください。
wbg5-06.png

Gridの1行目右側、3行目左側、3行目右側にそれぞれButtonをドラッグ＆ドロップしてください。
wbg5-07.png

◇ボタンのプロパティ設定

画面デザイナで4つのボタンを全て含むよう、対角線上にドラッグしてください。
wbg5-08.png

4つのボタンが選択状態になりました。
wbg5-09.png

プロパティウィンドウで「レイアウト」カテゴリのWidthに150、Heightに30、HorizonalAlignmentとVerticalAlignmentにCenterを設定してください。
wbg5-10.png

Marginプロパティ右端の■をクリックして「リセット」を選択してください。
これでボタン配置時に設定されたMarginプロパティを削除します。
wbg5-11.png

Marginプロパティが無くなったので、4つのボタンがそれぞれのセルの中央に表示されるようになりました。
wbg5-12.png

ButtonのContentプロパティを以下のように設定してください。

<Button x:Name="button" Content="ダイアログ１" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="30"/>
<Button x:Name="button1" Content="ダイアログ２" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="30"/>
<Button x:Name="button2" Content="次の画面に移動" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Center" Width="150" Height="30"/>
<Button x:Name="button3" Content="新しい画面表示" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Center" Width="150" Height="30"/>

◇テキストの配置

TextBlockをGridの2行目・左側にドラッグ＆ドロップし、
名前（x:Name）にtextBlockとつけてください。
wbg5-13.png

■ダイアログの作成

◇ダイアログ画面作成

新しい項目でウィンドウを1つ追加してください。
名前はDialogWindow1.xamlにします。
wbg5-14.png

以下のように画面を作成してください。
WindowのWindowStyleプロパティは最小化ボタン・最大化ボタンが無いToolWindowに設定します。
2つのボタンはダブルクリックしてイベントハンドラを設定します。

DialogWindow1.xaml
<Window x:Class="WpfApplication5.DialogWindow1"
        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:WpfApplication5"
        mc:Ignorable="d"
        Title="DialogWindow1" Height="150" Width="300" WindowStyle="ToolWindow">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="clickButtonText" Text="TextBlock" Margin="10"/>

        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="OK" Width="80" Margin="0,10,10,10" IsDefault="True" Click="Button_Click"/>
            <Button Content="キャンセル" Width="80" Margin="0,10,10,10" IsCancel="True" Click="Button_Click_1"/>
        </StackPanel>
    </Grid>
</Window>

DialogResultプロパティに値を設定するとウィンドウが終了します。
処理を確定するような終了の場合はtrueを、キャンセル的な終了の場合はfalseを設定します。

DialogWindow1.xaml.cs（抜粋）
// OK時
private void Button_Click(object sender, RoutedEventArgs e)
{
    this.DialogResult = true;
}

// キャンセル時
private void Button_Click_1(object sender, RoutedEventArgs e)
{
    this.DialogResult = false;
}

◇ダイアログ表示処理の作成

MainWindow.xamlに戻り、Contentがダイアログ１のボタンをダブルクリックして以下の処理を記述します。
先ほど作成したダイアログを表示する処理です。

MainWindow.xaml.cs（抜粋）
// ウィンドウ生成
var window = new DialogWindow1();
// 生成したウィンドウのテキストに文字列設定
window.clickButtonText.Text = (sender as Button).Content + "が押されました。";
// ウィンドウ表示
bool? res = window.ShowDialog();

// DialogResultをチェック
if (res == true)
{
    textBlock.Text = "OKでダイアログが終了。";
}
else
{
    textBlock.Text = "キャンセルでダイアログが終了。";
}

イベント名を右クリックし、「名前の変更」でdialogButton_Clickに書き換えて「適用」ボタンを押します。
wbg5-15.png

MainWindow.xamlのボタン定義で、Contentがダイアログ２の方にクリックイベントをコピペし、2つのボタンが同じイベントハンドラを呼び出すようにします。

<Button x:Name="button" Content="ダイアログ１" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="30" Click="dialogButton_Click"/>
<Button x:Name="button1" Content="ダイアログ２" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="150" Height="30" Click="dialogButton_Click"/>

■ダイアログ動作確認

ここまでで一度実行してみましょう。

「ダイアログ１」ボタンを押します。
wbg5-16.png

ダイアログが表示されました。
呼び出し元のボタンのContentがメッセージ部分に表示されています。
ShowDialogで表示したウィンドウは閉じるまで呼び出し元の画面には戻れません。
wbg5-17.png

OKボタンで終了します。
MainWindowのテキストが設定されました。
wbg5-18.png
次は「ダイアログ２」ボタンを押してみます。

今度も呼び出し元のContentがメッセージに反映されています。
wbg5-19.png
キャンセルで閉じてみます。

MainWindowのテキストに反映されました。
wbg5-20.png

■別ウィンドウに移動、GridSplitter

新しい項目の追加でウィンドウを追加してください。
名前はWindow1.xamlにします。

Gridの淵をクリックして3×3に分割します。
縦横中央を細めにしてください。
wbg5-21.png

ツールボックスにgを入力してフィルタリングし、GridSplitterを2つ、ドラッグ＆ドロップしてください。
wbg5-22.png

GridSplitterが配置されました。
wbg5-23.png

タグを以下のように編集してください。

<GridSplitter 
    x:Name="gridSplitter_H"
    Grid.Column="1" Grid.RowSpan="3"
    Width="5"
    HorizontalAlignment="Stretch"/>
<GridSplitter
    x:Name="gridSplitter_V"
    Grid.Row="1" Grid.ColumnSpan="3"
    Height="5"
    HorizontalAlignment="Stretch"/>

wbg5-24.png

真ん中のカラム幅を調整します。
赤枠のあたりにマウスをポイントしてください。
wbg5-25.png

ドロップダウンを開いてAutoを選択してください。
wbg5-26.png

行も同じくGridの真ん中の行、左端あたりにマウスカーソルを持っていき、Autoを選択してください。
wbg5-27.png

4つのセルにRectangleをドラッグ＆ドロップします。
wbg5-28.png

タグを以下のように書き換えます。

<Rectangle
    Grid.Row="0" Grid.Column="0"
    Fill="Aqua"/>
<Rectangle 
    Grid.Row="0" Grid.Column="2"
    Fill="AntiqueWhite"/>
<Rectangle 
    Grid.Row="2" Grid.Column="0"
    Fill="Aquamarine"/>
<Rectangle
    Grid.Row="2" Grid.Column="2"
    Fill="Blue"/>

ボタンを配置し、Contentを前の画面に戻るに設定してください。

wbg5-29.png

ボタンをダブルクリックし、Clickのイベントハンドラに以下を入力してください。

「前の画面に戻る」ボタンクリック時の処理
this.Close();

ドキュメントアウトラインでWindowを選択し、プロパティのイベントでClosingの欄をダブルクリックします。

wbg5-30.png

ウィンドウ終了時の処理、Closingイベントに以下の処理を書きます。

Window_Closingの処理
// メイン画面を表示する
App.Current.MainWindow.Show();

MainWindow.xamlに戻り、「次の画面に移動」ボタンのイベントハンドラを作成します。

「次の画面に移動」ボタンクリック時の処理
// ウィンドウ生成
var window = new Window1();
// ウィンドウ表示
window.Show();
// 自身（MainWindow）を隠す
this.Hide();

動かしてみましょう。
「次の画面に移動」ボタンを押します。
wbg5-31.png

MainWindowが隠れてWindow1が表示されます。
wbg5-32.png

真ん中の部分をドラッグしてサイズを変えられます。
「前の画面に戻る」ボタンを押すとWindow1は終了し、非表示にしていたMainWindowが表示されます。
wbg5-33.png

■別ウィンドウ表示

普通のウィンドウ表示をやります。
新しい項目の追加でウィンドウを追加してください。
名前はWindow2.xamlにします。

MainWindowの「新しい画面表示」ボタンのイベントハンドラに以下を入力してください。

// ウィンドウ生成
var window = new Window2();
// ウィンドウ表示
window.Show();

実行してみます。

「新しい画面表示」ボタンを押すとWindow2がMainWindowの上に表示されます。
ダイアログ表示ではないのでMainWindowも触ることができます。
wbg5-34.png

「新しい画面表示」ボタンを何度も押すと、どんどんWindow2が新たに表示されます。
MainWindowとすべてのWindow2を閉じるとプログラムが終了します。
wbg5-35.png

おしまい

＜＜ 最初の記事 　 ＜ 前の記事 　 次の記事 ＞

31
32
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
31
32