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

Bu makalede, çoğu WPF uygulamasında ortak olan öğeleri içeren bir Windows Presentation Foundation (WPF) masaüstü uygulaması geliştirmeyi gösterir: Extensible Application Markup Language (XAML) işaretlemesi, arka plan kodu, uygulama tanımları, denetimler, düzen, veri bağlama ve stiller. Uygulamayı geliştirmek için Visual Studio.

Önemli

Bu makale, .NET Framework. .NET 5 veya .NET 6'ya başlarken bkz. Öğretici: Yeni bir WPF uygulaması oluşturma (WPF .NET).

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

  • WPF projesi oluşturun.
  • 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şiler için gider raporlarını görüntülemelerine olanak Windows tek başına bir Windows uygulamasına sahip oluruz. Uygulama, tarayıcı stili bir pencerede barındırılan çeşitli WPF sayfalarından oluşur.

İpucu

Bu öğreticide kullanılan örnek kod hem Visual Basic hem de C# için Öğretici WPF Uygulaması Örnek Kodu'nda kullanılabilir.

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

Önkoşullar

  • Visual Studio .NET masaüstü geliştirme iş yükünün yüklü olduğu bir 2019 sürümü.

    Uygulamanın en son sürümünü yükleme hakkında daha fazla bilgi Visual Studio bkz. Yükleme Visual Studio.

Uygulama projesini oluşturma

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

  1. Visual Basic veya Visual C# Visual Basic yeni bir WPF Uygulaması projesi ExpenseIt oluşturun:

    1. Yeni Visual Studio açın ve Yeni proje oluştur'a tıklayın Kullanmaya başlayın seçin.

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

    2. Dil açılan listesinde C# veya dil Visual Basic.

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

      Yeni proje oluştur iletişim kutusu

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

    4. Proje adını girin ve ExpenseIt Oluştur'a basın.

      Yeni proje yapılandırma iletişim kutusu

      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#) açın.

    Bu XAML dosyası bir WPF uygulamasını ve tüm uygulama kaynaklarını tanımlar. Bu dosyayı, uygulama başlatıldığında otomatik olarak gösteren kullanıcı arabirimini (bu durumda MainWindow.xaml) belirtmek için de kullanırsanız.

    XAML'niz aşağıdaki gibi Visual Basic:

    <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# ile 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'i açın.

    Bu XAML dosyası, uygulamanın ana penceresidir ve sayfalarda oluşturulan içeriği görüntüler. sınıfı, bir pencerenin başlığı, boyutu veya simgesi gibi özelliklerini tanımlar ve kapatma veya gizleme Window gibi olayları işler.

  4. Aşağıdaki Window NavigationWindow XAML'de gösterildiği gibi öğesini olarak değiştirebilirsiniz:

    <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çeriklere giditir. Bu nedenle ana Window olarak değiştirilenin olması NavigationWindow gerekir. NavigationWindow tüm özelliklerini Window devralıyor. NavigationWindowXAML 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 öğeleri NavigationWindow kaldırın.

  6. öğesi için XAML kodunda aşağıdaki özellikleri NavigationWindow değiştirin:

    • Özelliğini Title " " olarak ExpenseIt ayarlayın.

    • özelliğini Height 350 piksel olarak ayarlayın.

    • özelliğini Width 500 piksel olarak ayarlayın.

    XAML'niz aşağıdaki gibi Visual Basic:

    <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 de 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'yi açın.

    Bu dosya, MainWindow.xaml içinde bildirilen olayları işlemek için kod içeren bir arka 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 MainWindow türetilen sınıfını NavigationWindow değiştirebilirsiniz. (Visual Basic XAML'de pencereyi değiştirerek bu otomatik olarak gerçekleşir.) C# kodunuz şimdi şöyle görünüyor olmalı:

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

  1. Projeye yeni bir sayfa ekleyin ve olarak ad ExpenseItHome.xaml girin:

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

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

    Bu sayfa, uygulama başlatlendiğinde görüntülenen ilk sayfadır. Gider raporunu göstermek için seçecek kişilerin listesini gösterir.

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

  3. " Title " olarak ExpenseIt - Home ayarlayın.

  4. DesignHeight350 piksel ve DesignWidth 500 piksel olarak ayarlayın.

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

    <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 de 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'i açın.

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

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

    Visual Basic'de ö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>
    

    Ve C# içinde:

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

    İpucu

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

    Özellikler penceresi'de kaynak özelliği

  7. Projeye başka bir yeni WPF sayfası ekleyin ve expenseReportPage.xaml olarak ad girin:

    1. Bu Çözüm Gezgini proje düğümüne sağ tıklayın ExpenseIt 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 kişinin gider raporu ExpenseItHome görüntülenir.

  8. ExpenseReportPage.xaml'i açın.

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

  10. DesignHeight350 piksel ve DesignWidth 500 piksel olarak ayarlayın.

    ExpenseReportPage.xaml artık aşağıdaki gibi Visual Basic:

    <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# ile 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'yi açın.

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

    Kodunuz için aşağıdaki gibi görünüyor olması ExpenseItHome gerekir:

    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 de 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. Projeyewatermark.png adlı bir görüntü ekleyin. Kendi görüntülerinizi oluşturabilir, örnek koddan dosyayı kopyalayıp microsoft/WPF-Samples GitHub edinebilirsiniz.

    1. Proje düğümüne sağ tıklayın ve Var Olan Öğe Ekle'yi > seçin veya Shift Alt + A'ya + basın.

    2. Var Olan Öğeyi 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 göz atarak Ekle'yi seçin.

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 çizim, düğmeleri içeren uygulamayı göstermektedir NavigationWindow :

    Uygulamanızı derleyip çalıştırdıktan sonra.

  2. Visual Studio geri dönmek için uygulamayı kapatın.

Düzen oluşturma

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

  • Canvas -Tuval alanına göreli koordinatları kullanarak alt öğeleri açıkça konumlandırabileceğiniz bir alan tanımlar.
  • DockPanel -Alt öğeleri yatay veya dikey olarak birbirlerine göre düzenlemek için kullanabileceğ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önelimli tek bir satıra yerleştirir.
  • VirtualizingStackPanel -İçeriği yatay veya dikey olarak tek bir satırda düzenler ve sanallaştırır.
  • WrapPanel -Alt öğeleri soldan sağa, kapsayan kutunun kenarındaki içerikleri sonraki satıra kadar konumlandırır. Yönlendirme özelliğinin değerine bağlı olarak, sonraki sıralama yukarıdan aşağıya doğru veya sağdan sola doğru bir şekilde 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 sayfanın diğer öğelerin yanı sıra yatay ve dikey olarak düzenlenmiş öğeleri vardır. Bu örnekte, Grid uygulama için düzen öğesi olarak kullanılır.

İpucu

Öğeler hakkında daha fazla bilgi için Panel bkz. panellere genel bakış. Düzen hakkında daha fazla bilgi için bkz. Düzen.

Bu bölümde, içinde sütun ve satır tanımları ekleyerek üç satırı ve 10 piksellik bir kenar boşluğu içeren tek sütunlu bir tablo oluşturursunuz Grid ExpenseItHome.xaml .

  1. İçinde, ExpenseItHome.xaml Margin Grid öğesinde ö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">
    

    İpucu

    Ayrıca, Özellikler penceresinde, Düzen kategorisi altında kenar boşluğu değerlerini de ayarlayabilirsiniz:

    Özellikler penceresi kenar boşluğu değerleri

  2. GridSatır ve sütun tanımları oluşturmak için AŞAĞıDAKI xaml etiketleri arasına ekleyin:

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

    Heightİki satır olarak ayarlanır Auto , yani satırlar satırlardaki içeriğe göre boyutlandırılır. Varsayılan değer Height Star boyutlardır, bu da satır yüksekliğinin, kullanılabilir alanın ağırlıklı oransıdır. Örneğin, her biri Height "*" olan iki satır, 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>
    

Denetim Ekle

Bu bölümde, giriş sayfası kullanıcı arabirimini, bir kişinin gider raporlarını görüntülemek için bir kişi seçtiğiniz bir kişi listesini gösterecek şekilde güncelleştireceksiniz. Denetimler, kullanıcıların uygulamanızla etkileşime geçmesini sağlayan UI nesneleridir. Daha fazla bilgi için bkz. denetimler.

Bu Kullanıcı arabirimini oluşturmak için aşağıdaki öğeleri öğesine ekleyin ExpenseItHome.xaml :

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

Her denetim, Grid iliştirilmiş özelliği ayarlanarak öğesinin bir satırına yerleştirilir Grid.Row . Ekli Özellikler hakkında daha fazla bilgi için bkz. ekli özelliklere genel bakış.

  1. İçinde ExpenseItHome.xaml AŞAĞıDAKI xaml 'yi Etiketler arasına bir yere ekleyin Grid :

    
    <!-- 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,0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>
    

    İpucu

    Ayrıca, denetimleri araç kutusu penceresinden tasarım penceresine sürükleyerek ve sonra Ö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 örnek bir ad listesini görüntüleyen ekran görüntüsü

Görüntü ve başlık ekleme

Bu bölümde, ana sayfa Kullanıcı arabirimini bir görüntüyle ve bir sayfa başlığıyla güncelleştireceksiniz.

  1. İçinde, ExpenseItHome.xaml ColumnDefinitions 230 piksellik bir sabit ile başka bir sütun ekleyin Width :

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="230" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
  2. RowDefinitionsToplam dört satır için başka bir satır ekleyin:

    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
  3. Grid.ColumnHer üç denetimin (kenarlık, ListBox ve düğme) her birinde özelliği 1 olarak ayarlayarak denetimleri ikinci sütuna taşıyın.

  4. Grid.RowÜç denetimin (kenarlık, ListBox ve düğme) ve kenarlık öğesinin her biri için 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>
    
  5. Aşağıdaki XAML 'yi ve etiketleri arasında bir yere ekleyerek Arkaplan özelliğini watermark.png görüntü dosyasına ayarlayın <Grid> </Grid> :

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Öğesinden önce Border , Label "harcama raporu görüntüle" içerikli bir öğesi 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 eklediklerinize ilişkin sonuçlar gösterilmektedir:

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

Olayları işlemek için kod ekleme

  1. İçinde ExpenseItHome.xaml , öğesine bir Click olay işleyicisi ekleyin Button . Daha fazla bilgi için bkz. nasıl yapılır: basit 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 öğesini açın ExpenseItHome.xaml.vb ExpenseItHome.xaml.cs .

  3. ExpenseItHomeBir düğme tıklama olayı işleyicisi eklemek için aşağıdaki kodu 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 için Kullanıcı arabirimi oluşturma

ExpenseReportPage. xaml , sayfada seçili olan kişinin gider raporunu görüntüler ExpenseItHome . Bu bölümde, ExpenseReportPage için Kullanıcı arabirimi oluşturacaksınız. Ayrıca, çeşitli UI öğelerine arkaplan ve Fill renkleri de ekleyeceksiniz.

  1. ExpenseReportPage. xaml' i açın.

  2. Aşağıdaki XAML etiketleri arasına ekleyin Grid :

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

    ExpenseItHome.xaml Rapor verileri bir içinde görüntülenirken, bu kullanıcı arabirimi öğesine benzerdir DataGrid .

  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 gezinme düğmesinin etkin olduğuna dikkat edin.

Aşağıdaki çizimde, ExpenseReportPage. xaml'e eklenen UI öğeleri gösterilmektedir.

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

Stil denetimleri

Çeşitli öğelerin görünümü, bir kullanıcı arabirimindeki aynı türdeki tüm öğeler için genellikle aynıdır. UI, 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şturma ve yönetimini basitleştirmeye yardımcı olur. Bu bölüm, önceki adımlarda tanımlanan öğe başına özniteliklerin stil ile yerini alır.

  1. Application. xaml veya app. xaml açın.

  2. Aşağıdaki XAML etiketleri arasına ekleyin Application.Resources :

    
    <!-- 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ı biçimlendirmek için Label .

    • labelStyle: Denetimleri biçimlendirmek için Label .

    • columnHeaderStyle: Öğesini biçimlendirmek için DataGridColumnHeader .

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

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

    • buttonStyle: ' İ biçimlendirmek Button için ExpenseItHome.xaml .

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

  3. İçinde ExpenseItHome.xaml , öğeler arasındaki her şeyi Grid 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>
    

    VerticalAlignmentVe FontFamily her bir denetimin görünümünü tanımlayan özellikler, stiller uygulanarak kaldırılır ve değiştirilmez. Örneğin, headerTextStyle "harcama raporu görüntüle" öğesine uygulanır Label .

  4. ExpenseReportPage. xaml' i açın.

  5. GridAŞAĞıDAKI XAML ile öğeler arasındaki her şeyi 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 öğelerine stiller ekler Border .

  6. Uygulamayı derleyin ve çalıştırın. Pencere görünümü daha önce olduğu gibi.

    En son bölümle aynı görünüme sahip olan ExpenseIt örnek ekran görüntüsü.

  7. Visual Studio geri dönmek için uygulamayı kapatın.

Verileri bir denetime bağlama

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

  1. ' De, ExpenseItHome.xaml açılış Grid öğesinden sonra, XmlDataProvider her bir kişiye ait verileri içeren bir 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 kaynak olarak oluşturulur Grid . Normalde bu veriler bir dosya olarak yüklenir, ancak kolaylık sağlaması için veriler satır içi eklenir.

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

    <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 ItemsSource , öğesinin özelliğini ListBox veri kaynağına bağlar ve veri şablonunu olarak uygular ItemTemplate .

denetimlere veri Bağlan

Daha sonra, sayfada seçilen adı almak için kod ekleyeceksiniz ExpenseItHome ve bunu ExpenseReportPage oluşturucusuna geçireceğiz. ExpenseReportPage ,, ExpenseReportPage. xaml ' de tanımlanan denetimlerin, geçirilen öğeyle veri bağlamını ayarlar.

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

  2. Seçili kişinin gider raporu verilerini geçirebilmeniz için bir nesnesi 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 öğesini açın ExpenseItHome.xaml.vb ExpenseItHome.xaml.cs .

  4. ClickOlay işleyicisini, seçilen kişinin harcama raporu verilerini geçen yeni oluşturucuyu çağırmak üzere 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ıyla stil verileri

Bu bölümde, veri şablonlarını kullanarak veri bağlantılı listelerdeki her öğe için Kullanıcı arabirimini güncelleştireceksiniz.

  1. ExpenseReportPage. xaml' i 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ış öğesinden sonra Grid , harcama 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. DataGridTextColumnÖğeleri DataGridTemplateColumn öğesi altında ile değiştirin DataGrid ve şablonları bunlara uygulayın. Ayrıca, ItemsSource özniteliği öğesi içinde değerini belirtin DataGrid .

    <!-- 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 ExpenseIt denetimler, düzen, stiller, veri bağlama ve veri şablonları uygulanmış uygulamanın her iki sayfası gösterilmektedir:

Uygulamanın her iki sayfası da adlar listesini ve bir gider raporunu gösterir.

Not

Bu örnek, WPF 'nin belirli bir özelliğini gösterir ve güvenlik, yerelleştirme ve erişilebilirlik gibi şeyler için en iyi uygulamaları izlemez. WPF ve .NET uygulama geliştirmenin en iyi uygulamalarının 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 çeşitli teknikler öğrendiniz. Artık, veri bağlantılı bir .NET uygulamasının yapı taşlarından daha basit bir bilgiye 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.