Öğretici: Visual Studio 2019'da ilk WPF uygulamanızı oluşturma

Bu makalede, çoğu WPF uygulaması için ortak olan öğeleri içeren bir Windows Presentation Foundation (WPF) masaüstü uygulamasının nasıl geliştirildiğini gösterir: Genişletilebilir Uygulama biçimlendirme Dili (XAML) işaretlemesi, arka plan kodu, uygulama tanımları, denetimler, düzen, veri bağlama ve stiller. Uygulamayı geliştirmek için Visual Studio'yu kullanacaksınız.

Önemli

Bu makale .NET Framework için yazılmıştır. .NET'i kullanmaya başlamak için bkz . Öğretici: Yeni WPF uygulaması oluşturma (WPF .NET).

Bu eğitimde şunları öğreniyorsunuz:

WPF projesi oluşturma.
Uygulamanın kullanıcı arabiriminin (UI) görünümünü tasarlamak için XAML kullanın.
Uygulamanın davranışını oluşturmak için kod yazın.
Uygulamayı yönetmek için bir uygulama tanımı oluşturun.
Uygulama kullanıcı arabirimini oluşturmak için denetimler ekleyin ve düzeni oluşturun.
Uygulamanın kullanıcı arabiriminde tutarlı bir görünüm için stiller oluşturun.
Verileri kullanıcı arabirimine bağlayarak hem verilerden kullanıcı arabirimini doldurun hem de verilerle kullanıcı arabirimini senkronize tutun.

Eğitimin sonunda, kullanıcıların seçili kişilerin gider raporlarını görüntülemesine olanak tanıyan bağımsız bir Windows uygulaması oluşturacaksınız. Uygulama, tarayıcı stili bir pencerede barındırılan birkaç WPF sayfasından oluşur.

Tavsiye

Bu öğreticide kullanılan örnek kod, Öğretici WPF Uygulama Örnek Koduadresinde hem Visual Basic hem de C# için kullanılabilir.

Bu sayfanın üst kısmındaki dil seçiciyi kullanarak örnek kodun kod dilini C# ve Visual Basic arasında değiştirebilirsiniz.

Önkoşullar

Visual Studio 2019, .NET masaüstü geliştirme iş yükü yüklü olarak.

Visual Studio'nun en son sürümünü yüklemekle ilgili daha fazla bilgi için, Visual Studio'yu yüklemebölümüne bakın.

Uygulama projesini oluşturma

İlk adım bir uygulama tanımı, iki sayfa ve bir görüntü içeren uygulama altyapısını oluşturmaktır.

Visual Basic veya Visual C# içinde ExpenseItadlı yeni bir WPF Uygulaması projesi oluşturun:
1. Visual Studio'yu açın ve Başlarken menüsünün altında Yeni bir proje oluştur seçeneğini seçin.
  
  Yeni proje oluştur iletişim kutusu açılır.
2. Dil açılan menüsünde C# veya Visual Basicseçin.
3. WPF Uygulaması (.NET Framework) şablonunu seçin ve ardındanseçin.
  
  Yeni projenizi yapılandırma iletişim kutusu açılır.
4. ExpenseIt proje adını girin ve Oluşturdüğmesini seçin.
  
  Visual Studio projeyi oluşturur ve MainWindow.xamladlı varsayılan uygulama penceresi için tasarımcıyı açar.

Application.xaml (Visual Basic) veya App.xaml (C#) dosyasını açın.

Bu XAML dosyası bir WPF uygulamasını ve tüm uygulama kaynaklarını tanımlar. Ayrıca bu dosyayı, uygulamanın ne zaman başlatıldığını otomatik olarak gösteren MainWindow.xamlkullanıcı arabirimini belirtmek için de kullanırsınız.

XAML'niz Visual Basic'te aşağıdaki gibi görünmelidir:

<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        
    </Application.Resources>
</Application>

C# dilinde aşağıdaki gibi:

<Application x:Class="ExpenseIt.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

MainWindow.xamlaçın.

Bu XAML dosyası uygulamanızın ana penceresidir ve sayfalarda oluşturulan içeriği görüntüler. Window sınıfı, bir pencerenin başlığı, boyutu veya simgesi gibi özelliklerini tanımlar ve kapatma veya gizleme gibi olayları işler.
aşağıdaki XAML'de gösterildiği gibi Window öğesini bir NavigationWindowolarak değiştirin:
```
<NavigationWindow x:Class="ExpenseIt.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     ...
</NavigationWindow>
```
Bu uygulama, kullanıcı girişine bağlı olarak farklı içeriğe gider. Bu nedenle ana Window'un NavigationWindowile değiştirilmesi gerekiyor. NavigationWindow Windowtüm özelliklerini devralır. XAML dosyasındaki NavigationWindow öğesi NavigationWindow sınıfının bir örneğini oluşturur. Daha fazla bilgi için bkz. Gezintiye genel bakış.
Grid etiketleri arasındaki NavigationWindow öğelerini kaldırın.

NavigationWindow öğesinin XAML kodunda aşağıdaki özellikleri değiştirin:

Title özelliğini "ExpenseIt" olarak ayarlayın.
Height özelliğini 350 piksel olarak ayarlayın.
Width özelliğini 500 piksel olarak ayarlayın.

XAML'niz Visual Basic için aşağıdaki gibi görünmelidir:

<NavigationWindow x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">
 
</NavigationWindow>

C# için aşağıdaki gibi:

<NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">
    
</NavigationWindow>

MainWindow.xaml.vb veya MainWindow.xaml.csaçın.

Bu dosya, MainWindow.xamliçinde bildirilen olayları işlemek amacıyla kod bulunduran bir arka plan kod dosyasıdır. Bu dosya, XAML'de tanımlanan pencere için kısmi bir sınıf içerir.

C# kullanıyorsanız, MainWindow sınıfını NavigationWindowtüretecek şekilde değiştirin. (Visual Basic'te, XAML'de pencereyi değiştirdiğinizde bu otomatik olarak gerçekleşir.) C# kodunuz şu şekilde görünmelidir:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : NavigationWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Uygulamaya dosya ekleme

Bu bölümde uygulamaya iki sayfa ve bir görüntü ekleyeceksiniz.

Projeye yeni bir sayfa ekleyin ve ExpenseItHome.xamlolarak adlandırın:
1. Çözüm Gezgini'de, ExpenseIt proje düğümüne sağ tıklayın ve >SayfaEkle'yi seçin.
2. Yeni Öğe Ekle iletişim kutusunda, Sayfası (WPF) şablonu zaten seçilidir. adını girin ve ardındanEkle'yi seçin.
Bu sayfa, uygulama başlatıldığında görüntülenen ilk sayfadır. Bir gider raporunu göstermek için seçilecek kişilerin listesi gösterilecektir.
ExpenseItHome.xaml'ı açın.
Title "ExpenseIt - Home" olarak ayarlayın.

DesignHeight 350 piksel ve DesignWidth 500 piksel olarak ayarlayın.

XAML artık Visual Basic için aşağıdaki gibi görünür:

<Page x:Class="ExpenseItHome"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="350" d:DesignWidth="500"
  Title="ExpenseIt - Home">
    <Grid>
        
    </Grid>
</Page>

C# için aşağıdaki gibi:

<Page x:Class="ExpenseIt.ExpenseItHome"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
    Title="ExpenseIt - Home">

    <Grid>
        
    </Grid>
</Page>

MainWindow.xamlaçın.

Source öğesine bir NavigationWindow özelliği ekleyin ve "ExpenseItHome.xaml" olarak ayarlayın.

Bu, ExpenseItHome.xaml uygulama başlatıldığında açılan ilk sayfa olacak şekilde ayarlar.

Visual Basic'te örnek XAML:

<NavigationWindow x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
    
</NavigationWindow>

C# dilinde ise:

<NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
    
</NavigationWindow>

Tavsiye

Özellikleri penceresinin Çeşitli kategorisinde Kaynak özelliğini de ayarlayabilirsiniz.

Kaynak özelliği Özellikler penceresinde

Projeye başka bir yeni WPF sayfası ekleyin ve ExpenseReportPage.xamladlandırın:
1. Çözüm Gezgini'de, ExpenseIt proje düğümüne sağ tıklayın ve >SayfaEkle'yi seçin.
2. Yeni Öğe Ekle iletişim kutusunda Sayfası (WPF) şablonunu seçin. ExpenseReportPageadını girin ve Ekleseçeneğini seçin.
Bu sayfada, ExpenseItHome sayfasında seçilen kişinin gider raporu gösterilir.
ExpenseReportPage.xaml dosyasını açın.
Title "ExpenseIt - View Expense" olarak ayarlayın.

DesignHeight 350 piksel ve DesignWidth 500 piksel olarak ayarlayın.

ExpenseReportPage.xaml artık Visual Basic'te aşağıdaki gibi görünür:

<Page x:Class="ExpenseReportPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
      Title="ExpenseIt - View Expense">
    <Grid>
        
    </Grid>
</Page>

C# dilinde aşağıdaki gibi:

<Page x:Class="ExpenseIt.ExpenseReportPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
    Title="ExpenseIt - View Expense">

    <Grid>
        
    </Grid>
</Page>

ExpenseItHome.xaml.vb açın ve ExpenseReportPage.xaml.vbveya ExpenseItHome.xaml.cs ve ExpenseReportPage.xaml.cs.

Yeni bir Sayfa dosyası oluşturduğunuzda Visual Studio otomatik olarak kod arkası dosyası oluşturur. Bu arka planda kod dosyaları, kullanıcı girişine yanıt verme mantığını işler.

kodunuz ExpenseItHomeiçin aşağıdaki gibi görünmelidir:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseItHome.xaml
    /// </summary>
    public partial class ExpenseItHome : Page
    {
        public ExpenseItHome()
        {
            InitializeComponent();
        }
    }
}

Class ExpenseItHome

End Class

Aşağıdaki gibi ExpenseReportPageiçin:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseReportPage.xaml
    /// </summary>
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

Class ExpenseReportPage

End Class

Projeye watermark.png adlı bir görüntü ekleyin. Kendi görüntünüzü oluşturabilir, örnek koddan dosyayı kopyalayabilir veya GitHub deposundan microsoft/WPF-Samples alabilirsiniz.
1. Proje öğesine sağ tıklayın ve Ekle>Varolan Öğeseçin veya Shift+Alt+Atuşlarına basın.
2. Varolan Öğe Ekle iletişim kutusunda, dosya filtresini Tüm Dosyalar veya Görüntü Dosyalarıolarak ayarlayın, kullanmak istediğiniz görüntü dosyasına gidin ve Ekleöğesini seçin.
3. Çözüm Gezgini'ndegörüntü dosyasını seçin, ardından Özellikler penceresinde Derleme EylemiKaynakolarak ayarlayın.

Uygulamayı derleme ve çalıştırma

Uygulamayı derlemek ve çalıştırmak için F5 basın veya Hata Ayıklama menüsünden Hata Ayıklamayı Başlat seçin.

Aşağıdaki çizimde, NavigationWindow düğmeleri olan uygulama gösterilmektedir:

Uygulamayı derleyip çalıştırdıktan sonra
Visual Studio'ya dönmek için uygulamayı kapatın.

Düzeni oluşturma

Düzen, kullanıcı arabirimi öğelerini yerleştirmek için sıralı bir yol sağlar ve ayrıca kullanıcı arabirimi yeniden boyutlandırıldığında bu öğelerin boyutunu ve konumunu yönetir. Genellikle aşağıdaki düzen denetimlerinden biriyle bir düzen oluşturursunuz:

Canvas - Tuval alanına göre koordinatları kullanarak alt öğeleri açıkça konumlandırabileceğiniz bir alan tanımlar.
DockPanel - Alt öğeleri birbirine göre yatay veya dikey olarak yerleştirebileceğiniz bir alan tanımlar.
Grid - Sütun ve satırlardan oluşan esnek bir kılavuz alanını belirler.
StackPanel - Alt öğeleri yatay veya dikey olarak yönlendirilebilen tek bir satır halinde düzenler.
VirtualizingStackPanel - İçeriği yatay veya dikey olarak yönlendirilen tek bir satırda düzenler ve sanallaştırır.
WrapPanel - Alt öğeleri soldan sağa ardışık pozisyonda yerleştirir ve içeriği, içeren kutunun kenarında bir sonraki satıra aktarır. Sonraki sıralama, Orientation özelliğinin değerine bağlı olarak yukarıdan aşağıya veya sağdan sola sıralı olarak gerçekleşir.

Bu düzen denetimlerinin her biri, alt öğeleri için belirli bir düzen türünü destekler. ExpenseIt sayfalar yeniden boyutlandırılabilir ve her sayfada diğer öğelerle birlikte yatay ve dikey olarak düzenlenmiş öğeler bulunur. Bu örnekte, Grid uygulama için düzen öğesi olarak kullanılır.

Tavsiye

Panel öğeleri hakkında daha fazla bilgi için bkz. Panellere genel bakış. Düzen hakkında daha fazla bilgi için bkz. Düzen.

Bu bölümde, Gridiçindeki ExpenseItHome.xaml sütun ve satır tanımları ekleyerek üç satır ve 10 piksel kenar boşluğu içeren tek sütunlu bir tablo oluşturacaksınız.

ExpenseItHome.xamliçinde, Margin öğesindeki Grid özelliğini sol, üst, sağ ve alt kenar boşluklarına karşılık gelen "10,0,10,10" olarak ayarlayın:
```
<Grid Margin="10,0,10,10">
```
Tavsiye

Kenar Boşluğu değerlerini Özellikleri penceresinde, Düzen kategorisinin altında da ayarlayabilirsiniz:

Özellikler penceresinde kenar boşluğu değerlerini
Satır ve sütun tanımlarını oluşturmak için Grid etiketleri arasına aşağıdaki XAML'yi ekleyin:
```
<Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
```
İki satırın Height Autoolarak ayarlanır; bu da satırların satırlardaki içeriğe göre boyutlandırıldığı anlamına gelir. Varsayılan Height Star boyutlandırmadır, bu da satır yüksekliğinin kullanılabilir alanın ağırlıklı bir oranı olduğu anlamına gelir. Örneğin, her birinin Height "*" olan iki satırın her biri kullanılabilir alanın yarısı olan bir yüksekliğe sahiptir.

Grid şimdi aşağıdaki XAML'yi içermelidir:
```
<Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>
```

Kontrol ekleyin

Bu bölümde, ana sayfa kullanıcı arabirimini, bir kişi listesini gösterilecek şekilde güncelleyecek ve bu listeden birini seçerek gider raporunu görüntüleyeceksiniz. Denetimler, kullanıcıların uygulamanızla etkileşim kurmasına olanak sağlayan ui nesneleridir. Daha fazla bilgi için bkz. Kontroller.

Bu kullanıcı arabirimini oluşturmak için aşağıdaki öğeleri ExpenseItHome.xamlekleyeceksiniz:

ListBox (kişi listesi için).
"Liste başlığı için bir Label."
Bir Button (Listedeki seçilen kişinin gider raporunu görüntülemek için tıklayın).

Her denetim, Grid ekli özelliği ayarlanarak Grid.Row satırına yerleştirilir. Ekli özellikler hakkında daha fazla bilgi için bkz. Ekli Özelliklere Genel Bakış.

ExpenseItHome.xamliçinde, Grid etiketleri arasına aşağıdaki XAML'yi ekleyin:


<!-- People list -->
<Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
    <Label VerticalAlignment="Center" Foreground="White">Names</Label>
</Border>
<ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
    <ListBoxItem>Mike</ListBoxItem>
    <ListBoxItem>Lisa</ListBoxItem>
    <ListBoxItem>John</ListBoxItem>
    <ListBoxItem>Mary</ListBoxItem>
</ListBox>

<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,10" Width="125" Height="25" HorizontalAlignment="Right">View</Button>

Tavsiye

Denetimleri, Araç Kutusu penceresinden tasarım penceresine sürükleyip Özellikler penceresinde ayarlayarak da oluşturabilirsiniz.

Uygulamayı derleyin ve çalıştırın.

Aşağıdaki çizimde oluşturduğunuz denetimler gösterilmektedir:

ExpenseIt örnek ekran görüntüsü adlar listesini gösteren

Resim ve başlık ekleme

Bu bölümde, giriş sayfası kullanıcı arabirimini bir resim ve sayfa başlığıyla güncelleştireceksiniz.

ExpenseItHome.xaml'da, sabit ColumnDefinitions 230 piksel olan Width başka bir sütun ekleyin:

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

RowDefinitions'a toplam dört satır olacak şekilde başka bir satır ekleyin.

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

Üç denetimin her birinde (Border, ListBox ve Button) Grid.Column özelliğini 1 olarak ayarlayarak denetimleri ikinci sütuna taşıyın.

Üç denetimin her biri için (Border, ListBox ve Button) ve Border öğesi için Grid.Row değerini 1 artırarak her denetimi bir satır aşağı taşıyın.

Üç denetim için XAML artık aşağıdaki gibi görünür:

  <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
  </Border>
  <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
  </ListBox>

  <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>

ve etiketleri arasında herhangi bir yere aşağıdaki XAML'yi ekleyerek <Grid> özelliğini </Grid> görüntü dosyasına ayarlayın:
```
<Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>
```

Border öğesinden önce , "Gider Raporunu Görüntüle" içeriğine sahip bir Label ekleyin. Bu etiket, sayfanın başlığıdır.

<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    View Expense Report
</Label>

Uygulamayı derleyin ve çalıştırın.

Aşağıdaki çizimde, yeni eklediğiniz sonuçların sonuçları gösterilmektedir:

ExpenseIt yeni resim arka planını ve sayfa başlığını gösteren örnek ekran görüntüsü

Olayları işlemek için kod ekleme

ExpenseItHome.xamliçinde, Click öğesine bir Button olay işleyicisi ekleyin. Daha fazla bilgi için bkz. Nasıl yapılır:basit bir olay işleyicisi oluşturma.

  <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>

ExpenseItHome.xaml.vb veya ExpenseItHome.xaml.csaçın.

Düğme tıklama olay işleyicisi eklemek için aşağıdaki kodu ExpenseItHome sınıfına ekleyin. Olay işleyicisi ExpenseReportPage sayfasını açar.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage();
    this.NavigationService.Navigate(expenseReportPage);
}

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' View Expense Report
    Dim expenseReportPage As New ExpenseReportPage()
    Me.NavigationService.Navigate(expenseReportPage)

End Sub

ExpenseReportPage kullanıcı arabirimini oluşturma

ExpenseReportPage.xaml, ExpenseItHome sayfasında seçilen kişinin gider raporunu görüntüler. Bu bölümde, ExpenseReportPagekullanıcı arabirimini oluşturacaksınız. Ayrıca çeşitli kullanıcı arabirimi öğelerine arka plan ve dolgu renkleri de ekleyeceksiniz.

ExpenseReportPage.xaml dosyasını açın.

Grid etiketleri arasına aşağıdaki XAML'yi ekleyin:

 <Grid.Background>
     <ImageBrush ImageSource="watermark.png" />
 </Grid.Background>
 <Grid.ColumnDefinitions>
     <ColumnDefinition Width="230" />
     <ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition />
 </Grid.RowDefinitions>


 <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
 FontWeight="Bold" FontSize="18" Foreground="#0066cc">
     Expense Report For:
 </Label>
 <Grid Margin="10" Grid.Column="1" Grid.Row="1">

     <Grid.ColumnDefinitions>
         <ColumnDefinition />
         <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
         <RowDefinition />
     </Grid.RowDefinitions>

     <!-- Name -->
     <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
         <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
         <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
     </StackPanel>

     <!-- Department -->
     <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
         <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
         <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
     </StackPanel>

     <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
           HorizontalAlignment="Left">
         <!-- Expense type and Amount table -->
         <DataGrid  AutoGenerateColumns="False" RowHeaderWidth="0" >
             <DataGrid.ColumnHeaderStyle>
                 <Style TargetType="{x:Type DataGridColumnHeader}">
                     <Setter Property="Height" Value="35" />
                     <Setter Property="Padding" Value="5" />
                     <Setter Property="Background" Value="#4E87D4" />
                     <Setter Property="Foreground" Value="White" />
                 </Style>
             </DataGrid.ColumnHeaderStyle>
             <DataGrid.Columns>
                 <DataGridTextColumn Header="ExpenseType" />
                 <DataGridTextColumn Header="Amount"  />
             </DataGrid.Columns>
         </DataGrid>
     </Grid>
 </Grid>

Bu kullanıcı arabirimi, rapor verilerinin ExpenseItHome.xamliçinde görüntülenmesi dışında DataGridile benzerdir.

Uygulamayı derleyin ve çalıştırın.
Görünüm düğmesini seçin.

Gider raporu sayfası görüntülenir. Ayrıca geri gezinti düğmesinin etkinleştirildiğine de dikkat edin.

Aşağıdaki çizimde, ExpenseReportPage.xamleklenen kullanıcı arabirimi öğeleri gösterilmektedir.

ExpenseReportPage için yeni oluşturulan kullanıcı arabirimini gösteren ExpenseIt örnek ekran görüntüsü.

Stil denetimleri

Çeşitli öğelerin görünümü genellikle bir kullanıcı arabirimindeki aynı türdeki tüm öğeler için aynıdır. Kullanıcı arabirimi, görünümleri birden çok öğe arasında yeniden kullanılabilir hale getirmek için stilleri kullanır. Stillerin yeniden kullanılabilirliği, XAML oluşturmayı ve yönetimini basitleştirmeye yardımcı olur. Bu bölüm, önceki adımlarda tanımlanan öğe başına öznitelikleri stiller ile değiştirir.

Application.xaml veya App.xamlaçın.

Application.Resources etiketleri arasına aşağıdaki XAML'yi ekleyin:


<!-- Header text style -->
<Style x:Key="headerTextStyle">
    <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
    <Setter Property="Label.FontWeight" Value="Bold"></Setter>
    <Setter Property="Label.FontSize" Value="18"></Setter>
    <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
</Style>

<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="0,0,0,5" />
</Style>

<!-- DataGrid header style -->
<Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
    <Setter Property="Foreground" Value="White" />
</Style>

<!-- List header style -->
<Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
</Style>

<!-- List header text style -->
<Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
</Style>

<!-- Button style -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="125" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="0,10,0,0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

Bu XAML aşağıdaki stilleri ekler:

headerTextStyle: sayfa başlığını Labelbiçimlendirmek için.
labelStyle: Label denetimlerini biçimlendirmek için.
columnHeaderStyle: DataGridColumnHeaderbiçimlendirmek için.
listHeaderStyle: Listenin üst bilgisini Border kontrol öğeleriyle biçimlendirmek için.
listHeaderTextStyle: Labelliste üst bilgisini biçimlendirmek için.
buttonStyle: Button'i ExpenseItHome.xamlüzerinde biçimlendirmek için.

Stillerin Application.Resources özellik öğesinin kaynakları ve alt öğeleri olduğuna dikkat edin. Bu konumda, stiller bir uygulamadaki tüm öğelere uygulanır. .NET uygulamasında kaynakları kullanma örneği için bkz. Uygulama Kaynaklarını Kullanma.

ExpenseItHome.xamliçinde, Grid öğeleri arasındaki her şeyi aşağıdaki XAML ile değiştirin:

   <Grid.Background>
       <ImageBrush ImageSource="watermark.png"  />
   </Grid.Background>
  
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="230" />
       <ColumnDefinition />
   </Grid.ColumnDefinitions>
   
   <Grid.RowDefinitions>
       <RowDefinition/>
       <RowDefinition Height="Auto"/>
       <RowDefinition />
       <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>

   <!-- People list -->
  
   <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
       View Expense Report
   </Label>
   
   <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
       <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
   </Border>
   <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
       <ListBoxItem>Mike</ListBoxItem>
       <ListBoxItem>Lisa</ListBoxItem>
       <ListBoxItem>John</ListBoxItem>
       <ListBoxItem>Mary</ListBoxItem>
   </ListBox>

   <!-- View report button -->
   <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>

Her denetimin görünümünü tanımlayan VerticalAlignment ve FontFamily gibi özellikler kaldırılır ve stiller uygulanarak değiştirilir. Örneğin, headerTextStyleLabel"Gider Raporunu Görüntüle" öğesine uygulanır.

ExpenseReportPage.xaml dosyasını açın.

Grid öğeleri arasındaki her şeyi aşağıdaki XAML ile değiştirin:

  <Grid.Background>
      <ImageBrush ImageSource="watermark.png" />
  </Grid.Background>
  <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
  </Grid.RowDefinitions>


  <Label Grid.Column="1" Style="{StaticResource headerTextStyle}">
      Expense Report For:
  </Label>
  <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
          <Label Style="{StaticResource labelStyle}">Name:</Label>
          <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
  Orientation="Horizontal">
          <Label Style="{StaticResource labelStyle}">Department:</Label>
          <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
            HorizontalAlignment="Left">
          <!-- Expense type and Amount table -->
          <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" 
                    AutoGenerateColumns="False" RowHeaderWidth="0" >
              <DataGrid.Columns>
                  <DataGridTextColumn Header="ExpenseType" />
                  <DataGridTextColumn Header="Amount"  />
              </DataGrid.Columns>
          </DataGrid>
      </Grid>
  </Grid>

Bu XAML, Label ve Border öğelerine stiller ekler.

Uygulamayı derleyin ve çalıştırın. Pencere görünümü öncekiyle aynıdır.
Visual Studio'ya dönmek için uygulamayı kapatın.

Bir denetime veri bağlama

Bu bölümde, çeşitli denetimlere bağlı XML verilerini oluşturacaksınız.

ExpenseItHome.xaml'de, Grid öğesini açtıktan sonra, her bir kişinin verilerini içeren bir XmlDataProvider oluşturmak için aşağıdaki XAML'yi ekleyin:

<Grid.Resources>
    <!-- Expense Report Data -->
    <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
            <Expenses xmlns="">
                <Person Name="Mike" Department="Legal">
                    <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                    <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                </Person>
                <Person Name="Lisa" Department="Marketing">
                    <Expense ExpenseType="Document printing"
          ExpenseAmount="50"/>
                    <Expense ExpenseType="Gift" ExpenseAmount="125" />
                </Person>
                <Person Name="John" Department="Engineering">
                    <Expense ExpenseType="Magazine subscription" 
         ExpenseAmount="50"/>
                    <Expense ExpenseType="New machine" ExpenseAmount="600" />
                    <Expense ExpenseType="Software" ExpenseAmount="500" />
                </Person>
                <Person Name="Mary" Department="Finance">
                    <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                </Person>
            </Expenses>
        </x:XData>
    </XmlDataProvider>
</Grid.Resources>

Veriler bir Grid kaynağı olarak oluşturulur. Normalde bu veriler dosya olarak yüklenir, ancak kolaylık olması için veriler satır içinde eklenir.

<Grid.Resources> öğesinde, <xref:System.Windows.DataTemplate> öğesinden sonra ListBoxiçinde verilerin nasıl görüntüleneceğini tanımlayan aşağıdaki <XmlDataProvider> öğesini ekleyin:
```
<Grid.Resources>
    
    <DataTemplate x:Key="nameItemTemplate">
        <Label Content="{Binding XPath=@Name}"/>
    </DataTemplate>
</Grid.Resources>
```
Veri şablonları hakkında daha fazla bilgi için bkz. Veri şablonu oluşturmaya genel bakış.

Mevcut ListBox'ı aşağıda verilen XAML ile değiştirin:

<ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
         ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
         ItemTemplate="{StaticResource nameItemTemplate}">
</ListBox>

Bu XAML, ItemsSource ListBox özelliğini veri kaynağına bağlar ve veri şablonunu ItemTemplateolarak uygular.

Verileri denetimlere bağlama

Ardından, ExpenseItHome sayfasında seçilen adı almak ve ExpenseReportPageoluşturucusuna geçirmek için kod ekleyeceksiniz. ExpenseReportPage veri bağlamını geçirilen öğeyle ayarlar; bu, ExpenseReportPage.xaml içinde tanımlanan denetimlerin bağlandığı şeydir.

ExpenseReportPage.xaml.vb veya ExpenseReportPage.xaml.csaçın.

Seçilen kişinin gider raporu verilerini geçirebilmeniz için nesne alan bir oluşturucu ekleyin.

public partial class ExpenseReportPage : Page
{
    public ExpenseReportPage()
    {
        InitializeComponent();
    }

    // Custom constructor to pass expense report data
    public ExpenseReportPage(object data):this()
    {
        // Bind to expense report data.
        this.DataContext = data;
    }
}

Partial Public Class ExpenseReportPage
    Inherits Page
    Public Sub New()
        InitializeComponent()
    End Sub

    ' Custom constructor to pass expense report data
    Public Sub New(ByVal data As Object)
        Me.New()
        ' Bind to expense report data.
        Me.DataContext = data
    End Sub

End Class

ExpenseItHome.xaml.vb veya ExpenseItHome.xaml.csaçın.

seçilen kişinin gider raporu verilerini geçiren yeni oluşturucuyu çağırmak için Click olay işleyicisini değiştirin.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);
}

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' View Expense Report
    Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
    Me.NavigationService.Navigate(expenseReportPage)

End Sub

Veri şablonlarını içeren stil verileri

Bu bölümde, veri şablonlarını kullanarak veriye bağlı listelerdeki her öğenin kullanıcı arabirimini güncelleştireceksiniz.

ExpenseReportPage.xaml dosyasını açın.

"Ad" ve "Departman" Label öğelerinin içeriğini uygun veri kaynağı özelliğine bağlayın. Veri bağlama hakkında daha fazla bilgi için bkz. Veri bağlamaya genel bakış.

<!-- Name -->
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
    <Label Style="{StaticResource labelStyle}">Name:</Label>
    <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>
</StackPanel>

<!-- Department -->
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
    <Label Style="{StaticResource labelStyle}">Department:</Label>
    <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label>
</StackPanel>

açılış Grid öğesinden sonra, gider raporu verilerinin nasıl görüntüleneceğini tanımlayan aşağıdaki veri şablonlarını ekleyin:

<!--Templates to display expense report data-->
<Grid.Resources>
    <!-- Reason item template -->
    <DataTemplate x:Key="typeItemTemplate">
        <Label Content="{Binding XPath=@ExpenseType}"/>
    </DataTemplate>
    <!-- Amount item template -->
    <DataTemplate x:Key="amountItemTemplate">
        <Label Content="{Binding XPath=@ExpenseAmount}"/>
    </DataTemplate>
</Grid.Resources>

DataGridTextColumn öğelerini DataGridTemplateColumn öğesinin altındaki DataGrid ile değiştirin ve şablonları bunlara uygulayın. Ayrıca, ItemsSource özniteliğini değeriyle birlikte DataGrid Element içinde belirtin.

<!-- Expense type and Amount table -->
<DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >
   
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" />
        <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" />
    </DataGrid.Columns>
    
</DataGrid>

Uygulamayı derleyin ve çalıştırın.
Bir kişi seçin ve ardından Görünüm düğmesini seçin.

Aşağıdaki çizimde denetimler, düzen, stiller, veri bağlama ve veri şablonları uygulanmış ExpenseIt uygulamasının her iki sayfası gösterilmektedir:

Hem ad listesini hem de gider raporunu gösteren uygulamanın her iki sayfası.

Uyarı

Bu örnek, WPF'nin belirli bir özelliğini gösterir ve güvenlik, yerelleştirme ve erişilebilirlik gibi şeyler için en iyi yöntemlerin tümünü izlemez. WPF ve .NET uygulama geliştirme en iyi yöntemlerinin kapsamlı kapsamı için aşağıdaki konulara bakın:

Sonraki Adımlar

Bu kılavuzda, Windows Presentation Foundation (WPF) kullanarak kullanıcı arabirimi oluşturmaya yönelik bir dizi teknik öğrendiniz. Artık veriye bağlı bir .NET uygulamasının yapı taşları hakkında temel bilgilere sahip olmanız gerekir. WPF mimarisi ve programlama modelleri hakkında daha fazla bilgi için aşağıdaki konulara bakın:

Uygulama oluşturma hakkında daha fazla bilgi için aşağıdaki konulara bakın:

Ayrıca bakınız

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-05-07

Aracılığıyla paylaş

Öğretici: Visual Studio 2019'da ilk WPF uygulamanızı oluşturma

Önkoşullar

Uygulama projesini oluşturma

Uygulamaya dosya ekleme

Uygulamayı derleme ve çalıştırma

Düzeni oluşturma

Kontrol ekleyin

Resim ve başlık ekleme

Olayları işlemek için kod ekleme

ExpenseReportPage kullanıcı arabirimini oluşturma

Stil denetimleri

Bir denetime veri bağlama

Verileri denetimlere bağlama

Veri şablonlarını içeren stil verileri

Sonraki Adımlar

Ayrıca bakınız

Geri Bildirim

Ek kaynaklar