チュートリアル: WPF コンテンツにスタイルを適用する

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

必須コンポーネント

このチュートリアルを完了するには Visual Studio が必要です。

プロジェクトの作成

Visual Studio を開き、StylingWpfContent という名前の新しい Windows フォーム アプリケーション プロジェクトを Visual Basic または Visual C# で作成します。

注意

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

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

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

1. 新しい WPF UserControl プロジェクトをソリューションに追加します。 コントロール型の既定の名前である UserControl1.xaml を使用します。 詳細については、「チュートリアル: デザイン時の Windows フォームでの新しい WPF コンテンツの作成」を参照してください。

2. デザイン ビューで UserControl1 が選択されていることを確認します。

3. [プロパティ] ウィンドウで、Width プロパティおよび Height プロパティの値を 200 に設定します。

4. System.Windows.Controls.Button コントロールを UserControl に追加し、Content プロパティの値を「Cancel」に設定します。

5. 2 つ目の System.Windows.Controls.Button コントロールを UserControl に追加し、Content プロパティの値を「OK」に設定します。

6. プロジェクトをビルドします。

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

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

1. Windows フォーム デザイナーで Form1 を開きます。

2. ツールボックスで UserControl1 をダブルクリックして、フォーム上に UserControl1 のインスタンスを作成します。

   UserControl1 のインスタンスは、elementHost1 という名前の新しい ElementHost コントロールでホストされます。

3. elementHost1 のスマート タグ パネルで、ドロップダウン リストから [ホストするコンテンツの編集] をクリックします。

   UserControl1 が WPF デザイナーで開きます。

4. 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>
   

5. [Cancel] ボタンの <Button> タグに次の XAML を挿入することで、前の手順で定義した SimpleButton スタイルを [Cancel] ボタンに適用します。

   Style="{StaticResource SimpleButton}
   

   ボタン宣言は次の XAML のようになります。

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

6. プロジェクトをビルドします。

7. Windows フォーム デザイナーで Form1 を開きます。

8. 新しいスタイルが Button コントロールに適用されます。

9. [デバッグ] メニューの [デバッグの開始] を選択してアプリケーションを実行します。

10. [OK] ボタンと [Cancel] ボタンをクリックして、違いを確認します。

関連項目

• ElementHost
• WindowsFormsHost
• 移行と相互運用性
• WPF コントロールの使用
• Visual Studio で XAML をデザインする
• XAML の概要 (WPF)
• スタイルとテンプレート