WPF’ye genel bakış

Makale
07/07/2023

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

Contoso Healthcare UI sample

WPF'nin çekirdeği, modern grafik donanımlarından yararlanmak için oluşturulmuş, çözünürlük bağımsız ve vektör tabanlı bir işleme altyapısıdır. WPF, çekirdeği Genişletilebilir Uygulama Biçimlendirme Dili (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 genişletir. WPF, .NET’in bir parçasıdır ve bu sayede .NET API’sinin diğer öğelerini kapsayan uygulamalar oluşturabilirsiniz.

WPF’nin temel özelliklerinin ve kavramlarının ele alındığı bu genel bakış belgesi yeni başlayanlara yöneliktir.

WPF ile programlama

WPF, ad alanında (çoğunlukla) bulunan .NET türlerinin System.Windows bir alt kümesi olarak bulunur. Daha önce ASP.NET ve Windows Forms gibi yönetilen teknolojileri kullanarak .NET ile uygulama derlediyseniz temel WPF programlama deneyimi tanıdık olmalıdır; C# veya Visual Basic gibi sık kullandığınız .NET programlama dilini kullanarak sınıfların örneğini oluşturur, özellikleri ayarlar, yöntemleri çağırır ve olayları işlersiniz.

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

İşaretleme ve arka plan kod

WPF, ASP.NET geliştiricilerin aşina olması gereken bir deneyim olan işaretleme ve arka plan kod kullanarak uygulama geliştirmenize olanak tanır. Bir uygulamanın davranışını uygulamaya almak için yönetilen programlama dillerini (arka plan kod) kullanırken görünümünü uygulamak için genellikle XAML işaretlemesi kullanırsınız. Bu görünüm ve davranış ayrımı aşağıdaki avantajları sunar:

Görünüme özgü işaretleme davranışa özgü kodla sıkı bir şekilde birleştirilmediğinden geliştirme ve bakım maliyetleri azalır.
Tasarımcılar, uygulamanın davranışını uygulamaya alan geliştiricilerle aynı anda uygulamanın görünümünü uygulamaya alabildiğinden geliştirme süreci daha verimlidir.
WPF uygulamaları için genelleştirme ve yerelleştirme süreçleri basitleştirilmiştir.

Markup

XAML, bir uygulamanın görünümünü bildirim temelli olarak uygulayan XML tabanlı bir işaretleme dilidir. Bunu genellikle pencereler, iletişim kutuları, sayfalar ve kullanıcı denetimleri oluşturmak ve bunları denetimler, şekiller ve grafiklerle doldurmak için kullanırsınız.

Aşağıdaki örnekte XAML kullanılarak tek bir düğme içeren bir pencerenin görünümünü uygulamaya alınmıştı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 sırasıyla ve öğelerini kullanarak Window bir pencere ve Button düğme tanımlar. Her öğe, pencerenin başlık çubuğu metnini belirtmek için Window öğesinin Title özniteliği gibi özniteliklerle yapılandırılır. Çalışma zamanında WPF, işaretlemede tanımlanan öğeleri ve öznitelikleri WPF sınıflarının örneklerine dönüştürür. Örneğin Window öğesi, Title özelliği Title özniteliğinin değeri olan bir Window sınıfı örneğine dönüştürülür.

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

A window that contains a button

XAML XML tabanlı olduğundan, onunla oluşturduğunuz kullanıcı arabirimi, öğe ağacı olarak bilinen iç içe öğeler hiyerarşisinde bir araya getirilir. Öğe ağacı, kullanıcı arabirimlerini oluşturmak ve yönetmek için mantıksal ve sezgisel bir yöntem sunar.

Arka plan kod

Uygulamanın temel davranışı, olayları işleme (örneğin, bir menüye, araç çubuğuna veya düğmeye tıklama) ve yanıt olarak iş mantığı ile veri erişim mantığını çağırma gibi kullanıcı etkileşimlerine yanıt veren işlevselliği uygulamaktır. WPF’de bu davranış, işaretlemeyle ilişkili kodda uygulanır. Bu kod türü, arka plan kod olarak bilinir. Aşağıdaki örnekte yukarıdaki örneğin güncelleştirilmiş işaretlemesi ve arka plan kod gösterilmektedir:

<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 planda kod, sınıfından Window türetilen bir sınıf uygular. x:Class özniteliği, işaretlemeyi arka planda kod sınıfıyla ilişkilendirmek için kullanılır. InitializeComponent, işaretlemede tanımlanan kullanıcı arabirimini arkadaki kod sınıfıyla birleştirmek için arka plan kod sınıfının oluşturucusundan çağrılır. (InitializeComponent uygulamanız oluşturulduğunda sizin için oluşturulur ve bu nedenle el ile uygulamanız gerekmez.) ve birleşimi x:ClassInitializeComponent , her oluşturulduğunda uygulamanızın doğru şekilde başlatıldığından emin olun. Arka planda kod sınıfı, düğmenin Click olayı için bir olay işleyicisi de uygular. Düğmeye tıklandığında, olay işleyicisi yöntemini çağırarak System.Windows.MessageBox.Show bir ileti kutusu gösterir.

Aşağıdaki şekilde düğmeye tıklandığında elde edilen sonuç gösterilmiştir:

A MessageBox

Denetimler

Uygulama modeli tarafından sunulan kullanıcı deneyimleri, oluşturulmuş denetimlerdir. WPF'de denetim, bir pencerede veya sayfada barındırılan, kullanıcı arabirimine sahip olan ve bazı davranışlar uygulayan WPF sınıflarının kategorisine uygulanan bir şemsiye terimdir.

Daha fazla bilgi için bkz. Denetimler.

İşleve göre WPF denetimleri

Yerleşik WPF denetimleri aşağıda listelenmiştir:

Düğmeler: Button ve RepeatButton.
Veri Görüntüleme: DataGrid, ListView ve TreeView.
Tarih Görüntüleme ve Seçme: 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ğunlukla kullanıcı girişini algılar ve uygun yanıtla karşılık verir. WPF giriş sistemi metin girişini, odak yönetimini ve fare konumlandırmasını desteklemek için hem doğrudan hem de yönlendirilmiş olayları kullanır.

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

Düzen

Kullanıcı arabirimi oluşturma süreci, denetimlerinizi konuma ve boyuta göre yapılandırarak bir düzen oluşturmayı kapsar. Her türlü düzenin önemli gereksinimlerinden biri, pencere boyutu ve görüntüleme ayarlarındaki değişikliklere uyum sağlamaktır. WPF, bu durumlarda bir düzeni uyarlamak için sizi kod yazmaya zorlamak yerine birinci sınıf, genişletilebilir bir düzen sistemi sunar.

Düzen sisteminin temeli, değişen pencere ve görüntü koşullarına uyum sağlama becerisini artıran göreli konumlandırmadır. Ayrıca düzen sistemi, düzeni belirlemek için denetimler arasındaki anlaşmaları yönetir. Anlaşma iki adımlı bir işlemdir: ilk olarak, bir denetim üst öğesine hangi konumu ve boyutu gerektirdiğini söyler; ikinci olarak, üst öğe denetime hangi alana sahip olabileceğini söyler.

Düzen sistemi, temel WPF sınıfları aracılığıyla alt denetimlere sunulur. WPF; kılavuzlar, yığınlama ve yerleştirme gibi yaygın düzenler için birçok farklı düzen denetimi içerir:

Canvas: Alt denetimler kendi düzenini 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 veya yatay olarak yığınlanır.
VirtualizingStackPanel: Alt denetimler sanallaştırılır ve yatay veya dikey olarak yönlendirilmiş tek bir çizgi üzerinde düzenlenir.
WrapPanel: Alt denetimler, geçerli satırda alanın izin verdiğinden daha fazla denetim olduğunda soldan sağa sırada konumlandırılır ve bir sonraki satıra kaydırılır.

Aşağıdaki örnekte çeşitli TextBox denetimlerin düzenlenmesi için bir DockPanel kullanılmıştır:

<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 bunların nasıl düzenleneceğini bildirmesini sağlar. DockPanel, bunu yapmak için her birinin bir yerleştirme stili belirtmesine izin verme amacıyla alt denetimlerin kullanımına sunulan bir Dock iliştirilmiş özelliği uygular.

Dekont

Alt denetimler tarafından kullanılmak üzere üst denetim tarafından uygulanan özellikler, iliştirilmiş özellik olarak adlandırılan bir WPF yapısıdır.

Aşağıdaki şekilde yukarıdaki örnekte yer alan XAML işaretlemesinin sonucu gösterilmektedir:

DockPanel page

Veri bağlama

Çoğu uygulamanın oluşturulma amacı, kullanıcıların verileri görüntülemesine ve düzenlemesine olanak sağlamaktır. WPF uygulamaları için verileri depolama ve verilere erişme işi, SQL Server ve ADO .NET gibi teknolojiler tarafından zaten sağlanmıştır. Verilere erişildikten ve veriler bir uygulamanın yönetilen nesnelerine yüklendikten sonra WPF uygulamaları için işin zor kısmı başlar. Bu süreç temelde bu iki şeyi kapsar:

Yönetilen nesnelerdeki verileri, görüntüleme ve düzenleme amacıyla ilgili denetimlere kopyalama.
Denetimler kullanılarak verilerde yapılan değişikliklerin yönetilen nesnelere geri kopyalandığından emin olma.

Uygulama geliştirmeyi basitleştirmek için WPF, bu adımları otomatik olarak gerçekleştirmek için bir veri bağlama altyapısı sağlar. Veri bağlama altyapısının temel birimi, işi bir denetimi (bağlama hedefi) bir veri nesnesine (bağlama kaynağı) bağlamak olan Binding sınıfıdır. Bu ilişki aşağıdaki şekille gösterilmiştir:

Basic data binding diagram

Sonraki örnekte, bir özel Person nesnenin örneğine nasıl bağlanacağınız TextBox gösterilmektedir. Uygulama Person aşağıdaki kodda gösterilir:

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, öğesini TextBox özel Person bir nesnenin örneğine 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 sınıfı arka Person planda kod biçiminde oluşturulur ve için DataBindingWindowveri bağlamı olarak ayarlanır. biçimlendirmesinde Text , özelliğinin TextBox özelliğine Person.Name bağlıdır ("{Binding ... }" XAML söz dizimi kullanılarak). Bu XAML WPF'ye denetimi pencerenin özelliğinde depolanan nesneye PersonDataContext bağlamasını TextBox söyler.

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

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

Grafik

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

Çözünürlükten ve cihazdan bağımsız grafikler. WPF grafik sistemindeki temel ölçü birimi, gerçek ekran çözünürlüğünden bağımsız olarak 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. Her cihazdan bağımsız piksel, üzerinde işlendiği sistemin nokta/inç (dpi) ayarıyla eşleşecek şekilde otomatik olarak ölçeklendirilir.
Geliştirilmiş duyarlık. WPF koordinat sistemi, tek duyarlık yerine çift duyarlıklı kayan noktalı sayılarla ölçülür. Dönüştürmeler ve opaklık değerleri de çift duyarlıkla ifade edilir. WPF ayrıca geniş renk gamını (scRGB) destekler ve farklı renk alanlarından girişleri yönetmek için tümleşik destek sunar.
Gelişmiş grafik ve animasyon desteği. WPF, animasyon sahnelerini sizin için yöneterek grafik programlamayı basitleştirir; sahne işleme, işleme döngüleri ve bilinear ilişkilendirme konusunda endişelenmenize gerek yoktur. WPF buna ek olarak isabet testi desteği ve tam alfa birleştirme desteği sağlar.
Donanım hızlandırma. WPF grafik sistemi, CPU kullanımını en aza indirmek için grafik donanımından yararlanır.

2B şekiller

WPF, aşağıdaki çizimde gösterilen dikdörtgenler ve üç nokta gibi ortak vektör çizilmiş 2B şekiller kitaplığı sağlar:

Ellipses and rectangles

Şekillerin ilginç bir özelliği, yalnızca görüntüleme için olmamasıdır; şekiller, klavye ve fare girişi de dahil olmak üzere denetimlerden beklediğiniz birçok özelliği uygular. Aşağıdaki örnekte işlenen bir Ellipse olay gösterilmektedirMouseUp:

<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 nelerin üretildiği gösterilmektedir:

A window with the text

Daha fazla bilgi için bkz . WPF'de şekillere ve temel çizime genel bakış.

2B geometriler

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

Path nesneler 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.

Various uses of a path

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

2B efektler

WPF 2B özelliklerinin bir alt kümesi gradyanlar, bit eşlemler, çizimler, videolarla boyama, döndürme, ölçeklendirme ve eğme gibi görsel efektleri kapsar. Bunların hepsi fırçalarla elde edilir; Aşağıdaki şekilde bazı örnekler gösterilmektedir:

Illustration of different brushes

Daha fazla bilgi için bkz. WFP fırçalarına genel bakış.

3B işleme

WPF ayrıca daha heyecan verici ve ilginç kullanıcı arabirimleri oluşturulmasını sağlamak için 2B grafiklerle tümleştirilen 3B işleme özellikleri sunar. Örneğin aşağıdaki şekilde 3B şekillere işlenen 2B görüntüler gösterilmiştir:

Visual3D sample screen shot

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

Animasyon

WPF animasyon desteği, ilginç sayfa geçişleri ve daha fazlasını oluşturmak için denetimleri büyütmenizi, sallamanızı, döndürmenizi ve soluklaştırmanızı sağlar. Çoğu WPF sınıfına, hatta özel sınıflara bile animasyon uygulayabilirsiniz. Aşağıdaki şekilde basit bir animasyon gösterilmektedir:

Images of an animated cube

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

Medya

Zengin içerik aktarmanın bir yolu, görsel-işitsel medya kullanmaktı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 ortaktır ve WPF bunları kullanmak için çeşitli yollar sağlar. Aşağıdaki şekilde, küçük resim görüntülerini içeren bir liste kutusu içeren bir kullanıcı arabirimi gösterilmektedir. Küçük resim seçildiğinde, resim tam boyutlu olarak gösterilir.

Thumbnail images and a full-size image

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

Video ve ses

Denetim MediaElement hem video hem de ses yürütebilen bir denetimdir ve özel bir medya oynatıcı için temel oluşturacak kadar esnektir. Aşağıdaki XAML işaretlemesi bir medya yürütücüsü uygular:

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

Aşağıdaki şekildeki pencere, denetimin MediaElement çalıştığını gösterir:

A MediaElement control with audio and video

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

Metin ve tipografi

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

OpenType yazı tipi desteği.
ClearType geliştirmeleri.
Donanım hızlandırma destekli yüksek performans.
Metinlerin medya, grafik ve animasyonla tümleştirilmesi.
Uluslararası yazı tipi desteği ve geri dönüş mekanizmaları.

Metnin grafiklerle tümleştirmesinin bir gösterimi olarak aşağıdaki şekilde metin süslemelerinin uygulanması gösterilmiştir:

Text with various text decorations

Daha fazla bilgi için bkz. Windows Presentation Foundation’da tipografi.

WPF uygulamalarını özelleştirme

Bu noktaya kadar, uygulama geliştirmeye yönelik temel WPF yapı taşları gördünüz. Uygulama modeli, çoğunluğunu denetimlerin oluşturduğu uygulama içeriğini barındırmanızı ve teslim etmenizi sağlar. Kullanıcı arabirimindeki denetimlerin düzenini basitleştirmek ve pencere boyutu ve görüntü ayarlarında yapılan değişiklikler karşısında düzenlemenin korundığından emin olmak için WPF düzen sistemini kullanırsınız. Çoğu uygulama kullanıcıların verilerle etkileşim kurmasına olanak sağladığından, kullanıcı arabiriminizi verilerle tümleştirme işini azaltmak için veri bağlamayı kullanırsınız. WPF tarafından sağlanan kapsamlı grafik, animasyon ve medya desteği aralığı, uygulamanızın görünümünü geliştirmenizi sağlar.

Ancak çoğu zaman temel bilgiler gerçekten farklı ve görsel olarak etkileyici bir kullanıcı deneyimi oluşturmak ve yönetmek için yeterli değildir. Standart WPF denetimleri, uygulamanızın istenen görünümüyle tümleştirilmeyebilir. Veriler en etkili şekilde görüntülenmeyebilir. Uygulamanızın genel kullanıcı deneyimi, Windows temalarının varsayılan görünümüne uygun olmayabilir. Birçok açıdan, bir sunu teknolojisi diğer genişletilebilirlik türleri kadar görsel genişletilebilirlik gerekir.

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

Çadır modu l

WPF denetimlerinin çoğunluğunun temel amacı içeriği görüntülemektir. WPF’de, denetimin içeriğini oluşturabilecek öğelerin türü ve sayısı, denetimin içerik modeli olarak bilinir. Bazı denetimler tek bir öğe ve içerik türü içerebilir; örneğin, öğesinin TextBox içeriği özelliğine Text atanmış bir dize değeridir. Aşağıdaki örnek, içeriğini ayarlar TextBox:

<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österilmektedir:

A TextBox control that contains text

Ancak diğer denetimler farklı içerik türlerinde birden çok öğe içerebilir; özelliği tarafından belirtilen bir Buttonöğesinin Content içeriği düzen denetimleri, metin, resimler ve şekiller gibi çeşitli öğeler içerebilir. Aşağıdaki örnekte , Border Labelve içeren içerik DockPaneliçeren bir gösterilmektedir Button MediaElement:

<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österilmektedir:

A button that contains multiple types of content

Ç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şaretlemesinin temel amacı bir uygulamanın görünümünü uygulamak olsa da XAML ile uygulamanın davranışının bazı yönlerini de uygulamaya alabilirsiniz. Örneğin tetikleyicileri kullanarak bir uygulamanın görünümünü kullanıcı etkileşimlerine göre değiştirebilirsiniz. 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 Button, hem ButtonChrome hem de ContentPresenter denetimlerinden oluşur. ButtonChrome standart düğme görünümünü sağlarken ContentPresenter, Content özelliği tarafından belirtildiği gibi düğmenin içeriğini görüntüler.

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

Aşağıdaki örnekte, kullanarak ControlTemplategörünümünün Button nasıl değiştireceği gösterilmektedir:

<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 Ellipse kullanılarak doldurulmuş bir RadialGradientBrushile değiştirilmiştir. Denetim , ContentPresenter "Beni Tıkla!" öğesinin Buttoniçeriğini görüntüler Button öğesine tıklandığında, olay denetimin Click varsayılan davranışının Button bir parçası olarak yine de oluşturulur. Sonuç aşağıdaki şekilde gösterilmiştir:

An elliptical button and a second window

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 tanır. Veri şablonları sıklıkla bağlı verilerin görüntülenme biçimini geliştirmek için kullanılır. Aşağıdaki şekilde, her görevin bir ada, açıklamaya ve önceliğe sahip olduğu bir ListBox nesnesi koleksiyonuna bağlı olan varsayılan Task görünümü gösterilmektedir:

A list box with the default appearance

Varsayılan görünüm, ListBox denetiminden beklenen görünümdür. 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 ListBox denetimin ilişkili liste öğelerinin varsayılan görünümü DataTemplate kullanılarak değiştirilmelidir. Aşağıdaki XAML, özniteliği kullanılarak ItemTemplate her göreve uygulanan böyle bir DataTemplateöğesini 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österilmektedir:

List box that uses a data template

öğesinin ListBox davranışını ve genel görünümünü koruduğunu; yalnızca liste kutusu tarafından görüntülenen içeriğin görünümünün değiştiğini unutmayın.

Daha fazla bilgi için bkz. Veri şablonu oluşturmaya genel bakış.

Stiller

Stiller, geliştiricilerin ve tasarımcıların ürünleri için belirli bir görünümü standartlaştırmasına olanak tanır. WPF, temeli Style öğesi olan güçlü bir stil modeli sunar. Aşağıdaki örnek, bir penceredeki Orangeher Button için arka plan rengini olarak ayarlayan bir stil 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 Button denetimlerini hedeflediğinden, stil aşağıdaki şekilde gösterildiği gibi penceredeki tüm düğmelere otomatik olarak uygulanır:

Two orange buttons

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

Kaynaklar

Bir uygulamadaki denetimler; şablonları, veri şablonlarını ve stilleri denetlemek için yazı tiplerinden arka plan renklerine kadar her şeyi içerebilen aynı görünümü paylaşmalıdır. WPF’nin kullanıcı arabirimi kaynakları desteğini kullanarak bu kaynakları yeniden kullanmak üzere tek bir konumda kapsülleyebilirsiniz.

Aşağıdaki örnek, Button ile Label tarafından paylaşılan ortak bir arka plan rengini 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 Window.Resources bir arka plan rengi kaynağı uygular. Bu kaynak, öğesinin Windowtüm alt öğeleri tarafından kullanılabilir. Aşağıdakiler de dahil olmak üzere çözümlenme sırasına göre listelenen çeşitli kaynak kapsamları vardır:

Tek bir denetim (devralınan System.Windows.FrameworkElement.Resources özelliği kullanarak).
A Window veya a Page (devralınan System.Windows.FrameworkElement.Resources özelliği de kullanarak).
An Application (özelliğini kullanarak System.Windows.Application.Resources ).

Kapsamların çeşitliliği, kaynaklarınızı tanımlama ve paylaşma şekliniz konusunda size esneklik sağlar.

Kaynaklarınızı belirli bir kapsamla doğrudan ilişkilendirmeye alternatif olarak, bir uygulamanın diğer bölümlerinde başvurulabilen ayrı ResourceDictionary bir kaynak kullanarak bir veya daha fazla kaynağı paketleyebilirsiniz. Örneğin, aşağıdaki örnek bir 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, önceki örnekte tanımlanan kaynak sözlüğüne başvurarak bir uygulama arasında paylaştırılır:

<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 oluşturur.

Daha fazla bilgi için bkz . Kaynaklar.

Özel denetimler

WPF özelleştirme desteği konağı sağlasa da mevcut WPF denetimlerinin uygulamanızın veya kullanıcılarının gereksinimlerini karşılamadığı durumlarla karşılaşabilirsiniz. Bu durum şu şartlarda oluşabilir:

İhtiyacınız olan kullanıcı arabirimini, mevcut WPF uygulamalarının görünümünü özelleştirerek oluşturamadığınızda.
Gerektirdiğiniz davranış, mevcut WPF uygulamaları tarafından desteklenmez (veya kolayca desteklenmez).

Ancak bu noktada yeni bir denetim oluşturmak için üç WPF modelinin birinden faydalanabilirsiniz. Her model belirli bir senaryoya yönelik olarak tasarlanmıştır ve özel denetiminizin belirli bir WPF temel sınıfından türetilmiş olmasını gerektirir. Üç model aşağıda listelenmiştir:

Kullanıcı Denetim Modeli. UserControl kaynağından bir özel denetim türetilir ve bu denetim, bir veya daha fazla denetimden oluşur.
Denetim Modeli. Özel denetim, wpf denetimlerinin çoğu gibi şablonları kullanarak davranışlarını görünümlerinden ayıran uygulamalar oluşturmak için ve'den Control türetilir. Control kaynağından türetilmiş olması, kullanıcı denetimlerine kıyasla daha fazla özel kullanıcı arabirimi oluşturma özgürlüğü sağlar ancak daha fazla çaba gerektirebilir.
Çerçeve Öğesi Modeli. FrameworkElement kaynağından bir özel denetim türetilir ve görünümü özel işleme mantığı tarafından (şablonlar tarafından değil) tanımlanır.

Aşağıdaki örnekte, öğesinden UserControltüretilen özel bir sayısal yukarı/aşağı denetimi gösterilmektedir:

<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 örnekte, kullanıcı denetimini içine Windoweklemek için gereken XAML gösterilmektedir:

<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 barındırılan NumericUpDown denetim gösterilmektedir Window:

A custom UserControl

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

WPF en iyi yöntemleri

Herhangi bir geliştirme platformunda olduğu gibi WPF de istenen sonucu elde etmek için çeşitli yollarla kullanılabilir. WPF uygulamalarınızın gerekli kullanıcı deneyimini sağladığından ve genel olarak hedef kitlenin taleplerini karşıladığından emin olmak için erişilebilirlik, genelleştirme ve 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şturmanın zamanı geldi.

İzlenecek yol: İlk WPF masaüstü uygulamam