Windowsストアアプリにおける4段階のコード共通化方法

Windowsストアアプリ(のデザイン面)において、
主に以下に示す4段階のコード共通化方法が提供されている。

第1段階： リソースディクショナリ

UI要素のプロパティレベルの共通化を行う。

例えばボタンの前面色をリソースディクショナリ内で定義すると、

<ResourceDictionary ... >
    <SolidColorBrush x:Key="BackButtonForegroundThemeBrush" Color="#FF666666"/> 
</ResourceDictionary>

XAMLファイル内でStaticResource関数を用いて次のように参照できる：

<Button Foreground="{StaticResource BackButtonForegroundThemeBrush}" ... />

複数のプロパティを一括して参照したい場合はスタイルタグを利用する：

<Style x:Key="SeparatorStyle" TargetType="Image">
    <Setter Property="Width" Value="494"/>
    <Setter Property="Height" Value="4"/>
    <Setter Property="Source" Value="/Assets/separator.png"/>
</Style>

↓

<Image Style="{StaticResource SeparatorStyle}" ... />

第2段階： テンプレートコントロール

カスタムコントロールをプログラム的に定義する。

Controlクラスを継承してカスタムコントロールを作成する：

public sealed class CustomControl1 : Control
{
    public CustomControl1()
    {
        this.DefaultStyleKey = typeof(CustomControl1);
    }
}

外部に公開したいプロパティは、DependencyPropertyプロパティを用いて定義する：

public string Title
{
    get { return (string)GetValue(TitleProperty); }
    set { SetValue(TitleProperty, value); }
}

public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title",
    typeof(string), typeof(FlyoutPanel), null);

外部に公開したいイベントは次のように行う：

public event RoutedEventHandler MyEvent;

すると、以下のようにカスタムコントロールを利用できる：

<local:CustomControl1 Title="xxx"  MyEvent="CustomControl1_MyEvent" />

第3段階： ユーザーコントロール

上述のテンプレートコントロールをベースにしたうえで、
XAMLファイルを用いてデザインを定義することができる。

UserControlクラスを継承してカスタムコントロールを作成する：

public sealed partial class MyUserControl1 : UserControl
{
    public MyUserControl1()
    {
        this.InitializeComponent();
    }
}

対応するXAMLファイルにて、デザインを定義していく：

<UserControl ... >
    ...
</UserControl>

XAMLファイルが使えるので、より複雑な構造のUIが構築しやすい。

第4段階： (部分)ページ

ページは画面全体を表すだけでなく、Frameを用いて、部分的な領域として埋め込んで表すことができる。

<Page ... >
  ...
  <!-- 埋め込みページ -->
  <Frame x:Name="LeftFrame" />
  ...
</Page>

↓

LeftFrame.Navigate(typeof(SubPage));

以上です。