ViewMakerで生成するWPF/Silverlightコントロール（１） Label編

今回からはViewMakerで生成するコントロールについて説明します。ViewMakerはWPF/Silverlight両方を対応していますので、それぞれの違いも比較しながら説明したいと思います。

Labelコントロール

まず最初はLabelコントロールです。WPFは標準で含まれていますが、SilverlightはSDKが必要になります。また若干機能の違いがあります。SilverlightのLabelは他の入力コントロールのキャプション、必須フィールドを示すために利用することを想定しているようです。WPFのLabelにはそのような仕組みはありません。ViewMakerでもヘッダーにLabelを利用していますが、今回はデータ表示用のLabelの説明で以下のプロパティを指定できるようになっています。*1

1. HorizontalContentAlignment（コンテントの水平配置位置）
2. StringFormat（出力フォーマット）

WPFサンプルイメージとXAMLコード

    <StackPanel Orientation="Vertical" DataContext="{Binding Path=Label,Mode=OneWay}" 
           Name="Label" Margin="5" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0">
      <Label Name="Label1" VerticalAlignment="Center">
        <TextBlock Text="{Binding Path=Label1, StringFormat=[\{0\}],Mode=OneWay}" />
      </Label>
      <Label Name="Label2" VerticalAlignment="Center">
        <TextBlock Text="{Binding Path=Label2, StringFormat=yyyy年MM月dd日(ddd),Mode=OneWay}" />
      </Label>
      <Label HorizontalContentAlignment="Right" Name="Label3" VerticalAlignment="Center">
        <TextBlock Text="{Binding Path=Label3, StringFormat=c,Mode=OneWay}" />
      </Label>
      <Label Name="Label4" Width="200" Foreground="Blue" Background="Azure" VerticalAlignment="Center" HorizontalAlignment="Left">
        <TextBlock Text="{Binding Path=Label4,Mode=OneWay}" />
      </Label>
    </StackPanel>

SilverlightサンプルイメージとXAMLコード

    <StackPanel Orientation="Vertical" DataContext="{Binding Path=Label,Mode=OneWay}" 
           Name="Label" Margin="5" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0">
      <sdk:Label Name="Label1" VerticalAlignment="Center">
        <TextBlock Text="{Binding Path=Label1, StringFormat=[\{0\}],Mode=OneWay}" />
      </sdk:Label>
      <sdk:Label Name="Label2" VerticalAlignment="Center">
        <TextBlock Text="{Binding Path=Label2, StringFormat=yyyy年MM月dd日(ddd),Mode=OneWay}" />
      </sdk:Label>
      <sdk:Label HorizontalContentAlignment="Right" Name="Label3" VerticalAlignment="Center">
        <TextBlock Text="{Binding Path=Label3, StringFormat=c,Mode=OneWay}" />
      </sdk:Label>
      <sdk:Label Name="Label4" Width="200" Foreground="Blue" Background="Azure" VerticalAlignment="Center" HorizontalAlignment="Left">
        <TextBlock Text="{Binding Path=Label4,Mode=OneWay}" />
      </sdk:Label>
    </StackPanel>

ViewModelコード

上記を生成したViewModelのコードは以下のようになります。View属性でコントロールの種類、ViewPropertyで各種プロパティの情報を付与できるようになっています。

        [View(ViewControlType.StackPanel)]
        [ViewProperty(StackPanelViewControl.Properties.HeaderPosition, LayoutHeaderPosition.Hidden)]
        public class LabelSample
        {
            [View(ViewControlType.Label)]
            [ViewProperty(LabelViewControl.Properties.StringFormat, "[{0}]")]
            public string Label1 { get; set; }

            [View(ViewControlType.Label)]
            [ViewProperty(LabelViewControl.Properties.StringFormat, "yyyy年MM月dd日(ddd)")]
            public DateTime Label2 { get; set; }

            [View(ViewControlType.Label)]
            [ViewProperty(LabelViewControl.Properties.StringFormat, "c")]
            [ViewProperty(LabelViewControl.Properties.HorizontalContentAlignment, LayoutHorizontalAlignment.Right)]
            public int Label3 { get; set; }

            [View(ViewControlType.Label)]
            [ViewProperty(LabelViewControl.Properties.Width, 200)]
            [ViewProperty(LabelViewControl.Properties.Foreground, "Blue")]
            [ViewProperty(LabelViewControl.Properties.Background, "Azure")]
            public string Label4 { get; set; }

            public LabelSample()
            {
                Label1 = "メッセージ1";
                Label2 = DateTime.Now;
                Label3 = 100;
                Label4 = @"１行目
２行目";
            }
        }

        [Browsable(true)]
        public LabelSample Label { get { return new LabelSample(); } }
    }

WPF/Silverlight統合TIPS「StringFormatのエスケープ方法」

Labelに限った話ではありませんが、バインド時に出力フォーマット指定する場合にStringFormatを利用します。この場合{0}のような指定する場合にWPFでは最初に{}を付与しますが、Silverlight（V4）ではうまく動きません。Silverlightでは\で{をエスケープすれば動作します。この方法がWPFでも使用できるようで今回はこの方法で統一しました。

*1:もちろん、ViewMakerでも幅や高さなどの共通的な項目も指定できますが、ここではLabel固有のプロパティについてに説明しています