VSUG Day 2008 Summer セッションフォローアップ

VSUG Day 2008 Summer

６月７日（土）に行われたイベント「VSUG Day 2008 Summer」にて、 「コントロール - WPF vs Silverlight」というセッションを担当させていただきました。ご参加いただいた皆様、イベントに携われた皆様、ありがとうございました。


イベント当日の午前中にSilverlight 2 Beta 2がリリースされたということで、Beta 2の変更点はスライド追加というかたちで捕捉させていただきました。お持ちいただいた資料には追加内容は入っておりませんでしたので、こちらでコード部分だけでもフォローアップしたいと思います。


WPF 3.0 / 3.5

<Button Content="Button" FontSize="32" Margin="20" Background="LightBlue">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="20"
                   Name="border" >
                <ContentPresenter
                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="border"
                           Property="Background" Value="LightGreen"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

Silverlight 2 Beta 1

<Button Content="Button" FontSize="32" Margin="20" Background="LightBlue">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="20"
                   Name="RootElement">
                <ContentPresenter Content="{TemplateBinding Content}"
                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                   FontSize="{TemplateBinding FontSize}"/>
                <Border.Resources>
                    <Storyboard x:Key="Normal State" />
                    <Storyboard x:Key="MouseOver State">
                        <ColorAnimation Duration="0" Storyboard.TargetName="RootElement"
                           Storyboard.TargetProperty="(Background).Color" To="LightGreen" />
                    </Storyboard>
                </Border.Resources>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Silverlight 2 Beta 2

<Button Content="Button" FontSize="32" Margin="20" Background="LightBlue">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="20" Name="border">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="CommonStates">
                        <vsm:VisualState x:Name="Normal"/>
                        <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Duration="0" Storyboard.TargetName="border"
                                   Storyboard.TargetProperty="(Background).Color" To="LightGreen" />
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <ContentPresenter
                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

VisualStateManager.VisualStateGroupsプロパティは添付プロパティとして実装されています。ターゲットはDpendencyObjectとなっているようですので、あらゆる要素のプロパティとして記述することが可能となっています。これは便利な方法ですね。


Beta 2ではFontSizeプロパティの値が継承されるようになったことと、ContentPresenterが自動的にContentControlのコンテンツを表示するようになったことで、２つのTemplateBindingを省略できるようになりました。これでこの部分は完全にWPFと互換になりました。