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

bu kısa öğreticide, Visual Studio ile yeni bir Windows Presentation Foundation (WPF) uygulaması oluşturmayı öğreneceksiniz. İlk uygulama oluşturulduktan sonra denetimlerin nasıl ekleneceğini ve olayların nasıl işleneceğini öğreneceksiniz. Bu öğreticinin sonunda, liste kutusuna adlar ekleyen basit bir uygulamanız olacaktır.

Önemli

.NET 6 ve .NET 5 için masaüstü Kılavuzu belgeleri (.NET Core 3,1 dahil) yapım aşamasındadır.

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

  • Yeni bir WPF uygulaması oluşturma
  • Forma denetim ekleme
  • Uygulama işlevselliği sağlamak için denetim olaylarını işleme
  • Uygulamayı çalıştırma

Aşağıda, bu öğreticiyi takip ederken oluşturacağınız uygulamanın önizlemesi verilmiştir:

Finished sample app for WPF tutorial

Önkoşullar

WPF uygulaması oluşturma

yeni bir uygulama oluşturmanın ilk adımı Visual Studio açıp uygulamayı bir şablondan oluşturuyor.

  1. Visual Studio'yu açın.

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

    Create a new WPF project in Visual Studio 2019 for .NET.

  3. Şablon ara kutusuna WPFyazın ve ardından ENTERtuşuna basın.

  4. Kod dili açılan menüsünde, C# veya Visual Basicseçin.

  5. Şablonlar listesinde WPF uygulaması ' nı seçin ve ardından İleri' yi seçin.

    Önemli

    WPF uygulaması (.net Framework) şablonunu seçmeyin.

    Search for the WPF template in Visual Studio 2019 for .NET.

  6. Yeni projenizi yapılandırın penceresinde şunları yapın:

    1. Project adı kutusuna adlargirin.
    2. Çözümü ve projeyi aynı dizine yerleştir onay kutusunu seçin.
    3. İsteğe bağlı olarak, kodunuzu kaydetmek için farklı bir konum seçin.
    4. İleri düğmesini seçin.

    Configure new WPF project in Visual Studio 2019 for .NET

  7. Ek bilgi penceresinde, hedef çerçeveIçin .NET 5,0 (geçerli) seçeneğini belirleyin. Oluştur düğmesini seçin.

    Select target framework for new WPF project in Visual Studio 2019 for .NET

  1. Visual Studio'yu açın.

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

    Create a new WPF project in Visual Studio 2022 for .NET.

  3. Şablon ara kutusuna WPFyazın ve ardından ENTERtuşuna basın.

  4. Kod dili açılan menüsünde, C# veya Visual Basicseçin.

  5. Şablonlar listesinde WPF uygulaması ' nı seçin 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, buna karşılık gelen şablonu görürsünüz.

    Search for the WPF template in Visual Studio 2022 for .NET.

  6. Yeni projenizi yapılandırın penceresinde şunları yapın:

    1. Project adı kutusuna adlargirin.
    2. Çözümü ve projeyi aynı dizine yerleştir onay kutusunu seçin.
    3. İsteğe bağlı olarak, kodunuzu kaydetmek için farklı bir konum seçin.
    4. İleri düğmesini seçin.

    Configure new WPF project in Visual Studio 2022 for .NET

  7. Ek bilgi penceresinde, hedef çerçeveIçin .net 6,0 (uzun süreli destek) seçeneğini belirleyin. Oluştur düğmesini seçin.

    Select target framework for new WPF project in Visual Studio 2022 for .NET

uygulama oluşturulduktan sonra, Visual Studio varsayılan pencere olan MainWindowiçin XAML tasarımcısı bölmesini açmanız gerekir. Tasarımcı görünmüyorsa, tasarımcıyı açmak için Çözüm Gezgini bölmesinde MainWindow. xaml dosyasına çift tıklayın.

Visual Studio önemli bölümleri

Visual Studio 'de WPF desteği, bir uygulama oluştururken etkileşime gitireceğiniz beş önemli bileşene sahiptir:

The important components of Visual Studio you should know when creating a WPF project for .NET

The important components of Visual Studio you should know when creating a WPF project for .NET

  1. Çözüm Gezgini

    Tüm proje dosyalarınız, kodunuz, Windows, kaynaklarınız bu bölmede görünür.

  2. Özellikler

    Bu bölmede, seçilen öğeye göre yapılandırabileceğiniz özellik ayarları gösterilmektedir. Örneğin, Çözüm Gezginibir öğe seçerseniz, dosyayla ilgili özellik ayarlarını görürsünüz. Tasarımcıdabir nesne seçerseniz bu öğenin ayarlarını görürsünüz.

  3. Araç Kutusu

    Araç kutusu, bir forma ekleyebileceğiniz tüm denetimleri içerir. Geçerli forma bir denetim eklemek için bir denetime çift tıklayın veya denetimi sürükleyip bırakın.

  4. XAML Tasarımcısı

    Bu bir XAML belgesi tasarlayıcıdır. Etkileşimli olarak açılır ve araç kutusundannesneleri sürükleyip bırakabilirsiniz. Tasarımcıda öğeleri seçip taşıyarak, uygulamanız için Kullanıcı arabirimini (UI) görsel olarak oluşturabilirsiniz.

    Tasarımcı ve düzenleyici görünür olduğunda, bir üzerinde yapılan değişiklikler diğeri de yansıtılır. Tasarımcıda öğeler ' i seçtiğinizde, Özellikler bölmesi ilgili nesnenin özelliklerini ve özniteliklerini görüntüler.

  5. XAML kod düzenleyici

    Bu bir XAML belgesi için XAML kod düzenleyicisidir. XAML kod Düzenleyicisi, tasarımcı olmadan Kullanıcı arabirimini el ile oluşturmanın bir yoludur. Tasarımcı, denetim tasarımcıya eklendiğinde denetimdeki özelliklerin değerlerini çıkarmayabilir. XAML kod Düzenleyicisi, size daha fazla denetim sağlar.

    Tasarımcı ve düzenleyici görünür olduğunda, bir üzerinde yapılan değişiklikler diğeri de yansıtılır. Kod Düzenleyicisi 'nde metin giriş işaretine gittiğinizde Özellikler bölmesi, bu nesneyle ilgili özellikleri ve öznitelikleri görüntüler.

XAML 'yi İnceleme

Projeniz oluşturulduktan sonra XAML kod Düzenleyicisi, pencereyi göstermek için en az miktarda XAML kodu ile görünür. Düzenleyici açık değilse, Çözüm GezginiMainWindow. xaml öğesine çift tıklayın. Aşağıdaki örneğe benzer 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>

Daha iyi anlamak için bu XAML kodunu bir daha inceleyelim. XAML, WPF 'in kullandığı derleyiciler tarafından işlenebilirler. WPF Kullanıcı arabirimini açıklar ve .NET kodu ile etkileşime girer. XAML 'yi anlamak için, en azından XML 'nin temelleri hakkında bilgi sahibi olmanız gerekir.

Belge kökü, <Window> xaml dosyası tarafından tanımlanan nesne türünü temsil eder. Tanımlanmış sekiz öznitelik vardır ve bunlar genellikle üç kategoriye aittir:

  • Ad alanları

    XML ad alanı XML 'e yapı sağlar ve dosyada hangi XML içeriğinin bildirilebilecek olduğunu belirler.

    Main xmlns özniteliği tüm DOSYANıN XML ad alanını içeri aktarır ve bu durumda wpf tarafından belirtilen türlerle eşlenir. 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ı local öneki bildirir ve projeniz tarafından tanımlanan nesnelerle eşlenir, Names kod ad alanında bildirilenler.

  • x:Class özniteliği

    Bu öznitelik, <Window> kodunuzla tanımlanan türle eşlenir: <Window> veya MainWindow. xaml. vb dosyası, sınıfı.

  • Title özniteliği

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

Pencereyi değiştirme

İlk olarak, projeyi çalıştırın ve varsayılan çıktıyı görüntüleyin. Herhangi bir denetim ve bir MainWindowbaşlığı olmadan, açılan bir pencere görürsünüz:

A blank WPF app

Örnek uygulamamız için bu pencere çok büyük ve başlık çubuğu açıklayıcı değildir. XAML 'deki uygun öznitelikleri aşağıdaki değerlere değiştirerek pencerenin başlığını ve 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ştirme ve boyutlandırma konusunda yardımcı olur ve bu da otomatik olarak yapılabilir. Bu XAML 'de size sunulan varsayılan düzen denetimi <Grid> denetimdir.

GridDenetim, tablo gibi satırlar ve sütunlar tanımlamanıza ve denetimleri belirli bir satır ve sütun birleşiminin sınırları içine yerleştirmeyi sağlar. Öğesine eklenen bazı alt denetim veya diğer düzen denetimleri olabilir Grid . Örneğin, başka bir Grid denetimi belirli bir satır ve sütun birleşimine yerleştirebilirsiniz ve bu yeni, Grid daha sonra daha fazla satır ve sütun tanımlayabilir ve kendi alt öğelerine sahip olabilir.

<Grid>Denetim, denetimlerinizin olacağı satırları ve sütunları tanımlar. Bir ızgara her zaman tek bir satır ve bir sütun olarak tanımlanmış, yani varsayılan olarak kılavuz tek bir hücredir. Bu, denetimleri yerleştirme konusunda gerçekten size çok esneklik vermez.

Yeni satır ve sütunları eklemeden önce, öğesine yeni bir öznitelik ekleyin <Grid> : Margin="10" . Bu, kılavuz pencereyi pencereden ayarlar ve biraz daha görünür hale getirir.

Sonra, iki satır ve iki sütun tanımlayarak kılavuz ' ü dört hücreye bölün:

<Window x:Class="Names.LayoutStep2"
        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 Margin="10">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

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

Xaml kod Düzenleyicisi veya XAML Tasarımcısı ' nda kılavuz seçin, XAML tasarımcısının her bir satırı ve sütunu gösterdiğini görürsünüz:

A WPF app with the margin set on a grid

İlk denetimi ekleme

Artık kılavuz oluşturuldığına göre denetim eklemeye başlayabiliriz. İlk olarak, etiket denetimiyle başlayın. <Label><Grid> Öğesinin içinde, satır ve sütun tanımlarından sonra yeni bir öğe oluşturun ve şunun için bir dize değeri verin Names :

<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>İçeriği tanımlar Names . Bazı denetimler içeriği nasıl işleyeceğinizi anladım, diğerleri değildir. Bir denetimin içeriği özelliği ile eşlenir Content . XAML öznitelik söz dizimi aracılığıyla içerik ayarlanıyor, şu biçimi kullanacaksınız: <Label Content="Names" /> . Her iki yol da aynı şeyi gerçekleştirir ve metni göstermek için etiketin içeriğini ayarlar Names .

Aynı halde bir sorunum var, etiket, kılavuzun ilk satırına ve sütununa otomatik olarak atandığı için pencerenin yarısını kaplar. İlk satırımız için bu çok alana ihtiyacım yoktur çünkü yalnızca etiketi için bu satırı kullanacağız. Heightİlk öğesinin özniteliğini <RowDefinition> öğesinden * olarak değiştirin Auto . AutoDeğer, kılavuz satırını, bu örnekte etiket denetimi olan içerik boyutuna göre otomatik olarak boyutlandırır.

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

Tasarımcı 'nın artık kullanılabilir yüksekliğin küçük bir miktarını gösteren etiketi gösterdiğini unutmayın. Artık bir sonraki satırın kaplayacağı daha fazla yer vardır. Çoğu denetim, kaplamaları gereken bazı yükseklik ve genişlik değerlerini tanımlar ve kendileri için en iyi şekilde görünür. Örneğin, etiket denetiminin okuyabilmesini sağlayan bir yükseklik değeri vardır.

A WPF app with the margin set on a grid and a label control in the first row

Denetim yerleşimi

Denetim yerleşimi hakkında konuşalım. Yukarıdaki bölümde oluşturulan etiket, kılavuzun 0. satırına ve 0 sütununa göre otomatik olarak yerleştirildi. Satırlar ve sütunlar için numaralandırma 0 ' dan başlar ve her yeni satır veya sütun için 1 ile artar. Denetim kılavuz ile ilgili herhangi bir şeyi bilmez ve denetim kılavuz içindeki yerleşimini denetlemek için herhangi bir özellik tanımlamaz. Denetim, denetimlerin nasıl yerleştirileceğini tanımlayan kendi kural kümesine sahip başka bir düzen denetimine de yerleştirilmiş olabilir.

Denetim kılavuz bilgisine sahip olmadığında denetimin farklı bir satır veya sütun kullanmasını nasıl söyleirsiniz? Ekli Özellikler! Kılavuz, WPF tarafından sunulan güçlü özellik sisteminden yararlanır. Kılavuz, alt denetimlerin bildirebilen ve kullanabileceği yeni özellikleri tanımlar. Özellikler aslında denetimin kendisinde yok, denetim kılavuza eklendiğinde kılavuz tarafından eklenir.

Kılavuz, bir alt denetimin satır ve sütun yerleşimini belirleyen iki özelliği tanımlar: Grid.Row ve Grid.Column . Bu özellikler denetimden atlanırsa, varsayılan değer olan 0 ' ın sahip olduğu ima edilir; bu nedenle denetim, 0 kılavuzun satır ve sütununa yerleştirilir 0 . <Label>Özniteliği şu şekilde ayarlayarak denetimin yerleşimini değiştirmeyi deneyin Grid.Column1 :

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

Etiketinizin şimdi ikinci sütuna nasıl taşındığını fark edin. Grid.RowGrid.Column Oluşturacağımız sonraki denetimleri yerleştirmek için ve ekli özellikleri kullanabilirsiniz. Şimdilik etiketi 0 satırına geri yükleyin.

Ad liste kutusunu oluşturma

Artık kılavuz doğru boyutlandırıldığından ve etiket oluşturulduktan sonra etiketin altındaki satıra bir liste kutusu denetimi ekleyin. Liste kutusu satır 1 ve sütunda olacaktır 0 . Ayrıca, bu denetime adını vereceğiz lstNames . Bir denetim adlandırıldıktan sonra, arka planda kod içinde başvurulabilir. Ad, özniteliğe sahip denetime atanır x:Name .

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

Ekleyeceğiniz son iki denetim, kullanıcının liste kutusuna eklenecek bir ad girmek için kullanacağı bir metin kutusu ve bir düğmedir. Bununla birlikte, kılavuz için daha fazla satır ve sütun oluşturmayı denemek yerine, bu denetimleri <StackPanel> Düzen denetimine koyacağız.

Yığın paneli denetimlerin nasıl yerleştirildiği kılavuzdan farklıdır. Kılavuza ve iliştirilmiş özelliklerle denetimlerin nerede olmasını istediğinizi söyleirken Grid.RowGrid.Column , yığın paneli ilk denetimi yerleştirerek otomatik olarak ve sonra bir sonraki denetimi yerleştirene kadar devam eder. Her bir denetimi diğerinin altında "yığar".

<StackPanel>Liste kutusundan sonra denetimi oluşturun ve kılavuz satırı 1 sütununa koyun 1 . Şu değere sahip adlı başka bir öznitelik ekleyin Margin5,0,0,0 :

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

MarginÖzniteliği daha önce kılavuzda kullanıldı, ancak yalnızca tek bir değere yerleştiriyoruz 10 . Şimdi yığın panelinde bir değeri kullandık 5,0,0,0 . Kenar boşluğu bir Thickness türdür ve her iki değeri de yorumlayabilir. Bir kalınlık, sırasıyla dikdörtgen bir karenin, sol, üst, sağ, alt kısımdakiher kenarın çevresindeki boşluğu tanımlar. Kenar boşluğunun değeri tek bir değer ise, bu değeri dört kenarı için kullanır.

Sonra, içinde bir <TextBox> ve <Button> denetimi oluşturun <StackPanel> .

<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 tamamlanmıştır. Ancak, uygulamamız aslında işlevsel olması için hiçbir mantığa sahip değil. Daha sonra, denetim olaylarını kodladığımızda bir şey yapmak ve uygulamayı almak için gerekli olacak.

Tıklama olayı için kod ekleme

<Button>Oluşturduğumuz, Click Kullanıcı düğmeye bastığında oluşan bir olaya sahip. Bu olaya abone olabilir ve liste kutusuna bir ad eklemek için kod ekleyebilirsiniz. Bir XAML özniteliği ekleyerek bir denetimin özelliğini ayarladığınız gibi, bir olaya abone olmak için XAML özniteliğini kullanabilirsiniz. ClickÖzniteliğini olarak ayarlayınButtonAddName_Click

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

Şimdi işleyici kodunu oluşturmanız gerekir. Öğesine sağ tıklayın ButtonAddName_Click ve ButtonAddName_Click' i seçin. Bu eylem, girdiğiniz işleyici adıyla eşleşen sizin için arka plan kodunda 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

Sonra, bu üç adımı uygulamak 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 kodlandığına göre, F5 tuşuna basarak veya menüden hata ayıklamayı Başlat ' ı seçerek uygulamayıçalıştırabilirsiniz . Pencere görüntülenir ve metin kutusuna bir ad girip düğmeye tıklayarak ekleyebilirsiniz.

Running a Windows Presentation Foundation (WPF) for .NET app.

Sonraki adımlar