Aracılığıyla paylaş

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

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

Bu eğitimde, siz:

  • Yeni bir WPF uygulaması oluşturun.
  • Pencereye denetimler ekleyin.
  • Uygulamanın işlevselliğini sağlamak amacıyla denetim olaylarını işleyin.
  • Uygulamayı çalıştırın.

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

WPF öğreticisi için bitmemiş örnek uygulama

Önkoşullar

WPF uygulaması oluşturma

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

  1. Visual Studio açın.

  2. Yeni proje oluştur'u seçin.

    2026 Visual Studio başlangıç iletişim kutusunun ekran görüntüsü. 'Yeni proje oluştur' düğmesi kırmızı kutuyla vurgulanır.

  3. Şablon ara kutusuna wpf yazın ve arama sonuçlarının görünmesini bekleyin.

  4. code language açılan menüsünde C# veya Visual Basic öğesini seçin.

  5. Şablon listesinde WPF Application öğesini ve ardından İleri'i 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.

    Arama kutusunda 'wpf' ve WPF Uygulama şablonları vurgulanmış şekilde Visual Studio 'Yeni proje oluştur' iletişim kutusunun ekran görüntüsü.

  6. 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.

    2026 Visual Studio'dan 'yeni projenizi yapılandırın' iletişim kutusunun ekran görüntüsü. 'Proje adı' metin kutusunda 'Adlar' sözcüğü bulunur ve kırmızı bir kutuyla vurgulanır. 'İleri' düğmesi de kırmızı kutuyla vurgulanır.

  7. Son olarak, Ek bilgiler penceresinde, Framework ayarı için .NET 10.0 (Uzun Vadeli Destek) seçin ve ardından Create öğesini seçin.

    Visual Studio 2026'dan 'Ek Bilgiler' iletişim kutusunun ekran görüntüsü. 'Framework' açılır kutusunun '.NET 10 (Uzun Süreli Destek)' seçili ve kırmızı bir kutu ile vurgulanmış. 'Oluştur' düğmesi de kırmızı bir kutu ile vurgulanmış.

Visual Studio uygulamayı oluşturduktan sonra varsayılan 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.xaml dosyasına çift tıklayın.

Visual Studio önemli bölümleri

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

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

  1. Çözüm Gezgini

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

  2. Özellikler

    Bu pencerede, seçilen öğenin bağlamına göre yapılandırabileceğiniz özellik ayarları gösterilir. Örneğin, Çözüm Gezgini öğesinden 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.

  3. 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.

  4. 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.

  5. 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 imlecinde gezinirken, Özellikler penceresi nesneyle ilgili özellikleri ve nitelikleri görüntüler.

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 ile kodluyorsanız, XAML biraz farklıdır, özellikle de x:Class=".." özniteliği. Visual Basic'de XAML, nesnenin sınıf adını kullanır ve sınıfa yönelik ad alanını göz ardı eder.

XAML'yi daha iyi anlamak için parçalara ayıralım. XAML, basitçe WPF tarafından bir kullanıcı arabirimi oluşturmak için işlenen XML'dir. XAML'yi anlamak için en azından XML'nin temellerini öğrenmeniz gerekir.

Belge kökü , 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 öznitelik, dosyanın tamamı için XML ad alanını içeri aktarır. Bu durumda, WPF tarafından tanımlanan 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, namespace, bir ön eki tanımlar ve projeniz tarafından bildirilen nesnelerle, yani kod alanında bildirilen nesnelerle eşleşir.

  • özniteliği

    Bu öznitelik, <Window> kodunuz tarafından tanımlanan türle eşler: MainWindow.xaml.cs veya MainWindow.xaml.vb dosyası; C# dilinde Names.MainWindow sınıfı ve Visual Basic'de MainWindow.

  • özniteliği

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

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.

  1. İ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:

    Bir boş WPF uygulaması

  2. olarak ayarlayarak pencerenin başlığını değiştirin.

  3. ve olarak ayarlayarak 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 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 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. Her zaman kılavuzda tek bir satır ve sütunun tanımlandığı anlamına gelir, bu da varsayılan olarak kılavuzun tek bir hücre olduğu anlamını taşır. 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.

  1. öğesine yeni bir öznitelik ekleyin: .

    Bu ayar, kılavuzu pencere kenarlarından uzaklaştırarak daha hoş bir görünüm sağlar.

  2. 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>

  3. 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:

    Kılavuzda kenar boşluğu ayarlanmış bir WPF uygulaması

İlk denetimi ekleme

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

  1. Satır ve sütun tanımlarından sonra öğesinin içinde yeni bir öğe oluşturun. öğesinin içeriğini dize değerine ayarlayın:

    <Grid Margin="10">

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

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

    <Label>Names</Label>

</Grid>

    , içeriğini tanımlar. Bazı denetimler içeriğin nasıl işleneceğini anlayabilir, bazıları ise anlamaz. Kontrolün içeriği bir özelliğe atanır. İçeriği XAML özniteliği söz dizimi aracılığıyla ayarlarsanız şu biçimi kullanın: . Her iki yöntem de aynı şeyi gerçekleştirir ve etiketin içeriğini metni gösterecek ş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.

  2. İlk öğesinin özniteliğini olarak değiştirin.

    Değer, kılavuz satırını otomatik olarak içeriğinin boyutuna göre boyutlandırır, bu örnekte etiket denetimi.

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

    WPF Kılavuzda kenar boşluğu ayarlanmış bir uygulama ve ilk satırda etiket denetimi

Kontrol 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: ve . Bu özellikleri denetimden atlarsanız, varsayılan değerler 0'dır. Bu nedenle, denetim kılavuzun . satırına ve . sütununa yerleştirilir. özniteliğini olarak ayarlayarak denetimin yerleşimini 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 ve 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.

  1. Denetim altındaki kontrolü bildirin.

  2. özelliğini olarak ayarlayın.

  3. özelliğini olarak ayarlayın.

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

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 yerleştirin.

Yığın paneli, denetimleri yerleştirme şekli bakımından ızgaradan farklıdır. Kılavuzdaki denetimleri yerleştirmek için ve ekli özelliklerini kullanırken, StackPanel otomatik olarak çalışır. Alt denetimlerinin her birini sıralı olarak sıralı olarak sıralar. Her denetimi üst üste koyarak bir araya getiriyor.

  1. Kontrol altında olan denetimi bildir.

  2. özelliğini olarak ayarlayın.

  3. özelliğini olarak ayarlayın.

  4. ayarını 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 özniteliğini kullandınız, ancak yalnızca tek bir değer koydunuz: . Bu marj değeri , değerinden çok farklıdır. Margin özelliği bir türdür ve her iki değeri de yorumlayabilir. Kalınlık, sırasıyla sol, üst, sağ ve alt olacak şekilde dikdörtgen çerçevenin her bir 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.

  5. Denetimin içinde bir denetim oluşturun.

    1. özelliğini olarak ayarlayın.

  6. Son olarak, henüz içindeyken, içinde bir denetim oluşturun.

    1. özelliğini olarak ayarlayın.
    2. ayarını yapın.
    3. İçeriği ayarla.

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

oluşturduğunuzda, kullanıcının düğmeye basması durumunda uygulamanın tetiklediği bir 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.

  1. Kontrolü bulun.

  2. özniteliğini olarak ayarlayı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>

  3. Olay işleyici kodunu oluşturun. Sağ tıklayın ve Tanıma Git seçeneğini 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

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

    1. Metin kutusunun bir ad içerdiğinden emin olun.
    2. Metin kutusuna girilen adın zaten mevcut olmadığını doğrulayın.
    3. 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.

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

İlgili içerik

  • Windows Presentation Foundation
  • XAML'ye genel bakış
  • Last updated on