チュートリアル: WPF コンテンツのスタイル設定

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

[前提条件]

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

プロジェクトを作成する

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

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 のインスタンスは、ElementHostという名前の新しい elementHost1 コントロールでホストされます。

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

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

4. XAML ビューで、 <UserControl> 開始タグの後に次の XAML を挿入します。 この 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. 前の手順で定義したSimpleButton スタイルを [キャンセル] ボタンに適用するには、[<Button>] ボタンの タグに次の XAML を挿入します。

   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. 新しいスタイルがボタン コントロールに適用されます。

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

10. [ OK] ボタンと [キャンセル] ボタンをクリックし、相違点を表示します。

こちらも参照ください

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