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 のような静的マークアップとは異なりますので、
実際には柔軟に使い分けるのが良いでしょう。
コメント