Windows Presentation Foundation 簡介

更新:2007 年 11 月

Windows Presentation Foundation (WPF) 是新一代的展示系統,可用以建立提供絕佳視覺效果使用者經驗的 Windows 用戶端應用程式。使用 WPF,您可以建立各種獨立和瀏覽器裝載應用程式。使用本系統的範例包括 Yahoo! MessengerNew York Times Reader 以及 Contoso Healthcare Sample Application (如下圖所示)。

Contoso Healthcare UI 範例

WPF 的建置核心是無關解析度的向量式圖形呈現引擎 (Vector-Based Rendering Engine),能夠善用新式圖形硬體的優點。WPF 利用一組全方位的應用程式開發功能延伸核心,這些功能包括可延伸標記語言 (XAML)、控制項、資料繫結、版面配置、2D 和立體圖形、動畫、樣式、範本、文件、媒體、文字以及印刷樣式。WPF 隨附 Microsoft .NET Framework 提供,因此您可以開發融入 .NET Framework 類別庫其他項目的應用程式。

本概觀適合新手讀者閱讀,其中涵蓋 WPF 的重要功能和概念。熟悉 WPF 的開發人員也可以利用本概觀做為複習 WPF 之用。

注意事項:

如需 .NET Framework 3.5 中新增和更新的 WPF 功能,請參閱 Windows Presentation Foundation 3.5 版的新功能

這個主題包含下列章節。

  • 使用 WPF 進行程式設計
  • 標記與程式碼後置
  • 應用程式
  • 控制項
  • 輸入與命令
  • 版面配置
  • 資料繫結
  • 圖形
  • 動畫
  • 媒體
  • 文字與印刷樣式
  • 文件
  • 自訂 WPF 應用程式
  • WPF 最佳作法
  • 摘要
  • 建議概觀和範例
  • 相關主題

使用 WPF 進行程式設計

WPF 是以 .NET Framework 型別子集的形式存在,這些型別多半位於 System.Windows 命名空間 (Namespace) 中。如果您以前曾使用 ASP.NET 和 Windows Form 等 Managed 技術,以 .NET Framework 開發程式,那麼您應該熟悉基本 WPF 程式設計的過程,包括具現化類別、設定屬性、呼叫方法以及處理事件,全都使用您偏好的 .NET Framework 程式語言,如 C# 或 Visual Basic。

為支援更強大的 WPF 功能並簡化程式設計作業,WPF 包含了更多強化屬性和事件的程式設計建構:「相依性屬性」(Dependency Property) 和「路由事件」(Routed Event)。如需相依性屬性的詳細資訊,請參閱相依性屬性概觀。如需路由事件的詳細資訊,請參閱路由事件概觀

標記與程式碼後置

WPF 提供了更多的程式設計加強功能來開發 Windows 用戶端應用程式。最明顯的加強功能就是能夠同時使用「標記」(Markup) 和「程式碼後置」(Code-Behind) 來開發應用程式,ASP.NET 開發人員應該很熟悉這種開發方式。一般來說,可延伸標記語言 (XAML) 標記是用來實作應用程式的外觀,而 Managed 程式語言 (程式碼後置) 則是用來實作其行為。將外觀和行為分開來有下列優點:

  • 降低開發和維護成本,因為外觀標記不會與行為程式碼緊密結合在一起。

  • 開發效率更高,因為在開發人員實作應用程式的行為時,設計師可以同時實作應用程式的外觀。

  • 可配合應用程式開發參與人員的需求,利用多項設計工具實作和共用 XAML 標記。Microsoft Expression Blend 是特別為設計師提供的工具,而 Visual Studio 2005 則以開發人員為對象。

  • 大幅簡化 WPF 應用程式的全球化和當地語系化作業 (請參閱 WPF 全球化和當地語系化概觀)。

下面將簡單介紹 WPF 標記和程式碼後置。如需此程式撰寫模型 (Programming Model) 的詳細資訊,請參閱 XAML 概觀程式碼後置和 XAML

標記

XAML 是以 XML 為基礎的標記語言,用來以宣告式的方式實作應用程式的外觀。通常用來建立視窗、對話方塊、頁面和使用者控制項,並在上面加入控制項、圖案和圖形。

下列範例便使用 XAML 實作包含單一按鈕之視窗的外觀。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button">Click Me!</Button>

</Window>

具體來說,這段 XAML 會分別使用 Window 和 Button 項目定義視窗和按鈕。每個項目會用屬性設定,例如使用 Window 項目的 Title 屬性指定視窗標題列文字。在執行階段,WPF 會將標記中定義的項目和屬性轉換成 WPF 類別的執行個體。例如,Window 項目會轉換成 Window 類別的執行個體,此類別的 Title 屬性 (Property) 是 Title 屬性 (Attribute) 的值。

下圖顯示的是前一個範例的 XAML 定義的使用者介面 (UI)。

包含按鈕的視窗

如需詳細資訊,請參閱 XAML 概觀

由於 XAML 是以 XML 為基礎,因此使用該語言撰寫的 UI 會組合在稱為「項目樹狀結構」(Element Tree) 的巢狀項目階層中。項目樹狀結構可提供邏輯而且直覺的方式建立和管理 UI。如需詳細資訊,請參閱 WPF 中的樹狀結構

程式碼後置

應用程式的主要行為是要實作回應使用者互動的功能,包括處理事件 (例如按一下功能表、工具列或按鈕) 和呼叫因應的商務邏輯和資料存取邏輯。在 WPF 中,此行為通常是在與標記相關聯的程式碼中實作。這種程式碼稱為程式碼後置。下列範例顯示前面範例的程式碼後置和更新的標記。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.AWindow"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>
Namespace SDKSample

    Partial Public Class AWindow
        Inherits System.Windows.Window

        Public Sub New()

            ' InitializeComponent call is required to merge the UI
            ' that is defined in markup with this class, including 
            ' setting properties and registering event handlers
            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

            ' Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!")

        End Sub

    End Class

End Namespace
using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class AWindow : Window
    {
        public AWindow()
        {
            // InitializeComponent call is required to merge the UI
            // that is defined in markup with this class, including 
            // setting properties and registering event handlers
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

在這個範例中,程式碼後置會實作 Window 類別的衍生類別。x:Class 屬性可用來建立標記與程式碼後置類別的關聯性。InitializeComponent 會從程式碼後置類別的建構函式 (Constructor) 呼叫,以便將標記中定義的 UI 與程式碼後置類別合併 (InitializeComponent 會在應用程式建立時自動產生,因此您無須手動實作它)。x:Class 和 InitializeComponent 的搭配使用,可確保您的實作不管在何時建立都能正確初始化。程式碼後置類別也會實作事件處理常式,來處理按鈕的 Click 事件。按一下按鈕時,事件處理常式會呼叫 MessageBox.Show 方法,顯示訊息方塊。

下圖顯示的是按一下按鈕的結果。

MessageBox

如需詳細資訊,請參閱程式碼後置和 XAML

應用程式

.NET Framework、System.Windows 以及標記和程式碼後置,共同構成了 WPF 應用程式開發作業的基礎。此外,WPF 還提供多樣化的功能來為使用者建立豐富的內容。為封裝此內容並以「應用程式」的形式提供給使用者,WPF 提供了統稱為「應用程式模型」(Application Model) 的型別和服務。此應用程式模型支援開發獨立和瀏覽器裝載的應用程式。

獨立應用程式

針對獨立應用程式,您可以使用 Window 類別建立從功能表列和工具列存取的視窗和對話方塊。下圖顯示的是有主視窗和對話方塊的獨立應用程式。

主視窗和對話方塊

此外,您也可以使用下列 WPF 對話方塊:MessageBoxOpenFileDialogSaveFileDialogPrintDialog

如需詳細資訊,請參閱 WPF 視窗概觀

瀏覽器裝載應用程式

針對瀏覽器裝載應用程式 (稱為 XAML 瀏覽器應用程式 (XBAP)),您可以建立頁面 (Page) 和頁面函式 (PageFunction<T>),以使用超連結 (Hyperlink 類別) 在其間巡覽。下圖顯示的是裝載於 Internet Explorer 7 的 XBAP 其中的頁面。

兩頁裝載的應用程式

WPF 應用程式可以裝載於 Microsoft Internet Explorer 6 和 Internet Explorer 7。WPF 提供下列兩個替代巡覽裝載選項:

  • Frame,可以在頁面或視窗中裝載巡覽內容區塊。

  • NavigationWindow,可以在整個視窗中裝載巡覽內容。

如需詳細資訊,請參閱巡覽概觀

Application 類別

XBAP 和獨立應用程式通常都會複雜到需要更多的應用程式範圍服務,包括啟動和存留期管理、共用屬性以及共用資源。Application 類別便封裝這些服務和其他項目,而且只要使用 XAML 就能實作,如下列範例所示。

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    StartupUri="MainWindow.xaml" />

這個標記是獨立應用程式的「應用程式定義」(Application Definition),會指示 WPF 建立 Application 物件,以在應用程式啟動時自動開啟 MainWindow

若要了解 Application 則必須知道一個重要概念:這個類別提供了獨立和瀏覽器裝載應用程式的通用支援平台。例如,瀏覽器裝載應用程式可以使用前面的 XAML,以在 XBAP 啟動時自動巡覽至某個頁面,如下列範例所示。

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    StartupUri="HomePage.xaml" />

如需詳細資訊,請參閱應用程式管理概觀

安全性

由於 XBAP 裝載於瀏覽器,安全性便十分重要。特別是,XBAP 會使用部分信任的安全性沙箱強制執行限制,這些限制低於或相當於 HTML 應用程式的限制。此外,每個可以從部分信任的 XBAP 安全執行的 HTML 功能都會使用完善的安全性程序測試,如 Windows Presentation Foundation 安全性策略 – 安全性工程所述。

儘管如此,大多數 WPF 功能都還是可以安全地從 XBAP 執行,如 Windows Presentation Foundation 部分信任安全性所述。

控制項

應用程式模型所實現的使用者經驗就是建構的控制項。在 WPF 中,「控制項」是一種 WPF 類別的統稱,其裝載於視窗或頁面、有使用者介面 (UI) 而且會實作某項行為。

如需詳細資訊,請參閱控制項概觀。如需入門範例,請參閱控制項程式庫範例

WPF 控制項列表

以下列出內建的 WPF 控制項。

輸入與命令

控制項是最常需要偵測和回應使用者輸入的程式設計元件。WPF 輸入系統同時使用直接和路由事件支援文字輸入、焦點管理和滑鼠定位。如需詳細資訊,請參閱輸入概觀

應用程式常會有複雜的輸入需求。WPF 提供命令系統,可將使用者輸入動作與回應這些動作的程式碼分開。如需詳細資訊,請參閱命令概觀

版面配置

建立 UI 時,一般會依位置和大小排列控制項,以形成版面配置。版面配置必須能夠隨著視窗大小和顯示設定改變。您無須撰寫程式碼來處理這些情況的版面配置,因為 WPF 提供了最佳可擴充式版面配置系統。

版面配置系統的基礎為相對定位,增加了可視視窗和顯示狀況因應改變的能力。此外,版面配置系統也會管理控制項之間的交涉來決定版面配置。交涉是兩個步驟的程序:首先,子控制項會告知父控制項它需要的位置和大小,再來,父控制項將告知子控制項它可以擁有的空間。

版面配置系統是透過基底 WPF 類別公開給子控制項。針對常見的版面配置,如格線、堆疊和停駐,WPF 包含幾種版面配置控制項:

  • Canvas:子控制項自行提供版面配置。

  • DockPanel:子控制項對齊至面板邊緣。

  • Grid:子控制項依表格列和表格欄放置。

  • StackPanel:子控制項垂直或水平堆疊。

  • VirtualizingStackPanel:子控制項會虛擬化,排列在水平或垂直方向的單行上。

  • WrapPanel:子控制項會依從左至右的順序放置,若一行容納不下所有控制項,會放到下一行。

下列範例使用 DockPanel 設定幾個 TextBox 控制項的版面配置。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.LayoutWindow"
    Title="Layout with the DockPanel" Height="143" Width="319">

  <!--DockPanel to layout four text boxes--> 
  <DockPanel>
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>
    <TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>
  </DockPanel>

</Window>

DockPanel 允許子 TextBox 控制項告知它如何排列控制項。為執行這項作業,DockPanel 會實作 Dock 屬性,此屬性會公開給子控制項,以允許每個子控制項指定停駐樣式。

注意事項:

父控制項實作供子控制項使用的屬性,是稱為「附加屬性」(Attached Property) 的一種 WPF 建構 (請參閱附加屬性概觀)。

下圖顯示前一個 XAML 標記範例所產生的結果。

DockPanel 頁面

如需詳細資訊,請參閱配置系統。如需入門範例,請參閱 WPF 配置圖庫範例

資料繫結

大多數應用程式都是開發來供使用者檢視和編輯資料。在 WPF 應用程式中,儲存和存取資料的功能已由 Microsoft SQL Server 和 ADO.NET 等技術提供。在存取資料並載入應用程式的 Managed 物件之後,WPF 應用程式的難題才算開始。基本上,這牽涉兩個步驟:

  1. 將資料從 Managed 物件複製到控制項,以在此顯示和編輯資料。

  2. 確定使用控制項對資料所做的變更會複製回 Managed 物件。

為簡化應用程式開發作業,WPF 提供資料繫結引擎來自動執行這些步驟。這個資料繫結引擎的核心是 Binding 類別,負責將控制項 (繫結目標) 繫結到資料物件 (繫結來源)。下圖說明這項關係。

基本資料繫結圖表

下列範例將示範如何將 TextBox 繫結至自訂 Person 物件的執行個體。Person 實作顯示在下列程式碼中。

Namespace SDKSample

    Class Person

        Private _name As String = "No Name"

        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property

    End Class

End Namespace
namespace SDKSample
{
    class Person
    {
        string name = "No Name";

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }
}

下列標記會將 TextBox 繫結至自訂 Person 物件的執行個體。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.DataBindingWindow">


...


<!-- Bind the TextBox to the data source (TextBox.Text to Person.Name) -->
<TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />


...


</Window>
Imports System.Windows ' Window

Namespace SDKSample

    Partial Public Class DataBindingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            ' Create Person data source
            Dim person As Person = New Person()

            ' Make data source available for binding
            Me.DataContext = person

        End Sub

    End Class

End Namespace
using System.Windows; // Window

namespace SDKSample
{
    public partial class DataBindingWindow : Window
    {
        public DataBindingWindow()
        {
            InitializeComponent();

            // Create Person data source
            Person person = new Person();

            // Make data source available for binding
            this.DataContext = person;
        }
    }
}

在這個範例中,Person 類別會在程式碼後置中具現化,並設為 DataBindingWindow 的資料內容。在標記中,TextBoxText 屬性會繫結至 Person.Name 屬性 (使用 "{Binding ... }" XAML 語法)。這段 XAML 會指示 WPF 將 TextBox 控制項繫結至 Person 物件,這個物件儲存在視窗的 DataContext 屬性中。

WPF 資料繫結引擎還提供其他支援,包括驗證、排序、篩選和群組。此外,若標準 WPF 控制項顯示的 UI 不適當,資料繫結也支援使用資料範本建立自訂 UI 用於繫結的資料。

如需詳細資訊,請參閱資料繫結概觀。如需入門範例,請參閱資料繫結示範

圖形

WPF 加入了一組多樣化、可擴充以及彈性的圖形功能,優點包括:

  • 無關解析度和裝置的圖形。WPF 圖形系統的基本度量單位是與裝置無關的像素,其大小為 1/96 吋,不受實際螢幕解析度所影響,並能提供無關解析度和裝置的轉譯基礎。每個與裝置無關的像素都會自動縮放,以配合轉譯所在系統的 Dots Per Inch (DPI) 設定。

  • 改善精度。WPF 座標系統是使用雙精度浮點數測量,而非單精度。轉換和透明度的值也以雙精度表示。WPF 也支援廣泛色域圖 (scRGB) 並提供整合支援,管理來自不同色彩空間的輸入。

  • 進階圖形和動畫支援。WPF 可管理動畫場景,簡化了圖形的程式設計,讓您無須擔心場景處理、轉譯迴圈和雙線性內插。此外,WPF 點擊測試支援和完整的 Alpha 複合支援。

  • 硬體加速。WPF 圖形系統可利用圖形硬體,將 CPU 使用率降至最低。

2-D 圖案

WPF 提供常見的向量繪製 2D 圖案庫,如下圖所示的矩形和橢圓形。

橢圓形和矩形

圖案的功能不只是顯示而已,而會實作控制項許多應有的功能,包括鍵盤和滑鼠輸入。下列範例顯示正在處理 EllipseMouseUp 事件。

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.EllipseEventHandlingWindow"
    Title="Click the Ellipse">
    <Ellipse Name="clickableEllipse" Fill="Blue" MouseUp="clickableEllipse_MouseUp" />
</Window>
Imports System.Windows ' Window, MessageBox
Imports System.Windows.Input ' MouseButtonEventArgs

Namespace SDKSample

    Public Class EllipseEventHandlingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub clickableEllipse_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            MessageBox.Show("You clicked the ellipse!")
        End Sub

    End Class

End Namespace
using System.Windows; // Window, MessageBox
using System.Windows.Input; // MouseButtonEventHandler

namespace SDKSample
{
    public partial class EllipseEventHandlingWindow : Window
    {
        public EllipseEventHandlingWindow()
        {
            InitializeComponent();
        }

        void clickableEllipse_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Display a message
            MessageBox.Show("You clicked the ellipse!");
        }
    }
}

下圖顯示的是前面的程式碼產生的內容。

包含「您已經按一下這個橢圓形!」文字的視窗

如需詳細資訊,請參閱 WPF 中圖案和基本繪圖概觀。如需入門範例,請參閱圖案項目範例

2-D 幾何

WPF 提供的 2D 圖案包括一組標準基本圖案。不過,您可能需要建立自訂圖案,以利設計自訂的 UI。為此,WPF 提供了幾何。下圖顯示使用幾何建立自訂圖案的方法,此圖案可直接做為筆刷使用進行繪製,或用於裁剪其他圖案或控制項。

Path 物件可用來繪製封閉或開放的圖案、多個圖案甚至曲線圖案。

Geometry 物件可用來裁剪、點擊測試和轉譯 2-D 圖形資料。

Path 的各種用法

如需詳細資訊,請參閱幾何概觀。如需入門範例,請參閱幾何範例

2-D 效果

這是 WPF2D 功能子集,包含視覺效果,例如漸層、點陣圖、繪圖、使用視訊繪製、旋轉、縮放及傾斜。這些都是使用筆刷完成;下圖顯示部分範例。

不同筆刷的圖例

如需詳細資訊,請參閱 WPF 筆刷概觀。如需入門範例,請參閱筆刷範例

3-D 呈現

WPF 也包含立體立體呈現功能,這可與 2D 圖形整合,建立更令人興奮和有趣的 UI。例如,下圖顯示將 2D 影像轉換為立體圖案顯示。

Visual3D 範例螢幕擷取畫面

如需詳細資訊,請參閱立體圖形概觀。如需入門範例,請參閱 立體實體範例

動畫

WPF 動畫支援可以讓您進行放大、搖晃、旋轉和淡出的控制項設定,營造有趣的畫面轉換等多種效果。您可以將大多數的 WPF 類別顯示為動畫,包括自訂類別在內。下圖顯示正在執行的簡單動畫。

立方體動畫的影像

如需詳細資訊,請參閱動畫概觀。如需入門範例,請參閱動畫範例圖庫

媒體

運用視聽媒體是呈現豐富網頁內容的絕佳手法。為此,WPF 提供了影像、視訊和音訊的特殊支援。

影像

大多數應用程式都會用到影像,而 WPF 提供了幾種使用影像的方式。下圖顯示 UI 有一個包含縮圖影像的清單方塊。選取縮圖時,影像會顯示成完整大小。

縮圖影像與完整影像

如需詳細資訊,請參閱影像處理概觀。如需入門範例,請參閱 WPF 相片檢視器示範

視訊和音訊

MediaElement 控制項可以播放視訊和音訊,而且具備彈性,可做為自訂媒體播放程式的基礎。下列 XAML 標記會實作媒體播放程式。

<MediaElement 
  Name="myMediaElement" 
  Source="media/wpf.wmv" 
  LoadedBehavior="Manual" 
  Width="350" Height="250" />

下圖中的視窗顯示正在執行的 MediaElement 控制項。

具有視訊與音訊的 MediaElement 控制項

如需詳細資訊,請參閱 WPF 圖形、動畫和媒體概觀。如需入門範例,請參閱媒體庫

文字與印刷樣式

為有助於高品質文字呈現,WPF 提供下列功能:

  • OpenType 字型支援。

  • ClearType 加強功能。

  • 利用硬體加速產生高效能。

  • 將文字與媒體、圖形和動畫整合。

  • 國際字型支援和後援機制。

下圖將文字與圖形整合,顯示如何應用文字裝飾。

搭配各種文字裝飾的文字

如需詳細資訊,請參閱 Windows Presentation Foundation 中的印刷樣式。如需入門範例,請參閱印刷樣式範例

文件

WPF 提供原生支援來使用三種類型的文件:非固定格式文件、固定格式文件和 XML Paper Specification (XPS) 文件。WPF 也提供服務來建立、檢視、管理、標註、封裝和列印文件。

非固定格式文件

非固定格式文件的設計用意是希望可以最佳化檢視效果與文件可讀性;若您在變更視窗大小及檢視器設定時,以動態方式調整並重新排列內容,便可達到這些效果。下列 XAML 標記顯示 FlowDocument 的定義。

<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Paragraph FontSize="18" FontWeight="Bold">Flow Document</Paragraph>

  <Paragraph>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
  </Paragraph>


...


</FlowDocument>

下列範例示範如何將非固定格式文件載入 FlowDocumentReader,以供檢視、搜尋和列印。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.FlowDocumentReaderWindow"
    Title="Flow Document Reader">
  <FlowDocumentReader Name="flowDocumentReader" />
</Window>
Imports System.Windows 'Window
Imports System.Windows.Documents 'FlowDocument
Imports System.IO 'FileStream, FileMode
Imports System.Windows.Markup 'XamlReader

Namespace SDKSample

    Public Class FlowDocumentReaderWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
            Using stream1 As FileStream = New FileStream("AFlowDocument.xaml", _
                FileMode.Open, FileAccess.Read)
                Dim document1 As FlowDocument = _
                    TryCast(XamlReader.Load(stream1), FlowDocument)
                Me.flowDocumentReader.Document = document1
            End Using
        End Sub

    End Class

End Namespace
using System.Windows; // Window
using System.Windows.Documents; // FlowDocument
using System.IO; // FileStream, FileMode
using System.Windows.Markup; // XamlReader

namespace SDKSample
{
    public partial class FlowDocumentReaderWindow : System.Windows.Window
    {
        public FlowDocumentReaderWindow()
        {
            InitializeComponent();

            // Open the file that contains the FlowDocument
            using (FileStream xamlFile = new FileStream("AFlowDocument.xaml", 
                FileMode.Open, FileAccess.Read))
            {
                // Parse the file with the XamlReader.Load method
                FlowDocument content = XamlReader.Load(xamlFile) as FlowDocument;

                // Set the Document property to the parsed FlowDocument object
                this.flowDocumentReader.Document = content;
            }
        }
    }
}

下列範例顯示結果。

FlowDocumentReader 控制項中的 FlowDocument 文件

如需詳細資訊,請參閱非固定格式文件概觀。如需入門範例,請參閱 FlowDocument 屬性範例

固定格式文件

固定格式文件適合需要精確「所見即所得」(WYSIWYG) 呈現效果的設計情況,特別是列印文件時。固定格式文件一般用於桌上出版、文書處理、表單版面配置等,這些都必須嚴格遵循原始的頁面設計。

無論裝置會以何種方式呈現文件樣式,固定格式文件仍然會以配面實際的設計方式,精確編排文件。例如,在 96 Dots Per Inch (DPI) 畫面上顯示的固定格式文件,不論是列印到 600 dpi 雷射印表機或 4800 dpi 相紙輸出機,輸出結果仍然會維持在 96 dpi。儘管文件的品質會根據各裝置的性能而定,但版面配置永遠相同。

如需詳細資訊,請參閱 Windows Presentation Foundation 中的文件

XPS 文件

XML Paper Specification (XPS) 文件是以 WPF 的固定格式文件為基礎。XPS 文件會使用 XML 結構描述來描述,基本上就是經過分頁編排的電子紙張。XPS 是跨平台的開放文件格式,特別設計用來建立、共用、列印和封存分頁文件。XPS 技術的重要功能如下:

  • 將 XPS 文件封裝為 ZipPackage 檔案,以符合開放式封裝慣例規格 (OPC)。

  • 裝載於獨立和瀏覽器架構的應用程式。

  • 從 WPF 應用程式手動產生和處理 XPS 文件。

  • 以最大輸出裝置品質為目標,呈現精確不失真。

  • Windows Vista 列印多工緩衝處理。

  • 直接將文件路由至 XPS 相容印表機。

  • UI 與 DocumentViewer 整合。

下圖是 DocumentViewer 所顯示的 XPS 文件。

DocumentViewer 控制項中的 XPS 文件

DocumentViewer 也可讓使用者變更檢視、搜尋和列印 XPS 文件。

如需詳細資訊,請參閱 Windows Presentation Foundation 中的文件。如需入門範例,請參閱建立 XPS 文件範例

標註

標註是指加入文件的附註或註解,以標記資訊或強調顯示有興趣的項目,以供日後參照。雖然在書面文件寫上附註很容易,但要在電子文件上「寫」附註的話,通常功能有限或無法使用此功能。不過,在 WPF 中,則提供了標註系統,可支援自黏便箋和反白顯示。此外,這些標註可套用到裝載於 DocumentViewer 控制項的文件,如下圖所示。

附註樣式設定

如需詳細資訊,請參閱附註概觀。如需入門範例,請參閱文件序列化範例

封裝

應用程式可以透過 WPF System.IO.Packaging API 將資料、內容和資源統整為一份 ZIP 文件,讓使用者可以方便攜帶、輕鬆散發並且容易存取。其中可以加入數位簽章,以驗證封裝所包含的項目,並確認加上簽章的項目是否未遭竄改或修改。您也可以使用版權管理來加密封裝,以限制存取受保護的資訊。

如需詳細資訊,請參閱 Windows Presentation Foundation 中的文件。如需範例,請參閱封裝範例

列印

.NET Framework 包含列印子系統,WPF 在此系統加入了增強列印系統控制的支援。列印加強功能包括下列各項:

  • 即時安裝遠端列印伺服器和佇列。

  • 動態探索印表機功能。

  • 動態設定印表機選項。

  • 列印工作重設路徑和優先順序。

XPS 文件也有重要的效能加強功能。現有的 Microsoft Windows 繪圖裝置介面 (GDI) 列印路徑通常需要兩次轉換:

  • 第一次將文件轉換為列印處理器格式,例如加強型中繼檔 (EMF) 。

  • 第二次轉換為印表機的頁面描述語言,例如 Printer Control Language (PCL) 或 PostScript。

不過,因為 XPS 檔案格式的其中一個元件就是列印處理器語言和頁面描述語言,所以 XPS 文件可以省去這兩次的轉換工作。這項支援有助於減少緩衝處理檔案大小和網路印表機負載。

如需詳細資訊,請參閱列印概觀。如需入門範例,請參閱列印 XPS 文件

自訂 WPF 應用程式

到目前為止,我們已討論了開發應用程式的核心 WPF 建置組塊。您可以使用應用程式模型裝載和提供主要由控制項組成的應用程式內容。為簡化控制項在 UI 中的排列配置,也為確保排列配置在視窗大小和顯示設定更動下不變,您可以使用 WPF 版面配置系統。由於大多數應用程式都允許使用者與資料互動,您可以使用資料繫結,減少 UI 與資料整合的作業。若要加強應用程式的視覺外觀,您可以使用 WPF 提供的多樣化圖形、動畫和媒體支援。最後,如果您的應用程式處理文字和文件,則可以使用 WPF 文字、印刷樣式、文件、標註、封裝和列印功能。

不過,具備基本概念通常還不足以建立和管理真正特別和具有視覺上絕佳使用者體驗的應用程式。標準 WPF 控制項可能無法與所要的應用程式外觀相整合。資料可能無法以最有效的方式顯示。應用程式的整體使用者經驗可能不適合 Windows 佈景主題的預設外觀及操作。在許多方面,展示技術對於視覺延伸能力的需求,就如同任何其他延伸能力一樣不能或缺。

因此,WPF 提供各種機制來創造獨特的使用者體驗,包括涵蓋控制項、觸發程序、控制項與資料範本、樣式、UI 資源、佈景主題與面板等的豐富內容模型。

內容模型

大多數 WPF 控制項的主要用途都是顯示內容。在 WPF 中,可組成控制項內容的項目類型和數目稱為控制項的「內容模型」(Content Model)。部分控制項可能包含單一項目和內容型別,例如,TextBox 的內容是字串值,此值會指派給 Text 屬性。下列範例會設定 TextBox 的內容。

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">


...


<TextBox Text="This is the content of a TextBox." />


...


</Window>

下圖顯示結果。

包含文字的 TextBox 控制項

不過,其他控制項則可包含不同內容型別的多個項目;Button 的內容是由 Content 屬性指定,可包含多種項目,包括配置控制項、文字、影像和圖案。下列範例顯示 Button,內容有 DockPanelLabelBorderMediaElement

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ButtonContentWindow"
    Title="Button Content">


...


<Button Margin="20">
  <!-- Button Content -->
  <DockPanel Width="200" Height="180">
    <Label DockPanel.Dock="Top" HorizontalAlignment="Center">Click Me!</Label>
    <Border Background="Black" BorderBrush="Yellow" BorderThickness="2" 
      CornerRadius="2" Margin="5">
      <MediaElement Source="media/wpf.wmv" Stretch="Fill" />
    </Border>
  </DockPanel>
</Button>


...


</Window>

下圖顯示這個按鈕的內容。

包含多種類型內容的按鈕

如需各控制項所支援內容類型的詳細資訊,請參閱 WPF 內容模型

觸發程序

雖然 XAML 標記主要用來實作應用程式的外觀,但您也可以使用 XAML 實作應用程式行為的某些外觀。例如,您可以使用觸發程序,根據使用者的互動變更應用程式的外觀。如需詳細資訊,請參閱設定樣式和範本中的<觸發程序>。

控制項樣板

WPF 控制項的預設 UI 通常是由其他控制項和圖案組成。例如,Button 是由 ButtonChrome 和 ContentPresenter 控制項所組成。ButtonChrome 提供標準按鈕外觀,而 ContentPresenter 則顯示 Content 屬性指定的按鈕內容。

有時控制項的預設外觀可能與應用程式的整體外觀不一致。在這種情況下,您可以使用 ControlTemplate 變更控制項的 UI 外觀,而不變更其內容和行為。

例如,下列範例示範如何使用 ControlTemplate 變更 Button 的外觀。

<Window 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.ControlTemplateButtonWindow"
  Title="Button with Control Template" Height="158" Width="290">

  <!-- Button using an ellipse -->
  <Button Content="Click Me!" Click="button_Click">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Margin="5">
          <Ellipse Stroke="DarkBlue" StrokeThickness="2">
            <Ellipse.Fill>
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
              </RadialGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <ContentPresenter Name="content" HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Button.Template>

  </Button>

</Window>
Imports System.Windows ' Window, RoutedEventArgs, MessageBox

Namespace SDKSample

    Public Class ControlTemplateButtonWindow
        Inherits Window

        Public Sub New()

            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            MessageBox.Show("Hello, Windows Presentation Foundation!")
        End Sub

    End Class

End Namespace
using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class ControlTemplateButtonWindow : Window
    {
        public ControlTemplateButtonWindow()
        {
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

在這個範例中,預設按鈕 UI 已由 Ellipse 取代,改成深藍色框線並使用 RadialGradientBrush 填滿。ContentPresenter 控制項會顯示 Button 的內容,即 "Click Me!"。當按下 Button 時,仍會引發 Click 事件做為 Button 控制項的預設行為的一部分。下圖顯示結果。

橢圓形按鈕和第二個視窗

如需詳細資訊,請參閱 ControlTemplate。如需入門範例,請參閱使用 ControlTemplates 設定樣式範例

資料範本

控制項樣板可讓您指定控制項的外觀,而資料範本則可讓您指定控制項內容的外觀。資料範本常用來加強繫結資料的顯示方式。下圖顯示 ListBox 的預設外觀,這個清單方塊繫結至一組 Task 物件,每項工作都有名稱、描述和優先順序。

具有預設外觀的清單方塊

預設外觀是 ListBox 應有的外觀。不過,每項工作的預設外觀只包含工作名稱。若要顯示工作名稱、描述和優先順序,則必須使用 DataTemplate 變更 ListBox 控制項繫結清單項目的預設外觀。下列 XAML 會定義一個 DataTemplate,然後使用 ItemTemplate 屬性套用到每項工作。

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">


...


<!-- Data Template (applied to each bound task item in the task collection) -->
<DataTemplate x:Key="myTaskTemplate">
  <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2" 
    CornerRadius="2" Padding="5" Margin="5">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
      <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
      <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
      <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
      <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
      <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
    </Grid>
  </Border>  
</DataTemplate>


...


<!-- Data template is specified by the ItemTemplate attribute -->
<ListBox 
  ItemsSource="{Binding}" 
  ItemTemplate="{StaticResource myTaskTemplate}" 
  HorizontalContentAlignment="Stretch" 
  IsSynchronizedWithCurrentItem="True" 
  Margin="5,0,5,5" />


...


</Window>

下圖顯示這段程式碼的結果。

使用資料範本的清單方塊

請注意,ListBox 會保留行為和整體外觀,只變更了清單方塊顯示內容的外觀。

如需詳細資訊,請參閱資料範本化概觀。如需入門範例,請參閱資料範本化範例簡介

樣式

樣式可讓開發人員和設計師標準化產品的特定外觀。WPF 提供強大的樣式模型,這是 Style 項目的基礎。下列範例會建立樣式,將視窗中每個 Button 的背景色彩設為 Orange。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">


...


<!-- Style that will be applied to all buttons -->
<Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="Orange" />
  <Setter Property="BorderBrush" Value="Crimson" />
  <Setter Property="FontSize" Value="20" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Margin" Value="5" />
</Style>


...


<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>

<!-- This labe will not have the style applied to it -->
<Label>Don't Click Me!</Label>

<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>


...


</Window>

由於此樣式以所有 Button 控制項為目標,因此樣式會自動套用到視窗中的所有按鈕,如下圖所示。

兩個橙色按鈕

如需詳細資訊,請參閱設定樣式和範本。如需入門範例,請參閱設計樣式和範本化簡介的範例

資源

應用程式中的所有控制項,從字型和背景色彩,到控制項樣板、資料範本和樣式,都應該擁有相同的外觀。您可以使用 WPF 的使用者介面 (UI) 資源支援,將這些資源封裝在單一位置供重複使用。

下列範例會定義 ButtonLabel 共用的背景色彩。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ResourcesWindow"
    Title="Resources Window">

  <!-- Define window-scoped background color resource -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>


...


<!-- Button background is defined by window-scoped resource -->
<Button Background="{StaticResource defaultBackground}">One Button</Button>

<!-- Label background is defined by window-scoped resource -->
<Label Background="{StaticResource defaultBackground}">One Label</Label>


...


</Window>

這個範例會使用 Window.Resources 屬性項目實作背景色彩資源。此資源可供 Window 的所有子項使用。資源範圍有多種,包括以下根據解析的順序列出的各項:

  1. 個別控制項 (使用繼承 FrameworkElement.Resources 屬性)。

  2. WindowPage (也使用繼承 FrameworkElement.Resources 屬性)。

  3. Application (使用 Application.Resources 屬性)。

由於有多種範圍,可讓您靈活定義和共用資源。

除了直接將資源與特定範圍產生關聯,您也可以另外使用 ResourceDictionary 封裝一個或多個資源,再由應用程式的其他部分參考。例如,下列範例會在資源字典定義預設背景色彩。

<ResourceDictionary 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Define background color resource -->
  <SolidColorBrush x:Key="defaultBackground" Color="Red" />

  <!-- Define other resources -->


...


</ResourceDictionary>

下列範例則參考前面範例中定義的資源字典,以供整個應用程式共用。

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.App">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BackgroundColorResources.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>


...


</Application>

資源和資源字典是 WPF 佈景主題和面板支援的基礎。

如需詳細資訊,請參閱資源概觀。如需入門範例,請參閱應用程式資源範例

佈景主題和面板

從視覺角度來看,佈景主題會定義 Windows 及其中執行之應用程式的整體外觀。Windows 本身內建了幾種佈景主題。例如,Microsoft Windows XP 同時提供 Windows XP 和 Windows 傳統佈景主題,而 Windows Vista 則包含 Windows Vista 和 Windows 傳統佈景主題。佈景主題定義的外觀會設成 WPF 應用程式的預設外觀。不過,WPF 並未直接與 Windows 佈景主題整合。由於 WPF 的外觀是由樣板所定義,因此 WPF 會針對每種熟知的 Windows 佈景主題各包含一個樣板,包括 Aero (Windows Vista)、Classic (Microsoft Windows 2000)、Luna (Microsoft Windows XP) 以及 Royale (Microsoft Windows XP Media Center Edition 2005)。這些佈景主題會封裝成資源字典,若應用程式找不到資源,就會解析這些資源字典。許多應用程式都會使用這些佈景主題來定義視覺外觀,因此,與 Windows 外觀一致,將有助於使用者容易熟悉更多的應用程式。

另一方面,使用者對某些應用程式的體驗也不全然來自標準佈景主題。例如,Microsoft Windows Media Player 處理音訊和視訊資料,最好就能有不同樣式顯示給使用者。這類 UI 常提供應用程式限定的自訂佈景主題。這些佈景主題稱為「面板」(Skin),設有面板的應用程式通常會提供勾點 (Hook),讓使用者自訂面板的各部分。Microsoft Windows Media Player 有幾種預先製作好的面板以及一組協力廠商面板。

WPF 中的佈景主題和面板可以很容易使用資源字典定義。以下顯示範例面板定義。

<!-- Blue Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Blue" />
  </Style>


...


</ResourceDictionary>
<!-- Blue Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Blue" />
  </Style>


...


</ResourceDictionary>
<!-- Yellow Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Yellow" />
  </Style>


...


</ResourceDictionary>
<!-- Yellow Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Yellow" />
  </Style>


...


</ResourceDictionary>

如需詳細資訊,請參閱設定樣式和範本中的<共用資源和佈景主題>。如需入門範例,請參閱面板化應用程式範例

自訂控制項

雖然 WPF 提供許多自訂支援,但您有時可能還是會發現現有的 WPF 控制項不符應用程式或使用者的需求。可能發生的原因有:

  • 無法自訂現有 WPF 實作的外觀和操作來建立所需的 UI。

  • 現有 WPF 實作不支援 (或不容易支援) 所需的行為。

不過,這時您可以利用三種 WPF 模型的其中一個建立新的控制項。每種模型都有適用的情況,您的自訂控制項必須從特定 WPF 基底類別衍生。這三種模型如下:

  • 使用者控制項模型。衍生自 UserControl 的自訂控制項,並由一個或多個控制項組成。

  • 控制項模型。衍生自 Control 的自訂控制項,可用來建立實作,此實作會利用樣板將行為與外觀分開來,就如同大多數的 WPF 控制項一樣。衍生自 Control 可讓您在建立自訂 UI 時,擁有比使用者控制項更多的自由,不過也可能更費力。

  • 架構項目模型。衍生自 FrameworkElement 的自訂控制項,其外觀由自訂呈現邏輯定義 (而非樣板)。

下列範例顯示衍生自 UserControl 的自訂數字上下控制項。

<UserControl
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.NumericUpDown">

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Value text box -->
    <Border BorderThickness="1" BorderBrush="Gray" Margin="2" Grid.RowSpan="2" 
      VerticalAlignment="Center" HorizontalAlignment="Stretch">
      <TextBlock Name="valueText" Width="60" TextAlignment="Right" Padding="5"/>
    </Border>

    <!-- Up/Down buttons -->
    <RepeatButton Name="upButton" Click="upButton_Click" Grid.Column="1" 
      Grid.Row="0">Up</RepeatButton>
    <RepeatButton Name="downButton" Click="downButton_Click" Grid.Column="1" 
      Grid.Row="1">Down</RepeatButton>

  </Grid>

</UserControl>
imports System 'EventArgs
imports System.Windows 'DependencyObject, DependencyPropertyChangedEventArgs, 
                       ' FrameworkPropertyMetadata, PropertyChangedCallback, 
                       ' RoutedPropertyChangedEventArgs
imports System.Windows.Controls 'UserControl

Namespace SDKSample

    ' Interaction logic for NumericUpDown.xaml
    Partial Public Class NumericUpDown
        Inherits System.Windows.Controls.UserControl

        'NumericUpDown user control implementation


...



    End Class

End Namespace
using System; // EventArgs
using System.Windows; // DependencyObject, DependencyPropertyChangedEventArgs,
                      // FrameworkPropertyMetadata, PropertyChangedCallback, 
                      // RoutedPropertyChangedEventArgs
using System.Windows.Controls; // UserControl

namespace SDKSample
{
    public partial class NumericUpDown : UserControl
    {
        // NumericUpDown user control implementation


...


    }
}

下一個範例則顯示將使用者控制項加入 Window 所需的 XAML。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.UserControlWindow"
    xmlns:local="clr-namespace:SDKSample" 
    Title="User Control Window">


...


<!-- Numeric Up/Down user control -->
<local:NumericUpDown />


...


</Window>

下圖顯示裝載於 Window 的 NumericUpDown 控制項。

自訂 UserControl

如需自訂控制項的詳細資訊,請參閱控制項撰寫概觀。如需入門範例,請參閱控制項自訂範例

WPF 最佳作法

如同任何開發平台,WPF 可有許多不同的使用方式,來達到想要的結果。為確保 WPF 應用程式提供所需的使用者體驗並符合一般使用者的需求,針對協助工具、全球化、當地語系化以及效能有建議的最佳作法。如需詳細資訊,請參閱下列各項:

摘要

WPF 是全方位的展示技術,可用以建立各種視覺效果出色的用戶端應用程式。本簡介提供了 WPF 重要功能概覽。

下一步就是著手建立 WPF 應用程式!

在建立應用程式時,您可以隨時回到本簡介複習主要功能,以及查看本簡介所述功能的詳細資訊參考。

建議概觀和範例

本簡介提及下列的概觀和範例。

概觀

立體圖形概觀

協助工具最佳作法

動畫概觀

附註概觀

應用程式管理概觀

命令概觀

控制項撰寫概觀

控制項概觀

資料繫結概觀

資料範本化概觀

相依性屬性概觀

Windows Presentation Foundation 中的文件

WPF 中的樹狀結構

非固定格式文件概觀

幾何概觀

筆墨入門

影像處理概觀

輸入概觀

配置系統

巡覽概觀

列印概觀

資源概觀

路由事件概觀

WPF 中圖案和基本繪圖概觀

Windows Presentation Foundation 中的印刷樣式

Windows Presentation Foundation 安全性

WPF 視窗概觀

WPF 筆刷概觀

WPF 內容模型

WPF 全球化和當地語系化概觀

WPF 圖形、動畫和媒體概觀

範例

立體實體範例

協助工具範例

動畫範例圖庫

應用程式資源範例

筆刷範例

控制項自訂範例

控制項程式庫範例

建立 XPS 文件範例

資料繫結示範

數位筆跡範例

文件序列化範例

FlowDocument 屬性範例

幾何範例

資料範本化範例簡介

設計樣式和範本化簡介的範例

媒體庫

封裝範例

列印 XPS 文件

圖案項目範例

WPF 中圖案和基本繪圖概觀

面板化應用程式範例

使用 ControlTemplates 設定樣式範例

印刷樣式範例

WPF 配置圖庫範例

WPF 相片檢視器示範

請參閱

概念

Windows Presentation Foundation 使用者入門

Windows Presentation Foundation 社群意見回應