チュートリアル: WPF コンテンツへのスタイルの適用

2011-08-09

このチュートリアルでは、Windows フォームでホストされている Windows Presentation Foundation (WPF) コントロールにスタイルを適用する方法について説明します。

このチュートリアルでは次のタスクを行います。

プロジェクトを作成します。
WPF コントロール型を作成します。
WPF コントロールにスタイルを適用します。

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

Visual Studio 2010.

プロジェクトの作成

まず、Windows フォームプロジェクトを作成します。

注意

WPF コンテンツをホストする場合は、C# プロジェクトと Visual Basic プロジェクトのみがサポートされます。

プロジェクトを作成するには

StylingWpfContent という名前の新しい Windows フォームプロジェクトを Visual Basic または Visual C# で作成します。詳細については、「方法: 新しい Windows フォームアプリケーションプロジェクトを作成する」を参照してください。

WPF コントロール型の作成

プロジェクトに追加された WPF コントロール型は、ElementHost コントロールでホストできます。

WPF コントロール型を作成するには

新しい WPF UserControl プロジェクトをソリューションに追加します。名前はこのコントロール型の既定である UserControl1.xaml を使用します。詳細については、「チュートリアル: デザイン時の Windows フォームでの新しい WPF コンテンツの作成」を参照してください。
デザインビューで UserControl1 が選択されていることを確認します。詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。
[プロパティ] ウィンドウで、Width プロパティおよび Height プロパティの値を 200 に設定します。
System.Windows.Controls.Button コントロールを UserControl に追加し、Content プロパティの値を Cancel に設定します。
System.Windows.Controls.Button コントロールを UserControl にもう 1 つ追加し、Content プロパティの値を OK に設定します。
プロジェクトをビルドします。

WPF コントロールへのスタイルの適用

さまざまなスタイルを WPF コントロールに適用することで、外観や動作を変えることができます。

WPF コントロールにスタイルを適用するには

Windows フォームデザイナーで Form1 を開きます。
[ツールボックス] で UserControl1 をダブルクリックして、フォームに UserControl1 のインスタンスを作成します。

UserControl1 のインスタンスは、elementHost1 という名前の ElementHost コントロールでホストされます。
elementHost1 のスマートタグパネルで、ボックスの一覧の [ホストするコンテンツの編集] をクリックします。

UserControl1 が WPF デザイナーに開きます。
XAML ビューで、次の XAML を開始の <UserControl> タグの後に追加します。

この XAML は、対照的なグラデーション境界を持つグラデーションを作成します。このコントロールがクリックされると、グラデーションが変わり、ボタンが押されたような外観が生成されます。詳細については、「スタイルとテンプレート」を参照してください。

    <UserControl.Resources>
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#444" Offset="0.0"/>
            <GradientStop Color="#888" Offset="1.0"/>
        </LinearGradientBrush>
        
        <Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
            <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="Grid">
                            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

[キャンセル] ボタンの <Button> タグに次の XAML を挿入することで、前の手順で定義した SimpleButton スタイルを [キャンセル] ボタンに適用します。
```
Style="{StaticResource SimpleButton}
```
ボタン宣言は次の XAML のようになります。

<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
                Style="{StaticResource SimpleButton}">Cancel</Button>

プロジェクトをビルドします。
Windows フォームデザイナーで Form1 を開きます。
新しいスタイルがボタンコントロールに適用されます。
[デバッグ] メニューの [デバッグ開始] を選択して、アプリケーションを実行します。
[OK] ボタンと [キャンセル] ボタンをクリックし、違いを参照します。

参照

ElementHost

WindowsFormsHost

概念

XAML の概要 (WPF)

スタイルとテンプレート

その他の技術情報

移行と相互運用性

WPF コントロールの使用

WPF デザイナー