WPF’ye genel bakış

Makale
09/13/2021
Okumak için 10 dakika

Windows Presentation Foundation (WPF), görsel açıdan etkileyici kullanıcı deneyimleri ile Windows için masaüstü istemci uygulamaları oluşturmanıza olanak tanır.

Contoso sağlık Kullanıcı arabirimi örneği

WPF 'nin çekirdeği, modern grafik donanımının avantajlarından yararlanmak için oluşturulmuş, çözünürlükten bağımsız ve vektör tabanlı bir işleme altyapısıdır. WPF, Extensible Application Markup Language (XAML), denetimler, veri bağlama, düzen, 2B ve 3B grafikler, animasyon, stiller, şablonlar, belgeler, medya, metin ve tipografi içeren kapsamlı bir uygulama geliştirme özellikleri kümesiyle Core 'u genişletir. WPF .NET 'in bir parçası olduğundan, .NET API 'nin diğer öğelerini birleştiren uygulamalar oluşturabilirsiniz.

Bu genel bakış, Newcomers 'e yöneliktir ve WPF 'in temel yeteneklerini ve kavramlarını ele alır.

WPF ile program

WPF, ad alanında bulunan (en fazla bölüm için) .NET türlerinin bir alt kümesi olarak mevcuttur System.Windows . daha önce ASP.NET ve Windows Forms gibi yönetilen teknolojiler kullanarak .net ile uygulamalar oluşturduysanız, temel WPF programlama deneyimi tanıdık gelmelidir; C# veya Visual Basic gibi en sevdiğiniz .NET programlama dilini kullanarak sınıfları örnekleyin, özellikleri ayarlar, yöntemleri çağırır ve olayları işleyebilirsiniz.

WPF, özellikleri ve olayları geliştiren ek programlama yapılarını içerir: bağımlılık özellikleri ve yönlendirilmiş olaylar.

Biçimlendirme ve arka plan kodu

WPF, ASP.NET geliştiricilerin tanıdık olması gereken bir deneyim olan hem biçimlendirme hem de arka plan kodu kullanarak bir uygulama geliştirmenize olanak tanır. Genellikle XAML işaretlemesini kullanarak, davranışını uygulamak için yönetilen programlama dillerini (arka plan kod) kullanırken bir uygulamanın görünümünü uygulayın. Bu görünüm ve davranışın ayrımı aşağıdaki avantajlara sahiptir:

Görünüme özgü biçimlendirme davranışa özgü kodla sıkı bir şekilde bağlı olmadığından geliştirme ve bakım maliyetleri azaltılır.
Geliştiriciler uygulamanın davranışını uygulayan geliştiricilerle aynı anda bir uygulamanın görünümünü uygulayabildiğinden geliştirme daha etkilidir.
WPF uygulamaları için Genelleştirme ve yerelleştirme basitleştirilmiştir.

İşaretleme

XAML, uygulamanın görünümünü bildirimli olarak uygulayan XML tabanlı bir biçimlendirme dilidir. Genellikle Windows, iletişim kutuları, sayfalar ve Kullanıcı denetimleri oluşturmak ve bunları denetimler, şekiller ve grafiklerle doldurmanız için kullanırsınız.

Aşağıdaki örnek, tek bir düğme içeren bir pencerenin görünümünü uygulamak için XAML kullanır:

<Window
    xmlns="http://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>

Özellikle, bu XAML Window sırasıyla ve öğelerini kullanarak bir pencere ve bir düğme tanımlar Button . Her öğe, Window Title pencerenin başlık çubuğu metnini belirtmek için öğenin özniteliği gibi özniteliklerle yapılandırılır. Çalışma zamanında WPF, biçimlendirme içinde tanımlanan öğeleri ve öznitelikleri WPF sınıflarının örneklerine dönüştürür. Örneğin, Window öğesi Window Title özelliği özniteliğin değeri olan bir sınıfının örneğine dönüştürülür Title .

Aşağıdaki şekilde, önceki örnekte XAML tarafından tanımlanan Kullanıcı arabirimi (UI) gösterilmektedir:

Düğme içeren pencere

XAML, XML tabanlı olduğundan, onunla oluşturduğunuz Kullanıcı arabirimi bir öğe ağacıolarak bilinen iç içe geçmiş öğelerin hiyerarşisinde toplanır. Öğe ağacı, Usıs oluşturmak ve yönetmek için mantıksal ve sezgisel bir yol sağlar.

Arka plan kodu

Bir uygulamanın ana davranışı, olayları işleme (örneğin, bir menü, araç çubuğu veya düğme) ve yanıt olarak iş mantığı ve veri erişim mantığını çağırma dahil olmak üzere kullanıcı etkileşimlerine yanıt veren işlevselliği uygulamaktır. WPF 'de, bu davranış biçimlendirme ile ilişkili kodda uygulanır. Bu tür bir kod, arka plan kodu olarak bilinir. Aşağıdaki örnek, önceki örnekteki ve arka plan kodundaki güncelleştirilmiş biçimlendirmeyi gösterir:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

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!");
        }
    }
}

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

Bu örnekte, arka plan kodu sınıfından türetilen bir sınıf uygular Window . x:ClassÖzniteliği, biçimlendirmeyi arka plan kod sınıfıyla ilişkilendirmek için kullanılır. InitializeComponent arka plan kod sınıfı ile biçimlendirme içinde tanımlanan Kullanıcı arabirimini birleştirmek için, kod arkasındaki sınıfın oluşturucusundan çağrılır. ( InitializeComponent uygulamanızın oluşturulduğu zaman sizin için oluşturulur, bu nedenle el ile uygulamanız gerekmez.) Birleşimi ve uygulamanızın x:Class InitializeComponent oluşturulduğu her seferinde doğru başlatıldığından emin olun. Arka plan kod sınıfı, düğmenin olayı için bir olay işleyicisi de uygular Click . Düğmeye tıklandığında, olay işleyicisi yöntemini çağırarak bir ileti kutusu gösterir System.Windows.MessageBox.Show .

Aşağıdaki şekilde düğme tıklandığında sonuç gösterilmektedir:

Bir MessageBox

Denetimler

Uygulama modeli tarafından sunulan kullanıcı deneyimleri, oluşturulan denetimlerdir. WPF 'de Denetim , bir pencere veya sayfada BARıNDıRıLAN bir WPF sınıfı kategorisi için geçerli olan ve bir kullanıcı arabirimine sahip olan ve bazı davranışları uygulayan bir şemsiye terimidir.

Daha fazla bilgi için bkz. denetimler.

İşleve göre WPF denetimleri

Yerleşik WPF denetimleri burada listelenmiştir:

Düğmeler: Button ve RepeatButton .
Veri görüntüleme: DataGrid , ListView , ve TreeView .
Tarih görüntüleme ve seçim: Calendar ve DatePicker .
İletişim kutuları: OpenFileDialog , PrintDialog , ve SaveFileDialog .
Dijital mürekkep: InkCanvas ve InkPresenter .
Belgeler: DocumentViewer , FlowDocumentPageViewer , FlowDocumentReader , FlowDocumentScrollViewer ve StickyNoteControl .
Giriş: TextBox , RichTextBox , ve PasswordBox .
Düzen: Border , BulletDecorator ,,, Canvas DockPanel Expander , Grid , GridView , GridSplitter , GroupBox , Panel , ResizeGrip , Separator , ScrollBar , ScrollViewer , StackPanel , Thumb , Viewbox , VirtualizingStackPanel ,, Window ve WrapPanel .
Medya: Image , MediaElement , ve SoundPlayerAction .
Menüler: ContextMenu , Menu , ve ToolBar .
Gezinti: Frame ,,, Hyperlink Page NavigationWindow ve TabControl .
Seçim: CheckBox , ComboBox , ListBox , RadioButton , ve Slider .
Kullanıcı bilgileri: AccessText , Label , Popup , ProgressBar , StatusBar , TextBlock , ve ToolTip .

Giriş ve komutlar

Denetimler çoğu zaman Kullanıcı girişini algılar ve yanıtlar. WPF giriş sistemi metin girişi, odak yönetimi ve fare konumlandırmayı desteklemek için hem doğrudan hem de yönlendirilmiş olayları kullanır.

Uygulamalar genellikle karmaşık giriş gereksinimlerine sahiptir. WPF, Kullanıcı giriş eylemlerini bu eylemlere yanıt veren koddan ayıran bir komut sistemi sağlar.

Layout

Bir kullanıcı arabirimi oluşturduğunuzda, bir düzen oluşturmak için denetimlerinizi konuma ve boyuta göre düzenleyin. Herhangi bir düzenin önemli bir gereksinimi, pencere boyutu ve görüntüleme ayarlarındaki değişikliklere uyum sağlar. Bu koşullarda bir düzeni uyarlamak için kodu yazmanızı zorlamak yerine WPF, sizin için birinci sınıf bir Genişletilebilir düzen sistemi sağlar.

Düzen sisteminin temel taşı, değişen pencere ve görüntüleme koşullarına uyum sağlayan göreli konumlardır. Ayrıca, Düzen sistemi, düzeni belirleme denetimleri arasındaki anlaşmayı yönetir. Anlaşma iki adımlı bir işlemdir: ilk olarak, bir denetim üst öğeye gereken konumu ve boyutu söyler; İkincisi, üst öğe denetime ne kadar boşluk yapabileceğini söyler.

Düzen sistemi, temel WPF sınıfları aracılığıyla alt denetimlere açıktır. WPF, yığınlama ve yerleştirme gibi ortak düzenler için çeşitli düzen denetimleri içerir:

Canvas: Alt denetimler kendi düzenlerini sağlar.
DockPanel: Alt denetimler panelin kenarlarına hizalanır.
Grid: Alt denetimler satırlara ve sütunlara göre konumlandırılır.
StackPanel: Alt denetimler dikey ya da yatay olarak yığılır.
VirtualizingStackPanel: Alt denetimler sanallaştırılır ve yatay veya dikey olarak yönelimli tek bir satırda düzenlenir.
WrapPanel: Alt denetimler soldan sağa düzende konumlandırılır ve geçerli satırda alanın izin verdiğinden daha fazla denetim olduğunda sonraki satıra kaydırılır.

Aşağıdaki örnek, DockPanel çeşitli denetimleri düzenlemek için bir kullanır TextBox :

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 Alt TextBox denetimlerin nasıl düzenlendiğini anlatmasını sağlar. Bunu yapmak için, DockPanel Dock bir yuva stili belirtmesini sağlamak üzere alt denetimlere açık olan iliştirilmiş bir özellik uygular.

Not

Alt denetimler tarafından kullanılmak üzere bir üst denetim tarafından uygulanan bir özellik, iliştirilmiş özelliğiolarak ADLANDıRıLAN bir WPF yapısıdır.

Aşağıdaki şekilde, önceki örnekteki XAML biçimlendirmesinin sonucu gösterilmektedir:

DockPanel sayfası

Veri bağlama

Birçok uygulama, kullanıcılara verileri görüntüleme ve düzenleme araçlarını sağlamak için oluşturulur. WPF uygulamaları için, veri depolama ve erişme işi SQL Server ve ADO .net gibi teknolojiler tarafından zaten sunulmaktadır. Verilere erişildikten ve uygulamanın yönetilen nesnelerine yüklendikten sonra, WPF uygulamalarına yönelik sabit çalışma başlar. Temelde, bu iki şeyi içerir:

Yönetilen nesnelerden verileri, verilerin görüntülenebildiği ve düzenlenebileceği denetimlere kopyalama.
Denetimler kullanılarak verilerde yapılan değişikliklerin, yönetilen nesnelere geri kopyalanmasını sağlamak.

WPF, uygulama geliştirmeyi basitleştirmek için, bu adımları otomatik olarak gerçekleştirmek üzere bir veri bağlama altyapısı sağlar. Veri bağlama altyapısının çekirdek birimi, Binding işi bir denetimi (bağlama hedefi) bir veri nesnesine (bağlama kaynağı) bağlamak olan sınıftır. Bu ilişki aşağıdaki şekilde gösterildiği gibi:

Temel veri bağlama diyagramı

Sonraki örnek, özel bir nesnenin TextBox örneğine nasıl bağlanacağını Person gösterir. Uygulama Person aşağıdaki kodda gösterilmiştir:

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; }
        }
    }
}

Aşağıdaki işaretleme, nesnesini TextBox özel bir nesnenin örneğine Person bağlar:

 <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://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;
        }
    }
}

Bu örnekte, Person sınıfı arka kodda örneği ve için veri bağlamı olarak DataBindingWindow ayarlanır. işaretlemesinde, Text özelliğinin TextBox özelliğine Person.Name bağlıdır (" {Binding ... } " XAML söz dizimi kullanılarak). Bu XAML, WPF'ye TextBox denetimi pencerenin Person özelliğinde depolanan nesneye DataContext bağlamayı söyler.

WPF veri bağlama altyapısı doğrulama, sıralama, filtreleme ve gruplama gibi ek destek sağlar. Ayrıca veri bağlama, standart WPF denetimleri tarafından görüntülenen kullanıcı arabirimi uygun olmayan bağlı veriler için özel kullanıcı arabirimi oluşturmak üzere veri şablonlarının kullanımını destekler.

Daha fazla bilgi için bkz. Veri bağlamaya genel bakış.

Grafikler

WPF, aşağıdaki avantajlara sahip olan kapsamlı, ölçeklenebilir ve esnek bir grafik özellikleri kümesi sunar:

Çözümlemeden bağımsız ve cihazdan bağımsız grafikler. WPF grafik sisteminde temel ölçüm birimi, gerçek ekran çözünürlüğüne bakılmaksızın bir inçin 1/96'sı olan cihazdan bağımsız pikseldir ve çözümden bağımsız ve cihazdan bağımsız işleme için temel sağlar. Cihazdan bağımsız her piksel, üzerinde işleme yapılan sistemin nokta/inç (dpi) ayarına göre otomatik olarak ölçeklendirilir.
Geliştirilmiş duyarlık. WPF koordinat sistemi, tek duyarlık yerine çift duyarlıklı kayan nokta sayılarıyla ölçülür. Dönüştürmeler ve opaklık değerleri de çift duyarlıklı olarak ifade eder. WPF ayrıca geniş renk oyunlarını (scRGB) destekler ve farklı renk alanlarından gelen girişleri yönetmek için tümleşik destek sağlar.
Gelişmiş grafikler ve animasyon desteği. WPF, animasyon sahnelerini sizin için yöneterek grafik programlamayı basitleştiriyor; sahne işleme, işleme döngüleri ve çift ilişkilendirme konusunda endişelenmenize gerek yoktur. WpF ayrıca isabet testi desteği ve tam alfa birleştirme desteği de sağlar.
Donanım hızlandırma. WPF grafik sistemi, CPU kullanımını en aza indirmek için grafik donanımdan faydalanır.

2D şekiller

WPF, aşağıdaki çizimde gösterilen dikdörtgenler ve üç nokta gibi vektör çizimi 2B şekillere sahip ortak bir kitaplık sağlar:

Üç nokta ve dikdörtgenler

Şekillerin ilgi çekici bir özelliği, bunların yalnızca görüntülenmek için değil; şekiller, klavye ve fare girişi dahil olmak üzere denetimlerden beklediğiniz özelliklerin birçoğuna sahiptir. Aşağıdaki örnekte, MouseUp işleyen bir Ellipse olayı gösterir:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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!");
        }
    }
}

Aşağıdaki şekilde, önceki kod tarafından üretilenler ve bu kodlar aşağıdaki şekildedir:

"Üç nokta kutusuna tıkladısınız" metninin yer!

Daha fazla bilgi için bkz. WPF'ye genel bakış içinde şekiller ve temel çizim.

2D geometriler

WPF tarafından sağlanan 2B şekiller, standart temel şekiller kümesine sahiptir. Ancak özelleştirilmiş kullanıcı arabiriminin tasarımını kolaylaştırmak için özel şekiller oluşturmanız gerekir. Bu amaçla WPF geometriler sağlar. Aşağıdaki şekilde, doğrudan çizilen, fırça olarak kullanılan veya diğer şekilleri ve denetimleri kırpmak için kullanılan özel bir şekil oluşturmak için geometrilerin kullanımı göstermektedir.

Path nesneleri kapalı veya açık şekiller, birden çok şekil ve hatta eğri şekiller çizmek için kullanılabilir.

Geometry nesneleri kırpma, isabet testi ve 2B grafik verilerini işleme için kullanılabilir.

Bir yolun çeşitli kullanımları

Daha fazla bilgi için bkz. Geometriye genel bakış.

2D etkileri

WPF 2B yeteneklerinin bir alt kümesi gradyanlar, bit eşlemler, çizimler, videolarla tablo, döndürme, ölçeklendirme ve çekme gibi görsel etkiler içerir. Bunların hepsi fırçalarla elde edilir; Aşağıdaki şekilde bazı örnekler verilmiştir:

Farklı fırçaların çizimi

Daha fazla bilgi için bkz. WPF fırçalara genel bakış.

3B işleme

WPF ayrıca daha heyecan verici ve ilginç kullanıcı arabirimleri oluşturulmasını sağlayan 2B grafiklerle tümleştirilmiş 3B işleme özellikleri de içerir. Örneğin, aşağıdaki şekilde 3D şekillere işlenmiş 2D görüntüler yer alır:

Visual3D örnek ekran

Daha fazla bilgi için bkz. 3D grafiklere genel bakış.

Animasyon

WPF animasyon desteği, ilginç sayfa geçişleri oluşturmak ve daha fazlasını oluşturmak için denetimlerin büyümesine, salnarak, döndürmeye ve soldurmaya olanak sağlar. Çoğu WPF sınıfına, hatta özel sınıflara bile animasyon sızabilirsiniz. Aşağıdaki şekilde, basit bir animasyonun nasıl iş içinde olduğu gösterir:

Animasyonlu küpün görüntüleri

Daha fazla bilgi için bkz. Animasyona genel bakış.

Medya

Zengin içerik iletmenin bir yolu, sesli ve görsel medya kullanımıdır. WPF görüntüler, video ve ses için özel destek sağlar.

Görüntüler

Görüntüler çoğu uygulama için yaygındır ve WPF bunları kullanmanın çeşitli yollarını sağlar. Aşağıdaki şekilde, küçük resim görüntüleri içeren bir liste kutusu içeren bir kullanıcı arabirimi gösterilir. Küçük resim seçildiğinde, görüntü tam boyutlu olarak gösterilir.

Küçük resim görüntüleri ve tam-boyutu resmi

Daha fazla bilgi için bkz. Görüntülemeye genel bakış.

Video ve ses

Denetim hem video hem de ses oynatabilen bir denetimdir ve özel bir medya MediaElement oynatıcının temeli olacak kadar esnektir. Aşağıdaki XAML işaretlemesi bir medya oynatıcısı kullanır:

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

Aşağıdaki şekildeki pencere, MediaElement denetimin nasıl bir işlemde olduğunu gösterir:

Ses ve video ile MediaElement denetimi

Daha fazla bilgi için bkz. Grafikler ve multimedya.

Metin ve tipografi

WPF, yüksek kaliteli metin işlemeyi kolaylaştırmak için aşağıdaki özellikleri sunar:

OpenType yazı tipi desteği.
ClearType geliştirmeleri.
Donanım hızlandırmadan yararlanan yüksek performans.
Medya, grafikler ve animasyon ile metin tümleştirmesi.
Uluslararası yazı tipi desteği ve geri dönüş mekanizmaları.

Grafiklerle metin tümleştirmenin bir gösterimi olarak, aşağıdaki şekilde metin süslemelerinin uygulaması yer almaktadır:

Çeşitli metin süslemeleri ile metin

Daha fazla bilgi için bkz. Windows Presentation Foundation.

WPF uygulamalarını özelleştirme

Bu noktaya kadar, uygulama geliştirmeye yönelik temel WPF yapı taşlarını gördünüz. Uygulama modelini, genellikle denetimlerden oluşan uygulama içeriğini barındırmak ve teslim etmek için kullanırsiniz. Kullanıcı arabiriminde denetimlerin düzenini basitleştirmek ve düzenlemenin pencere boyutu ve görüntüleme ayarlarında yapılan değişikliklere karşı korun olduğundan emin olmak için WPF düzen sistemini kullanırsınız. Uygulamaların çoğu kullanıcıların verilerle etkileşim kurmasına izin vermesine neden olduğundan, kullanıcı arabiriminizi verilerle tümleştirme çalışmanızı azaltmak için veri bağlamayı kullanırsiniz. Uygulamanın görsel görünümünü geliştirmek için WPF tarafından sağlanan kapsamlı grafik, animasyon ve medya desteği aralığını kullanırsiniz.

Ancak genellikle temel bilgiler gerçekten benzersiz ve görsel olarak etkileyici bir kullanıcı deneyimi oluşturmak ve yönetmek için yeterli değildir. Standart WPF denetimleri, uygulamanın istenen görünümüyle tümleştirileyebilebilir. Veriler en etkili şekilde görüntülenmeyebilirsiniz. Uygulamanın genel kullanıcı deneyimi, temaların varsayılan genel görünüm ve genel Windows uygun olabilir. Birçok şekilde sunu teknolojisinin, diğer genişletilebilirlik türlerinin yanı sıra görsel genişletilebilirlik de gerekir.

Bu nedenle WPF; denetimler, tetikleyiciler, denetim ve veri şablonları, stiller, kullanıcı arabirimi kaynakları, temalar ve görünümler için zengin bir içerik modeli de dahil olmak üzere benzersiz kullanıcı deneyimleri oluşturmak için çeşitli mekanizmalar sağlar.

İçerik modeli

WPF denetimlerinin çoğunluğunun ana amacı içeriği görüntülemektir. WPF'de, denetimin içeriğini oluşturan öğe türü ve sayısı denetimin içerik modeli olarak adlandırılır. Bazı denetimler tek bir öğe ve içerik türü içerebilir; Örneğin, bir TextBox içeriğinin özelliğine atanan bir dize Text değeridir. Aşağıdaki örnek, bir içeriğini TextBox ayarlar:

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

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

Aşağıdaki şekilde sonucu gösterir:

Metin içeren bir TextBox denetimi

Ancak diğer denetimler, farklı içerik türlerine sahip birden çok öğe içerebilir; özelliği tarafından belirtilen Button bir içeriğini Content düzen denetimleri, metin, görüntüler ve şekiller gibi çeşitli öğeler içerebilir. Aşağıdaki örnekte , , Button , ve içeren içeriği olan bir DockPanel Label Border MediaElement gösterir:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

Aşağıdaki şekilde, bu düğmenin içeriği gösterir:

Birden çok içerik türü içeren bir düğme

Çeşitli denetimler tarafından desteklenen içerik türleri hakkında daha fazla bilgi için bkz. WPF içerik modeli.

Tetikleyiciler

XAML işaretlemenin ana amacı bir uygulamanın görünümünü uygulamak olsa da, bir uygulamanın davranışının bazı yönlerini uygulamak için XAML de kullanabilirsiniz. Bir örnek, kullanıcı etkileşimlerine göre bir uygulamanın görünümünü değiştirmek için tetikleyicilerin kullanımıdır. Daha fazla bilgi için bkz. Stiller ve şablonlar.

Denetim şablonları

WPF denetimleri için varsayılan kullanıcı arabirimleri genellikle diğer denetimlerden ve şekillerden oluşturulur. Örneğin, bir Button hem hem de ButtonChrome denetimlerden ContentPresenter oluşur. ButtonChrome, standart düğme görünümünü sağlarken, ContentPresenter düğmenin içeriğini özelliği tarafından belirtilen şekilde Content görüntüler.

Bazen denetimin varsayılan görünümü, bir uygulamanın genel görünümüyle birlikte gizli olabilir. Bu durumda, içeriğini ve davranışını değiştirmeden denetimin kullanıcı ControlTemplate arabiriminin görünümünü değiştirmek için kullanabilirsiniz.

Aşağıdaki örnekte, kullanarak görünümünün nasıl Button değiştirln olduğu ControlTemplate gösterir:

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

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!");
        }
    }
}

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

Bu örnekte, varsayılan düğme kullanıcı arabirimi, koyu mavi kenarlıklı ve kullanılarak doldurulmuş Ellipse bir ile RadialGradientBrush değiştirilmiştir. Denetim ContentPresenter , Button "Click Me!" öğesinin içeriğini görüntüler tık Button olduğunda, olay Click denetimin varsayılan davranışının bir Button parçası olarak yine de uzer. Sonuç aşağıdaki şekilde gösterilmiştir:

Eliptik düğme ve ikinci bir pencere

Veri şablonları

Denetim şablonu denetimin görünümünü belirtmenize olanak sağlarken, veri şablonu denetimin içeriğinin görünümünü belirtmenize olanak sağlar. Veri şablonları, bağlı verilerin görüntülenmelerini geliştirmek için sıklıkla kullanılır. Aşağıdaki şekilde, her görevin bir adı, açıklaması ve önceliği olan bir nesne koleksiyonuna bağlı olan için varsayılan ListBox Task görünümü gösterir:

Varsayılan görünüme sahip bir liste kutusu

Varsayılan görünüm, bir 'den beklediğiniz ListBox görünümdedir. Ancak, her görevin varsayılan görünümü yalnızca görev adını içerir. Görev adını, açıklamasını ve önceliğini göstermek için, denetimin bağlı liste öğelerinin varsayılan görünümü ListBox kullanılarak değiştir DataTemplate gerekir. Aşağıdaki XAML, özniteliği kullanılarak DataTemplate her göreve uygulanan böyle bir ItemTemplate tanımlar:

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">
  <Window.Resources>
    <!-- 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>
  </Window.Resources>

  <!-- UI -->
  <DockPanel>
    <!-- Title -->
    <Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>

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

 </DockPanel>
</Window>

Aşağıdaki şekilde, bu kodun etkisi gösterir:

Veri şablonu kullanan liste kutusu

, davranışını ve genel görünümünü korur; yalnızca liste kutusu tarafından ListBox görüntülenen içeriğin görünümü değişmiştir.

Daha fazla bilgi için bkz. Veri templating'e genel bakış.

Stiller

Stiller, geliştiricilerin ve tasarımcıların ürünlerinde belirli bir görünümü standart hale getirebilirsiniz. WPF, temel öğesi olan güçlü bir stil modeli Style sağlar. Aşağıdaki örnek, bir pencere üzerinde her için arka plan rengini olarak Button ayarleyen bir stil Orange oluşturur:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">
    
    <Window.Resources>
        <!-- Style that will be applied to all buttons for this window -->
        <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>
    </Window.Resources>
    <StackPanel>

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

        <!-- This label 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>
        
    </StackPanel>
</Window>

Bu stil tüm denetimleri hedefleyeli olduğundan stil, aşağıdaki şekilde gösterildiği gibi pencere üzerindeki Button tüm düğmelere otomatik olarak uygulanır:

İki turuncu düğme

Daha fazla bilgi için bkz. Stiller ve şablonlar.

Kaynaklar

Bir uygulamadaki denetimler aynı görünümü paylaşarak yazı tiplerinden ve arka plan renklerinden şablonları, veri şablonlarını ve stilleri denetlemeye kadar her şeyi içerebilir. WpF'nin kullanıcı arabirimi kaynakları desteğini kullanarak bu kaynakları yeniden kullanmak üzere tek bir konumda kapsüllemeniz gerekir.

Aşağıdaki örnek, ve tarafından paylaşılan ortak bir arka plan rengini Button Label tanımlar:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

Bu örnek, özellik öğesini kullanarak bir arka plan rengi Window.Resources kaynağı uygulanır. Bu kaynak, 'nin tüm children'ları tarafından Window kullanılabilir. Aşağıdakiler de dahil olmak üzere çeşitli kaynak kapsamları çözümlenemedikleri sırayla listelenmiştir:

Tek bir denetim (devralınmış özelliğini System.Windows.FrameworkElement.Resources kullanarak).
A Window veya Page (devralınmış özelliği de System.Windows.FrameworkElement.Resources kullanılarak).
Bir Application (özelliğini System.Windows.Application.Resources kullanarak).

Çeşitli kapsamlar, kaynaklarınızı tanımlama ve paylaşma yollarına göre esneklik sağlar.

Kaynaklarınızı belirli bir kapsamla doğrudan birlikte kullanmaya alternatif olarak, uygulamanın diğer kısımlarında başvurulacak ayrı bir kaynak kullanarak bir veya daha fazla ResourceDictionary kaynağı paketebilirsiniz. Örneğin, aşağıdaki örnek kaynak sözlüğünde varsayılan arka plan rengini tanımlar:

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

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

  <!-- Define other resources -->
</ResourceDictionary>

Aşağıdaki örnek, bir uygulama arasında paylaştırılacak şekilde önceki örnekte tanımlanan kaynak sözlüğüne başvurur:

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

Kaynaklar ve kaynak sözlükleri, temalar ve dış görünümler için WPF desteğinin temelini sağlar.

Daha fazla bilgi için bkz. Kaynaklar.

Özel denetimler

WPF bir çok özelleştirme desteği sağlar, ancak mevcut WPF denetimlerinin, uygulama veya kullanıcılarının ihtiyaçlarını karşılamama durumuyla karşılaşabilirsiniz. Bu durum aşağıdakiler olduğunda oluşabilir:

Size gereken kullanıcı arabirimi, mevcut WPF uygulamalarına ait görünüm ve görünüm özelleştirerek oluşturulamaz.
Size gereken davranış, mevcut WPF uygulamaları tarafından desteklenmiyor (veya kolayca desteklenmiyor).

Ancak bu noktada üç WPF modelden birini kullanarak yeni bir denetim oluşturabilirsiniz. Her model belirli bir senaryoyu hedefler ve özel denetiminizin belirli bir WPF temel sınıfından türetilenini gerektirir. Üç model burada listelenmiştir:

Kullanıcı Denetim Modeli. Özel denetim, ve UserControl denetimlerinden türetildi ve bir veya daha fazla denetimden oluşur.
Denetim Modeli. Özel bir denetim, WPF denetimlerinin çoğuna çok benzer şekilde şablon kullanarak davranışlarını görünümlerinden ayıran uygulamalar oluşturmak için ve Control türetilen ve kullanılır. türetme, kullanıcı denetimlerine göre özel kullanıcı arabirimi oluşturma konusunda daha fazla serbestlik Control sağlar, ancak daha fazla çaba gerektirir.
Framework Öğesi Modeli. Özel denetim, görünümünün FrameworkElement özel işleme mantığı (şablonlar tarafından değil) tarafından tanımlandığı zamanlardan türetildi.

Aşağıdaki örnek, 'den türeten özel bir sayısal yukarı/aşağı denetimi UserControl gösterir:

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

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
    }
}

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

Aşağıdaki örnek, kullanıcı denetimine dahil etmek için gereken XAML'i Window göstermektedir:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

Aşağıdaki şekilde, içinde NumericUpDown barındırılan denetimi Window gösterir:

Özel bir UserControl

Özel denetimler hakkında daha fazla bilgi için bkz. Denetim yazmaya genel bakış.

WPF en iyi yöntemleri

Her geliştirme platformunda olduğu gibi WPF de istenen sonucu elde etmek için çeşitli yollarla kullanılabilir. WPF uygulamalarınızı gerekli kullanıcı deneyimini sağlamanın ve genel olarak hedef kitlenin taleplerini karşılamanın bir yolu olarak erişilebilirlik, genelleştirme, yerelleştirme ve performans için önerilen en iyi yöntemler vardır. Daha fazla bilgi için bkz.

Sonraki adımlar

WPF'nin temel özelliklerini inceledik. Şimdi ilk WPF uygulamanızı oluşturma zamanı geldi.

Adım adım kılavuz: İlk WPF masaüstü uygulamam