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

本文示範如何將樣式套用至 Windows Form 上裝載的 Windows Presentation Foundation (WPF) 控制項。

先決條件

若要完成這個逐步解說，您必須具有 Visual Studio。

建立專案

開啟 Visual Studio 並使用 Visual Basic 或 Visual C# 建立名稱為 StylingWpfContent 的新 Windows Forms 應用程式專案。

備註

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

建立 WPF 控制項類型

在將 WPF 控制項加入專案後，即可將它裝載至 ElementHost 控制項。

  1. 將新的 WPF UserControl 專案加入解決方案中。 使用控制項類型的預設名稱 UserControl1.xaml。 如需詳細資訊，請參閱 操作指南：在設計時於 Windows Forms 上建立新的 WPF 內容。

  2. 在設計檢視中，確定已選取UserControl1。

  3. 在 [屬性] 視窗中，將 Width 和 Height 屬性的值設定為 200。

  4. 將 System.Windows.Controls.Button 控制項加入 UserControl，並設置 Content 屬性的值為 取消。

  5. 將第二個 System.Windows.Controls.Button 控制項加入 UserControl，並將 Content 屬性的值設定為 OK。

  6. 建置專案。

套用樣式至 WPF 控制項

您可以套用不同的樣式至 WPF 控制項，以變更其外觀和行為。

  1. 在 Windows Forms 設計工具中開啟 Form1。

  2. 在 中，按兩下 ，在表單上建立 的執行個體。

    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. 請將上一步驟中定義的 樣式套用到 [取消] 按鈕，方法是將以下 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 Forms 設計工具中開啟 Form1。

  8. 新樣式已應用於按鈕控制元件。

  9. 在 [偵錯] 功能表中選取 [開始偵錯]，以執行應用程式。

  10. 按一下 [確定] 和 [取消] 按鈕，然後檢視其差異。

另請參閱

  • Last updated on