共用方式為

逐步解說：樣式 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. 在 [ 屬性] 視窗中，將 和 Height 屬性的值 Width 設定為 200 。

  4. System.Windows.Controls.Button將 控制項新增至 ， UserControl 並將 屬性的值 Content 設定為 Cancel 。

  5. 將第二 System.Windows.Controls.Button 個控制項新增至 ， UserControl 並將 屬性的值 Content 設定為 [確定 ]。

  6. 組建專案。

將樣式套用至 WPF 控制項

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

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

  2. 在 [工具箱 ] 中 ，按兩下 UserControl1 以在表單上建立 的 UserControl1 實例。

    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. 將 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 Form 設計工具中開啟 Form1。

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

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

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

另請參閱