C#たんと学ぶ／わりと硬派なソフトウェア開発講座
第2-2回「デスクトップアプリケーション」

C#たんと学ぶ わりと硬派なソフトウェア開発講座（4）

レイアウト

GUIという名前の通り、まずはグラフィカルなUIレイアウトのデザインをします。 UIデザインには、プログラミングのスキルよりもむしろ美術的な感覚が要求されるため、アプリケーションの中核部分を作る開発者さんとは別に、UIデザイナーさんを呼んできて分業する場合もあります。

　GUIは、WindowクラスやButtonクラスなどのUIの部品を組み合わせて作ります。もちろん、以下のように、C#コードだけで（特にGUIデザインツールは必要なく、やろうと思えばメモ帳で）GUIデザインができます。

var text = new TextBox();
var button = new Button { Content = "button" };
var window = new Window {
    Content = new StackPanel {
        Children = { text, button },
    }};

　しかし、グラフィカルなデザインは、グラフィカルなツールを使って行う方が楽です。例えば、今回のサンプルの15パズルはVisual Studioを使って、以下のような画面を見ながら作成しています。

　ここで、この画面の左下辺りを見てください。何かHTMLのような、<> だらけのものが見えると思います。これはXAML（eXtensible Application Markup Language: 日本語では「ザムル」と発音します）と呼ばれるもので、GUIデザイン用のツールが読み書きしやすいように、WindowクラスなどのUI部品をXML形式で表現したものです。

　単に、GUIデザインツールからするとXML形式の方が読み書きしやすいというだけで、C#で書く場合とXMLで書く場合に大きな差があるわけではありません。

　ちなみに、15パズルに関して、ちら見えしているXAMLコードですが、一部を抜粋すると以下のようなものです。

<Window
    x:Class="FifteenPuzzle.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="15パズル" SizeToContent="WidthAndHeight">
 
    <Window.ContextMenu>
        <ContextMenu>
            <MenuItem Header="初期化" Command="{Binding InitCommand}" />
        </ContextMenu>
    </Window.ContextMenu>
 
    <Grid>
           …
           中略。行/列の設定。
           …
        <ListBox ItemsSource="{Binding Cells}"  Grid.ColumnSpan="2">
           …
           中略。15パズルのセルを表示する領域。
           …
        </ListBox>
        
        <TextBlock Text="手数:" Grid.Row="1" />
        <TextBlock Text="{Binding Count}" Grid.Row="1" Grid.Column="1" />
           …
           中略。経過時間を表示する領域。
           …
    </Grid>
</Window>

• 全コード: MainWindow.xaml