XAMLで始めるWPF入門:メニュー＆ステータスバーXAMLテンプレート（App.xamlにスタイルを集約）

コンピュータ

WPFでは各コントロールに個別のスタイルを定義できますが、フォントサイズや余白など共通化できる部分は App.xaml にまとめると管理が楽になります。
今回は、メニュー・ステータスバーを含む最小構成のテンプレートを紹介します。

ソースコード

ファイル名:App.xaml

<Application x:Class="MenuAndStatusTempl.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MenuAndStatusTempl"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

    <!-- 基本フォントサイズ -->
    <sys:Double x:Key="FontSizeBase">16</sys:Double>
    <sys:Double x:Key="FontSizeSmall">12</sys:Double>

    <!-- 基本マージン＆パディング -->
    <Thickness x:Key="PadBase">8,6</Thickness>
    <Thickness x:Key="PadTight">6,4</Thickness>
    <Thickness x:Key="MarginBase">8</Thickness>
    <Thickness x:Key="MarginTight">4</Thickness>

    <!-- Window / Page -->
    <Style TargetType="Window">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
    </Style>

    <!-- TextBlock -->
    <Style TargetType="TextBlock">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Margin" Value="{StaticResource MarginTight}"/>
      <Setter Property="TextWrapping" Value="Wrap"/>
    </Style>

    <!-- Button -->
    <Style TargetType="Button">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Padding"  Value="{StaticResource PadBase}"/>
      <Setter Property="Margin"   Value="{StaticResource MarginTight}"/>
    </Style>

    <!-- TextBox -->
    <Style TargetType="TextBox">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Padding"  Value="6,4"/>
      <Setter Property="Margin"   Value="{StaticResource MarginTight}"/>
    </Style>

    <!-- ListView / DataGrid -->
    <Style TargetType="ListView">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Margin"   Value="{StaticResource MarginTight}"/>
    </Style>
    <Style TargetType="DataGrid">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Margin"   Value="{StaticResource MarginTight}"/>
      <Setter Property="RowHeight" Value="28"/>
    </Style>

    <!-- Menu / MenuItem -->
    <Style TargetType="Menu">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Padding"  Value="0"/>
      <Setter Property="Margin"   Value="0,0,0,4"/>
    </Style>
    <Style TargetType="MenuItem">
      <Setter Property="FontSize" Value="{StaticResource FontSizeBase}"/>
      <Setter Property="Padding"  Value="{StaticResource PadTight}"/>
    </Style>

    <!-- StatusBar / StatusBarItem -->
    <Style TargetType="StatusBar">
      <Setter Property="FontSize" Value="{StaticResource FontSizeSmall}"/>
      <Setter Property="Padding"  Value="8,2"/>
      <Setter Property="Margin"   Value="0"/>
    </Style>
    <Style TargetType="StatusBarItem">
      <Setter Property="Margin" Value="0,0,8,0"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
    </Style>

    </Application.Resources>
</Application>

ファイル名:MainWindow.xaml

<Window x:Class="MenuAndStatusTempl.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:MenuAndStatusTempl"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <!-- 上：メニュー -->
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_New"  InputGestureText="Ctrl+N"/>
                <MenuItem Header="_Open" InputGestureText="Ctrl+O"/>
                <Separator/>
                <MenuItem Header="E_xit"/>
            </MenuItem>
            <MenuItem Header="_Help">
                <MenuItem Header="_About"/>
            </MenuItem>
        </Menu>


        <!-- 下：ステータスバー -->
        <StatusBar DockPanel.Dock="Bottom">
            <StatusBarItem>
                <TextBlock Text="Ready"/>
            </StatusBarItem>

            <!-- スペーサー -->
            <Separator/>

            <StatusBarItem>
                <ProgressBar Width="120" Height="14" Minimum="0" Maximum="100" Value="42"/>
            </StatusBarItem>
        </StatusBar>
        
        <!-- 中央：コンテンツ -->
        <Grid>
            <TextBlock Text="Main Content" Margin="12" FontSize="16"/>
        </Grid>
    </DockPanel>
</Window>

実行イメージ

解説

メニュー＆ステータスバーを配置したレイアウトは、モダンなデザインでは無いですが、かつての定番スタイルですので使い方に迷う人は少ないでしょう。

また、App.xamlにApplication.Resourcesという形で、アプリケーション全体に適用される、Style(サンプルではフォントサイズ、パッディング、マージン）を定義しています。
厳密には違いますが、感覚的にHTMLに対するCSSみたいな関係で、見た目の装飾に関する定義をApp.xamlに逃がすことで、MainWindow.xamlのコード量減らすことが出来ます。
さらに、MainWindow.xamlをHTMLのように構造のみ定義する形にしたいところですが、
WPF の目的は Web のような静的マークアップとは異なりますので、
実際には柔軟に使い分けるのが良いでしょう。

スポンサーリンク

コメント