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

  • Makale

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 7'yi kullanmaya başlamak için bkz . Öğretici: Yeni WPF uygulaması oluşturma (WPF .NET).

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • 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.
  • Hem verilerden kullanıcı arabirimini doldurmak hem de verileri ve kullanıcı arabirimini eşitlenmiş durumda tutmak için kullanıcı arabirimini verilere bağlayın.

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

Bahşiş

Bu öğreticide kullanılan örnek kod, Öğretici WPF Uygulama Örnek Kodu'nda 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.

Ön koşullar

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.

  1. Visual Basic veya Visual C# içinde adlı ExpenseItyeni bir WPF Uygulaması projesi oluşturun:

    1. Visual Studio'yu açın ve Başlarken menüsünün altında Yeni proje oluştur'u seçin.

      Yeni proje oluştur iletişim kutusu açılır.

    2. Dil açılan listesinde C# veya Visual Basic'i seçin.

    3. WPF Uygulaması (.NET Framework) şablonunu ve ardından İleri'yi seçin.

      Create a new project dialog

      Yeni projenizi yapılandırın iletişim kutusu açılır.

    4. Proje adını ExpenseIt girin ve Oluştur'u seçin.

      Configure a new project dialog

      Visual Studio projeyi oluşturur ve MainWindow.xaml adlı varsayılan uygulama penceresi için tasarımcıyı açar.

  2. 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. Bu dosyayı, bu örnekte uygulamanın ne zaman başlatıldığını otomatik olarak gösteren MainWindow.xaml kullanı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>

  3. MainWindow.xaml dosyasını açı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.

  4. Window öğesini, aşağıdaki XAML'de gösterildiği gibi olarak NavigationWindowdeğ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 öğesinin olarak NavigationWindowdeğiştirilmesi gerekir. NavigationWindow tüm özelliklerini Windowdevralır. NavigationWindow XAML dosyasındaki öğesi sınıfının bir örneğini NavigationWindow oluşturur. Daha fazla bilgi için bkz . Gezintiye genel bakış.

  5. Etiketlerin Grid arasındaki NavigationWindow öğeleri kaldırın.

  6. öğesinin XAML kodunda NavigationWindow 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>

  7. MainWindow.xaml.vb veya MainWindow.xaml.cs dosyasını açın.

    Bu dosya, MainWindow.xaml dosyasında bildirilen olayları işlemek için kod içeren bir arka planda kod dosyasıdır. Bu dosya, XAML'de tanımlanan pencere için kısmi bir sınıf içerir.

  8. C# kullanıyorsanız, sınıfından türetecek NavigationWindowşekilde sınıfını MainWindow 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.

  1. Projeye yeni bir sayfa ekleyin ve adını verin ExpenseItHome.xaml:

    1. Çözüm Gezgini proje düğümüne ExpenseIt sağ tıklayın ve Sayfa Ekle'yi>seçin.

    2. Yeni Öğe Ekle iletişim kutusunda, Sayfa (WPF) şablonu zaten seçilidir. adını ExpenseItHomegirin ve Ekle'yi seçin.

    Bu sayfa, uygulama başlatıldığında görüntülenen ilk sayfadır. Gider raporunun gösterileceği, seçilecek kişilerin listesi gösterilir.

  2. ExpenseItHome.xaml'ı açın.

  3. öğesini Title "ExpenseIt - Home" olarak ayarlayın.

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

  5. MainWindow.xaml dosyasını açın.

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

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

    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>

    Bahşiş

    Source özelliğini, Özellikler penceresinin Çeşitli kategorisinde de ayarlayabilirsiniz.

    Source property in Properties window

  7. Projeye başka bir yeni WPF sayfası ekleyin ve ExpenseReportPage.xaml::

    1. Çözüm Gezgini proje düğümüne ExpenseIt sağ tıklayın ve Sayfa Ekle'yi>seçin.

    2. Yeni Öğe Ekle iletişim kutusunda Sayfa (WPF) şablonunu seçin. ExpenseReportPage adını girin ve Ekle'yi seçin.

    Bu sayfada, sayfada seçilen ExpenseItHome kişinin gider raporu gösterilir.

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

  9. öğesini Title "ExpenseIt - View Expense" olarak ayarlayın.

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

  11. ExpenseItHome.xaml.vb ve ExpenseReportPage.xaml.vb veya ExpenseItHome.xaml.cs ve ExpenseReportPage.xaml.cs dosyalarını açın.

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

    Kodunuz için ExpenseItHomeaş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

    ExpenseReportPage için aşağıdaki gibi:

    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

  12. Projeye watermark.png adlı bir resim ekleyin. Kendi görüntünüzü oluşturabilir, örnek koddan dosyayı kopyalayabilir veya microsoft/WPF-Samples GitHub deposundan alabilirsiniz.

    1. Proje düğümüne sağ tıklayın ve Var Olan Öğe Ekle'yi>seçin veya Shift Alt+A tuş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'yi seçin.

    3. Çözüm Gezgini görüntü dosyasını seçin, ardından Özellikler penceresinde Derleme Eylemi'ni Kaynak olarak ayarlayın.

Uygulamayı derleme ve çalıştırma

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

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

    Application after you build and run it.

  2. 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ı tanımlar.
  • StackPanel - Alt öğeleri yatay veya dikey olarak yönlendirilebilen tek bir çizgi halinde düzenler.
  • VirtualizingStackPanel - İçeriği yatay veya dikey olarak yönlendirilmiş tek bir satırda düzenler ve sanallaştırır.
  • WrapPanel - Alt öğeleri soldan sağa sıralı konuma yerleştirir ve içeriği içeren kutunun kenarındaki bir sonraki satıra ayırı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 uygulaması için düzen öğesi olarak kullanılır.

Bahşiş

Öğeler hakkında Panel 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, içinde öğesine sütun ve satır tanımları GridExpenseItHome.xamlekleyerek üç satır ve 10 piksel kenar boşluğu içeren tek sütunlu bir tablo oluşturacaksınız.

  1. içinde ExpenseItHome.xamlöğesindeki Grid özelliğini sol, üst, sağ ve alt kenar boşluklarına karşılık gelen "10,0,10,10" olarak ayarlayınMargin:

    <Grid Margin="10,0,10,10">

    Bahşiş

    Kenar Boşluğu değerlerini, Düzen kategorisinin altındaki Özellikler penceresinde de ayarlayabilirsiniz:

    Margin values in Properties window

  2. Satır ve sütun tanımlarını oluşturmak için etiketler arasına Grid aşağıdaki XAML'yi ekleyin:

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

    Height İki satırın değeri olarak Autoayarlanır; bu da satırların satırlardaki içeriğe göre boyutlandırıldığı anlamına gelir. Varsayılan boyut HeightStar , satır yüksekliğinin kullanılabilir alanın ağırlıklı bir oranı olduğu anlamına gelir. Örneğin, her Height biri "*" olan iki satırın her biri kullanılabilir alanın yarısı olan bir yüksekliğe sahiptir.

    Şimdi aşağıdaki Grid XAML'i 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>

Denetim ekleme

Bu bölümde, giriş sayfası kullanıcı arabirimini, gider raporunu görüntülemek üzere bir kişiyi seçtiğiniz kişi listesini gösterecek şekilde güncelleştireceksiniz. Denetimler, kullanıcıların uygulamanızla etkileşim kurmasına olanak sağlayan ui nesneleridir. Daha fazla bilgi için bkz. Denetimler.

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

  • A ListBox (kişi listesi için).
  • A Label (liste üst bilgisi için).
  • A Button (listede seçilen kişinin gider raporunu görüntülemek için tıklayın).

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

  1. içinde ExpenseItHome.xaml, etiketlerin arasına aşağıdaki XAML'yi Grid 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>

    Bahşiş

    Ayrıca, denetimleri Araç Kutusu penceresinden tasarım penceresine sürükleyip Özellikler penceresinde özelliklerini ayarlayarak da oluşturabilirsiniz.

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

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

ExpenseIt sample screenshot displaying a list of names

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.

  1. içindeExpenseItHome.xaml, sabiti 230 piksel olan öğesine başka bir Width sütun ColumnDefinitions ekleyin:

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

  2. öğesine toplam dört satır RowDefinitionsiçin başka bir satır ekleyin:

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

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

  4. Üç denetimin her biri (Border, ListBox ve Button) ve Border öğesi için değerini 1 artırarak Grid.Row 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>

  5. ve </Grid> etiketleri arasında herhangi bir yere <Grid> aşağıdaki XAML'yi ekleyerek Background özelliğini watermark.png resim dosyasına ayarlayın:

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. öğesinden Border önce , "Gider Raporunu Görüntüle" içeriğiyle 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>

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

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

ExpenseIt sample screenshot showing the new image background and page title

Olayları işlemek için kod ekleme

  1. içinde ExpenseItHome.xamlöğesine bir Click olay işleyicisi Button 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>

  2. veya ExpenseItHome.xaml.csöğesini açınExpenseItHome.xaml.vb.

  3. Bir düğme tıklama olay işleyicisi eklemek için sınıfına ExpenseItHome aşağıdaki kodu 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 sayfasında seçilen ExpenseItHome kişinin gider raporunu görüntüler. Bu bölümde ExpenseReportPage kullanıcı arabirimini oluşturacaksınız. Ayrıca çeşitli kullanıcı arabirimi öğelerine arka plan ve dolgu renkleri de ekleyeceksiniz.

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

  2. Etiketler arasına aşağıdaki XAML'yi Grid 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 içinde DataGridgörüntülenmesi dışında ile benzerdirExpenseItHome.xaml.

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

  4. 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.xaml'e eklenen kullanıcı arabirimi öğeleri gösterilmektedir.

ExpenseIt sample screenshot showing the UI just created for the ExpenseReportPage.

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.

  1. Application.xaml veya App.xaml dosyasını açın.

  2. Etiketler arasına aşağıdaki XAML'yi Application.Resources 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: Denetimleri biçimlendirmek Label için.

    • columnHeaderStyle: öğesini biçimlendirmek DataGridColumnHeaderiçin.

    • listHeaderStyle: Liste üst bilgisi Border denetimlerini biçimlendirmek için.

    • listHeaderTextStyle: Liste üst bilgisini biçimlendirmek Labeliçin .

    • buttonStyle: üzerinde ExpenseItHome.xamlbiçimlendirmek Button için.

    Stillerin özellik öğesinin Application.Resources 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.

  3. içinde ExpenseItHome.xamlöğeleri arasındaki Grid 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 ve FontFamily gibi VerticalAlignment özellikler kaldırılır ve stiller uygulanarak değiştirilir. Örneğin , headerTextStyle "Gider Raporunu Görüntüle" Labelöğesine uygulanır.

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

  5. Öğeler arasındaki Grid 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, ve Border öğelerine Label stiller ekler.

  6. Uygulamayı derleyin ve çalıştırın. Pencere görünümü öncekiyle aynıdır.

    ExpenseIt sample screenshot with the same appearance as in the last section.

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

  1. içinde ExpenseItHome.xaml, açılış Grid öğesinden sonra aşağıdaki XAML'yi ekleyerek her bir kişinin verilerini içeren bir XmlDataProvider oluşturun:

    <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 kaynak Grid olarak oluşturulur. Normalde bu veriler dosya olarak yüklenir, ancak kolaylık olması için veriler satır içinde eklenir.

  2. öğesinin <Grid.Resources> içinde, öğesinden sonra içindeki ListBoxverilerin nasıl görüntüleneceğini tanımlayan aşağıdaki <xref:System.Windows.DataTemplate> öğeyi <XmlDataProvider> ekleyin:

    <Grid.Resources>
    <!-- Name item template -->
    <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ış.

  3. Var olanı ListBox aşağıdaki 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, ListBox özelliğini veri kaynağına bağlar ItemsSource ve veri şablonunu olarak ItemTemplateuygular.

Verileri denetimlere Bağlan

Ardından, sayfada seçilen ExpenseItHome adı almak ve ExpenseReportPage oluşturucusunun içine geçirmek için kod ekleyeceksiniz. ExpenseReportPage, geçirilen öğeyle veri bağlamını ayarlar. Bu, ExpenseReportPage.xaml dosyasında tanımlanan denetimlerin bağlandığı öğedir.

  1. ExpenseReportPage.xaml.vb veya ExpenseReportPage.xaml.cs dosyasını açın.

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

  3. veya ExpenseItHome.xaml.csöğesini açınExpenseItHome.xaml.vb.

  4. Olay işleyicisini Click , seçilen kişinin gider raporu verilerini geçiren yeni oluşturucuyu çağıracak şekilde 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.

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

  2. "Name" ve "Department" 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>

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

  4. öğesinin DataGridTextColumn altındaki DataGrid öğelerini ile DataGridTemplateColumn değiştirin ve şablonları bunlara uygulayın. Ayrıca özniteliğini ItemsSource öğesindeki DataGrid değeriyle 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>

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

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

Aşağıdaki çizimde denetimlerin, düzenin, stillerin, veri bağlamanın ve veri şablonlarının ExpenseIt uygulandığı uygulamanın her iki sayfası gösterilmektedir:

Both pages of the app showing the names list and an expense report.

Dekont

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