共用方式為

逐步解說：設定 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 屬性的值設定為 [確定]。

  6. 組建專案。

套用樣式至 WPF 控制項

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

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

  2. 在 [工具箱] 中，按兩下 UserControl1，在表單上建立 UserControl1 的執行個體。

    UserControl1 的執行個體裝載於名為 elementHost1 的新 ElementHost 控制項中。

  3. 在 elementHost1 的智慧標籤面板中，在下拉式清單中按一下 [編輯裝載內容]。

    隨即在 WPF 設計工具中開啟 UserControl1。

  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. 藉由插入 [取消] 按鈕<Button> 標籤中的下列 XAML，套用前一個步驟中定義的 SimpleButton 樣式到 [取消] 按鈕。

    Style="{StaticResource SimpleButton}

    按鈕宣告將類似下列的 XAML。

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

  6. 組建專案。

  7. 在 Windows Form 設計工具中開啟 Form1。

  8. 新的樣式會套用至按鈕控制項。

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

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

另請參閱