次の方法で共有

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

  • [アーティクル]

更新 : 2007 年 11 月

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

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

  • プロジェクトを作成します。

  • WPF コントロール型を作成します。

  • WPF コントロールにスタイルを適用します。

メモ :

使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

前提条件

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

  • Visual Studio 2008

プロジェクトの作成

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

メモ :

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

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

WPF コントロール型の作成

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

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

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

  2. デザイン ビューで UserControl1 が選択されていることを確認します。詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

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

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

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

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

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

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

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

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

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

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

  3. elementHost1 のスマート タグ パネルで、ボックスの一覧の [ホストするコンテンツの編集] をクリックします。

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

  4. XAML ビューで、次の 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>

[xaml]

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

参照

概念

XAML の概要

スタイルとテンプレート

参照

ElementHost

WindowsFormsHost

その他の技術情報

移行と相互運用性

Windows Presentation Foundation コントロールの使用

WPF デザイナ