Öğ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 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
.NET masaüstü geliştirme iş yükü yüklü Visual Studio 2019.
Visual Studio'nun en son sürümünü yükleme hakkında daha fazla bilgi için bkz . Visual Studio'yu Yükleme.
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 adlı
ExpenseIt
yeni bir WPF Uygulaması projesi oluşturun: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.
Dil açılan listesinde C# veya Visual Basic'i seçin.
WPF Uygulaması (.NET Framework) şablonunu ve ardından İleri'yi seçin.
Yeni projenizi yapılandırın iletişim kutusu açılır.
Proje adını
ExpenseIt
girin ve Oluştur'u seçin.Visual Studio projeyi oluşturur ve MainWindow.xaml adlı 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. 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>
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.
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ış.
Etiketlerin Grid arasındaki NavigationWindow öğeleri kaldırın.
öğ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>
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.
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.
Projeye yeni bir sayfa ekleyin ve adını verin
ExpenseItHome.xaml
:Çözüm Gezgini proje düğümüne
ExpenseIt
sağ tıklayın ve Sayfa Ekle'yi>seçin.Yeni Öğe Ekle iletişim kutusunda, Sayfa (WPF) şablonu zaten seçilidir. adını
ExpenseItHome
girin 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.
ExpenseItHome.xaml
'ı açın.öğesini Title "
ExpenseIt - Home
" olarak ayarlayın.DesignHeight
350 piksel veDesignWidth
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.xaml dosyasını açın.
öğ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.
Projeye başka bir yeni WPF sayfası ekleyin ve ExpenseReportPage.xaml::
Çözüm Gezgini proje düğümüne
ExpenseIt
sağ tıklayın ve Sayfa Ekle'yi>seçin.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.ExpenseReportPage.xaml dosyasını açın.
öğesini Title "
ExpenseIt - View Expense
" olarak ayarlayın.DesignHeight
350 piksel veDesignWidth
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 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
ExpenseItHome
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
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
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.
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.
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.
Çö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
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 :
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.xaml
ekleyerek üç satır ve 10 piksel kenar boşluğu içeren tek sütunlu bir tablo oluşturacaksınız.
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:
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.xaml
ekleyeceksiniz:
- 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ış.
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.
Uygulamayı derleyin ve çalıştırın.
Aşağıdaki çizimde oluşturduğunuz denetimler gösterilmektedir:
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.
içinde
ExpenseItHome.xaml
, sabiti 230 piksel olan öğesine başka bir Width sütun ColumnDefinitions ekleyin:<Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions>
öğ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>
Üç denetimin her birinde (Border, ListBox ve Button) özelliğini 1 olarak ayarlayarak Grid.Column denetimleri ikinci sütuna taşıyın.
Üç 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>
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>
öğ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>
Uygulamayı derleyin ve çalıştırın.
Aşağıdaki çizimde, yeni eklediğiniz sonuçların sonuçları gösterilmektedir:
Olayları işlemek için kod ekleme
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>
veya
ExpenseItHome.xaml.cs
öğesini açınExpenseItHome.xaml.vb
.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.
ExpenseReportPage.xaml dosyasını açın.
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 benzerdir
ExpenseItHome.xaml
.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.xaml'e eklenen kullanıcı arabirimi öğeleri gösterilmektedir.
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.xaml dosyasını açın.
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
: üzerindeExpenseItHome.xaml
biç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.
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.ExpenseReportPage.xaml dosyasını açın.
Öğ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>
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.
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.
öğ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ış.
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.
ExpenseReportPage.xaml.vb veya ExpenseReportPage.xaml.cs dosyasını açı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
veya
ExpenseItHome.xaml.cs
öğesini açınExpenseItHome.xaml.vb
.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.
ExpenseReportPage.xaml dosyasını açın.
"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>
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>
öğesinin DataGridTextColumn altındaki DataGrid öğelerini ile DataGridTemplateColumn değiştirin ve şablonları bunlara uygulayın. Ayrıca özniteliğini
ItemsSource
öğesindekiDataGrid
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>
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 denetimlerin, düzenin, stillerin, veri bağlamanın ve veri şablonlarının ExpenseIt
uygulandığı uygulamanın her iki sayfası gösterilmektedir:
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.
.NET Desktop feedback
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin