逐步解說：設定 WPF 內容的樣式

發行項
08/12/2011

本逐步解說會示範如何將樣式套用到 Windows Form 所裝載的 Windows Presentation Foundation (WPF) 控制項。

在這個逐步解說中，您會執行下列工作：

建立專案。
建立 WPF 控制項型別。
將樣式套用到 WPF 控制項。

注意事項
根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。若要變更設定，請從 [工具] 功能表中選取 [匯入和匯出設定]。如需詳細資訊，請參閱使用設定。

必要條件

您需要下列元件才能完成此逐步解說：

Visual Studio 2010。

建立專案

第一步是建立 Windows Form 專案。

注意事項
裝載 WPF 內容時，只支援 C# 和 Visual Basic 專案。

若要建立專案

在 Visual Basic 或 Visual C# 中，建立名為 StylingWpfContent 的新 Windows Form 應用程式專案。如需詳細資訊，請參閱 HOW TO：建立新的 Windows Form 應用程式專案。

建立 WPF 控制項型別

在將 WPF 控制項型別加入至專案後，即可將其裝載到 ElementHost 控制項中。

若要建立 WPF 控制項型別

將新的 WPF UserControl 專案加入至方案。使用控制項型別的預設名稱 UserControl1.xaml。如需詳細資訊，請參閱逐步解說：在設計階段建立 Windows Form 的新 WPF 內容。
在 [設計] 檢視下，確定已選取 UserControl1。如需詳細資訊，請參閱 HOW TO：在設計介面上選取並移動項目。
在 [屬性] 視窗中，將 Width 和 Height 屬性的值設定為 200。
將 System.Windows.Controls.Button 控制項加入至 UserControl，並將 Content 屬性的值設為 [取消]。
將第二個 System.Windows.Controls.Button 控制項加入至 UserControl，並將 Content 屬性的值設為 [確定]。
建置專案。

將樣式套用到 WPF 控制項

您可以將不同的樣式套用到 WPF 控制項變更其外觀與行為。

若要將樣式套用到 WPF 控制項

在 Windows Form 設計工具中開啟表單 Form1。
在 [工具箱] 中，按兩下 [UserControl1]，在表單上建立 UserControl1 的執行個體。

UserControl1 的執行個體裝載在名稱為 elementHost1 的新 ElementHost 控制項中。
在 elementHost1 的智慧標籤面板中，從下拉式清單中按一下 [編輯裝載內容]。

[UserControl1] 便會在 [WPF 設計工具] 中開啟。
在 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>

在 [取消] 按鈕的 <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 Form 設計工具中開啟表單 Form1。
新樣式會套用到按鈕控制項。
從 [偵錯] 功能表選取 [開始偵錯]，以執行應用程式。
按一下 [確定] 和 [取消] 按鈕，並檢視其差異。

請參閱

共用方式為