Öğretici: .NET ile WPF uygulaması oluşturma

Bu öğreticide, Windows Presentation Foundation (WPF) uygulaması oluşturmak için Visual Studio'yu kullanmayı öğreneceksiniz. Visual Studio ile pencerelere denetimler ekler ve olayları işlersiniz. Bu öğreticinin sonunda, liste kutusuna ad ekleyen basit bir uygulamanız olur.

Bu eğitimde, siz:

Yeni bir WPF uygulaması oluşturun.
Pencereye denetimler ekleyin.
Uygulama işlevselliği sağlamak için denetim olaylarını işleyebilirsiniz.
Uygulamayı çalıştırın.

Bu öğretici izlenerek oluşturulan uygulamanın önizlemesi aşağıdadır:

WPF öğreticisi için tamamlanmış örnek uygulama

Önkoşullar

Visual Studio 2026
- .NET masaüstü geliştirme iş yükünü seçin
- .NET 10 bağımsız bileşenini seçin

WPF uygulaması oluşturma

Yeni uygulama oluşturmanın ilk adımı Visual Studio'yu açmak ve uygulamayı bir şablondan oluşturmaktır.

Visual Studio'yu açın.
Yeni proje oluştur'u seçin.
Şablon ara kutusuna wpf yazın ve arama sonuçlarının görünmesini bekleyin.
Kod dili açılan listesinde C# veya Visual Basic'i seçin.
Şablon listesinde WPF Uygulaması'nı ve ardından İleri'yi seçin.

Önemli

WPF Uygulaması (.NET Framework) şablonunu seçmeyin.

Aşağıdaki görüntüde hem C# hem de Visual Basic .NET proje şablonları gösterilmektedir. Kod dili filtresini uyguladıysanız ilgili şablon listelenir.
Yeni projenizi yapılandırın penceresinde Proje adınıAdlar olarak ayarlayın ve İleri'yi seçin.

Konum yolunu ayarlayarak projenizi farklı bir klasöre de kaydedebilirsiniz.
Son olarak, Ek bilgi penceresinde Çerçeve ayarı için .NET 10.0 (Uzun Vadeli Destek) öğesini seçin ve ardından Oluştur'u seçin.

Visual Studio uygulamayı oluşturduktan sonra, varsayılan pencere olan MainWindow için XAML tasarımcısı penceresini açar. Tasarımcı görünmüyorsa, tasarımcıyı açmak için Çözüm Gezgini penceresinde MainWindow.xamldosyasına çift tıklayın.

Visual Studio'nun önemli bölümleri

Visual Studio'da WPF desteği, bir uygulama oluştururken etkileşimde olduğunuz beş önemli bileşene sahiptir:

.NET için WPF projesi oluştururken Visual Studio 2026'nın önemli bileşenlerini bilmeniz gerekir.

Çözüm Gezgini

Tüm proje dosyalarınız, kodunuz, pencereleriniz ve kaynaklarınız bu pencerede görünür.
Özellikler

Bu pencerede, seçilen öğenin bağlamına göre yapılandırabileceğiniz özellik ayarları gösterilir. Örneğin, Çözüm Gezgini'nden bir öğe seçerseniz dosyayla ilgili ayarlar görüntülenir. Tasarımcı'daki bir nesne seçilirse, denetimin veya pencerenin özellikleri görüntülenir.
Alet Çantası

Araç kutusu, tasarım yüzeyine ekleyebileceğiniz tüm denetimleri içerir. Geçerli yüzeye denetim eklemek için bir denetime çift tıklayın veya denetimi sürükleyip tasarımcıya bırakın. Bunun yerine XAML kod düzenleyicisi penceresini kullanarak bir kullanıcı arabirimi (UI) tasarlarken, sonuçların önizlemesini görüntülemek için XAML tasarımcısı penceresini kullanmak yaygın bir işlemdir.
XAML tasarımcısı

Bu, XAML belgesinin tasarımcısıdır. Etkileşimlidir ve Nesneleri Araç Kutusu'ndan sürükleyip bırakabilirsiniz. Tasarımcıdaki öğeleri seçip taşıyarak, uygulamanız için kullanıcı arabirimini görsel olarak oluşturabilirsiniz.

Hem tasarımcı hem de düzenleyici görünür olduğunda, birinde yapılan değişiklikler diğerine yansıtılır.

Tasarımcıda öğeleri seçtiğinizde, Özellikler penceresinde bu nesneyle ilgili özellikler ve öznitelikler görüntülenir.
XAML kod düzenleyicisi

Bu, bir XAML belgesi için XAML kod düzenleyicisidir. XAML kod düzenleyicisi, kullanıcı arabiriminizi tasarımcı olmadan el ile oluşturmanın bir yoludur. Tasarımcı, denetim tasarımcıya eklendiğinde denetimdeki özellikleri otomatik olarak ayarlayabilir. XAML kod düzenleyicisi size çok daha fazla denetim sağlar.

Hem tasarımcı hem de düzenleyici görünür olduğunda, birinde yapılan değişiklikler diğerine yansıtılır. Kod düzenleyicisinde metin şapka işaretinde gezinirken, Özellikler penceresinde bu nesneyle ilgili özellikler ve öznitelikler görüntülenir.

XAML'yi inceleme

Projenizi oluşturduktan sonra XAML kod düzenleyicisi açılır. Pencereyi görüntülemek için en az miktarda XAML kodu gösterir. Düzenleyici açık değilse, Çözüm Gezgini penceresinde MainWindow.xaml öğesine çift tıklayın. Aşağıdaki örneğe benzer bir XAML görmeniz gerekir:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Önemli

Visual Basic'te kodluyorsanız, XAML biraz farklıdır, özellikle x:Class=".." özniteliği. Visual Basic'te XAML, nesnenin sınıf adını kullanır ve ad alanını sınıfına atlar.

XAML'yi daha iyi anlamak için bunu ayıralım. XAML yalnızca WPF'nin kullanıcı arabirimi oluşturmak için işlediği XML'dir. XAML'yi anlamak için en azından XML'nin temellerini öğrenmeniz gerekir.

Belge kökü <Window> , XAML dosyası tarafından açıklanan nesne türünü temsil eder. Dosya sekiz öznitelik bildirir ve bunlar genellikle üç kategoriye aittir:

XML ad alanları

XML ad alanı, XML'ye yapı sağlar. Dosyada bildirebileceğiniz XML içeriğini belirler.

Ana xmlns öznitelik, dosyanın tamamı için XML ad alanını içeri aktarır. Bu durumda, WPF tarafından bildirilen türlere eşler. Diğer XML ad alanları bir ön ek bildirir ve XAML dosyası için diğer türleri ve nesneleri içeri aktarır. Örneğin, xmlns:local ad alanı ön eki bildirir local ve projeniz tarafından bildirilen nesnelerle eşler; kod ad alanında Names bildirilenler.
x:Class özniteliği

Bu öznitelik, öğesini kodunuz tarafından tanımlanan türle eşler<Window>: C# ve Visual Basic'te sınıfı olan Names.MainWindow MainWindow.xaml.cs veya MainWindow dosyası.
Title özniteliği

XAML nesnesinde bildirdiğiniz herhangi bir normal öznitelik, bu nesnenin bir özelliğini ayarlar. Bu durumda özniteliği Title özelliğini ayarlar Window.Title .

Pencereyi değiştirme

Örnek uygulamamız için bu pencere çok büyük ve başlık çubuğu açıklayıcı değil. Bunu düzeltelim.

İlk olarak, F5 tuşuna basarak veya menüden Hata AyıklamaYı>Başlat Hata Ayıklama'yı seçerek uygulamayı çalıştırın.

Şablon tarafından hiçbir denetim olmadan oluşturulan varsayılan pencereyi ve MainWindow başlığını görürsünüz:
olarak ayarlayarak TitleNamespencerenin başlığını değiştirin.

ve Height180olarak ayarlayarak Width260 pencerenin boyutunu değiştirin.

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Düzeni hazırlama

WPF, birçok farklı düzen denetimine sahip güçlü bir düzen sistemi sağlar. Düzen denetimleri alt denetimleri yerleştirmeye ve boyutlandırmaya yardımcı olur ve hatta bunu otomatik olarak da yapabilir. Bu XAML'de varsayılan olarak sağlanan düzen denetimi <Grid> denetimidir.

Kılavuz denetimi, tabloya çok benzer şekilde satır ve sütun tanımlamanıza ve denetimleri belirli bir satır ve sütun bileşiminin sınırları içine yerleştirmenize olanak tanır. Kılavuza istediğiniz sayıda alt kontrol veya diğer düzen kontrolleri ekleyebilirsiniz. Örneğin, belirli bir satır ve sütun bileşimine başka bir <Grid> denetim yerleştirebilirsiniz ve bu yeni kılavuz daha fazla satır ve sütun tanımlayabilir ve kendi alt öğelerine sahip olabilir.

Kılavuz denetimi, alt denetimlerini satırlara ve sütunlara yerleştirir. Kılavuzda her zaman tek bir satır ve sütun bildirilir; yani kılavuz varsayılan olarak tek bir hücredir. Bu varsayılan ayar, denetimleri yerleştirmede size çok fazla esneklik sunmaz.

Bu uygulama için gereken denetimler için kılavuzun düzenini ayarlayın.

öğesine yeni bir öznitelik <Grid> ekleyin: Margin="10".

Bu ayar, kılavuzu pencere kenarlarından getirir ve biraz daha hoş görünmesini sağlar.

kılavuzu dört hücreye bölerek iki satır ve iki sütun tanımlayın:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

XAML kod düzenleyicisinde veya XAML tasarımcısında kılavuzu seçin. XAML tasarımcısı her satırı ve sütunu gösterir:

İlk denetimi ekleme

Artık kılavuz yapılandırıldığına göre, kontroller eklemeye başlayabilirsiniz. İlk olarak etiket denetimini ekleyin.

Satır ve sütun tanımlarından sonra öğesinin içinde <Label> yeni <Grid> bir öğe oluşturun. öğesinin içeriğini dize değerine Namesayarlayın:
```
<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>
```
<Label>Names</Label>, içeriğini Namestanımlar. Bazı denetimler içeriğin nasıl işleneceğini anlayabilir, bazıları ise anlamaz. Denetimin içeriği özelliğiyle eşler Content . İçeriği XAML özniteliği söz dizimi aracılığıyla ayarlarsanız şu biçimi kullanın: <Label Content="Names" />. Her iki yöntem de aynı şeyi gerçekleştirir ve etiketin içeriğini metnini Namesgörüntüleyecek şekilde ayarlar.

Etiket, kılavuzun ilk satırına ve sütununa otomatik olarak yerleştirildiği için pencerenin yarısını kaplar. İlk satırda bu kadar alana ihtiyacınız yoktur çünkü bu satırı yalnızca etiket için kullanacaksınız.
İlk Height öğesinin <RowDefinition> özniteliğini olarak *Autodeğiştirin.

Değer Auto , kılavuz satırını otomatik olarak içeriğinin boyutuna (bu örnekte etiket denetimi) boyutlandırıyor.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
Tasarımcı, etiketi artık kullanılabilir yüksekliğin az bir kısmını kaplayacak şekilde gösterir. Bir sonraki satır için daha fazla yer var.

Denetim yerleşimi

Şimdi kontrol yerleşimi hakkında konuşalım. Önceki bölümde oluşturduğunuz etiket, kılavuzun 0. satırına ve 0. sütununa otomatik olarak yerleştirilir. Satır ve sütunların numaralandırması 0'da başlar ve 1 artar. Denetim kılavuz hakkında hiçbir şey bilmez ve denetim, kılavuz içindeki yerleşimini denetlemek için herhangi bir özellik tanımlamaz.

Denetim kılavuz hakkında bilgi sahibi olmadığında bir denetime farklı bir satır veya sütun kullanmasını nasıl söylersiniz? Ekli özellikler! Kılavuz, WPF tarafından sağlanan özellik sisteminden yararlanır.

Kılavuz denetimi, alt denetimlerin kendilerine ekleyebileceği yeni özellikleri tanımlar. Özellikler denetimin kendisinde mevcut değildir, ancak grid'e eklendikten sonra denetim tarafından erişilebilir olur.

Kılavuz, bir alt denetimin satır ve sütun yerleşimini belirlemek için iki özellik tanımlar: Grid.Row ve Grid.Column. Bu özellikleri denetimden atlarsanız, varsayılan değerler 0'dır. Bu nedenle, denetim kılavuzun 0. satırına ve 0. sütununa yerleştirilir. özniteliğini <Label>olarak ayarlayarak denetimin yerleşimini Grid.Column1 değiştirmeyi deneyin:

<Label Grid.Column="1">Names</Label>

Etiketin ikinci sütuna taşındığına dikkat edin. Oluşturacağınız sonraki denetimleri yerleştirmek için Grid.Row ve Grid.Column ilişkilendirilmiş özelliklerini kullanabilirsiniz. Şimdilik etiketi 0 sütununa geri yükleyin.

Ad liste kutusunu oluşturma

Artık kılavuz doğru boyutlandırıldı ve etiket oluşturuldu, etiketin altındaki satıra bir liste kutusu denetimi ekleyin.

Denetimin <ListBox /> altındaki denetimi bildirin <Label> .
Grid.Row özelliğini 1olarak ayarlayın.
x:Name özelliğini lstNamesolarak ayarlayın.

Bir denetim adlandırıldıktan sonra, kodun arka planında buna başvurabilirsiniz. özniteliğini kullanarak adı denetime atayın x:Name .

XAML şöyle görünmelidir:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Kalan denetimleri ekleme

Metin kutusu ve düğme ekleyin. Kullanıcı, liste kutusuna eklenecek bir ad girmek için bu denetimleri kullanır. Bu denetimleri düzenlemek için kılavuzda daha fazla satır ve sütun oluşturmak yerine, bu denetimleri düzen denetimine <StackPanel> yerleştirin.

Yığın paneli, denetimleri yerleştirme şekli bakımından ızgaradan farklıdır. Kılavuzdaki denetimleri yerleştirmek için Grid.Row ve Grid.Column ekli özelliklerini kullanırken, StackPanel otomatik olarak çalışır. Alt denetimlerinin her birini sıralı olarak sıralı olarak sıralar. Her denetimi birbirinin arkasına "yığıyor".

Denetimin <StackPanel> altındaki denetimi bildirin <ListBox> .
Grid.Row özelliğini 1olarak ayarlayın.
Grid.Column özelliğini 1olarak ayarlayın.
Margin ayarını 5,0,0,0 yapın.
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>
```
Daha önce kılavuzda Margin özniteliğini kullandınız, ancak yalnızca tek bir değer koydunuz: 10. Bu kenar boşluğu, değerinden 5,0,0,0çok farklı 10bir değerine sahiptir. Margin özelliği bir Thickness türdür ve her iki değeri de yorumlayabilir. Kalınlık sırasıyla dikdörtgen çerçevenin her kenarının etrafındaki boşluğu tanımlar. Kenar boşluğunun değeri tek bir değerse, dört taraf için de bu değeri kullanır.
Denetimin <StackPanel> içinde bir <TextBox /> denetim oluşturun.
1. x:Name özelliğini txtNameolarak ayarlayın.
Son olarak, içinden <TextBox>sonra hala içinde <StackPanel>bir <Button> denetim oluşturun.
1. x:Name özelliğini btnAddolarak ayarlayın.
2. Margin ayarını 0,5,0,0 yapın.
3. İçeriği olarak Add Nameayarlayın.

XAML şöyle görünmelidir:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Pencerenin düzeni tamamlandı. Ancak uygulamanın işlevsel olması için herhangi bir mantığı yoktur. Ardından, denetim olaylarını kodlayıp uygulamanın gerçekten bir şeyler yapması için bağlamanız gerekir.

Click olayı için kod ekleme

<Button> oluşturduğunuzda, kullanıcının düğmeye basması durumunda uygulamanın tetiklediği bir Click olayı vardır. Bu olaya abone olun ve liste kutusuna bir ad eklemek için kod ekleyin. Olaylara abone olmak için XAML özniteliklerini, özellikleri ayarlamak için kullandığınız gibi kullanın.

Denetimi bulun <Button> .

özniteliğini Click olarak ButtonAddName_Clickayarlayın.

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

Olay işleyici kodunu oluşturun. Sağ tıklayın ButtonAddName_Click ve Tanıma Git'i seçin.

Bu eylem, arka planda, sağladığınız işleyici adıyla eşleşen bir yöntem oluşturur.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

Ardından, bu üç adımı gerçekleştirmek için aşağıdaki kodu ekleyin:

Metin kutusunun bir ad içerdiğinden emin olun.
Metin kutusuna girilen adın zaten mevcut olmadığını doğrulayın.
Adı liste kutusuna ekleyin.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Uygulamayı çalıştırma

Olayı işledikten sonra uygulamayı çalıştırın. Pencere görüntülenir ve metin kutusuna bir ad girebilirsiniz. Düğmeyi seçerek adı ekleyin.

Visual Studio 2026'da .NET uygulaması için WPF çalıştırma.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-12-28