逐步解說:設定 WPF 內容的樣式
本逐步解說會示範如何將樣式套用到 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:在設計介面上選取並移動項目。
將 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。
新樣式會套用到按鈕控制項。
從 [偵錯] 功能表選取 [開始偵錯],以執行應用程式。
按一下 [確定] 和 [取消] 按鈕,並檢視其差異。