Merhaba arkadaşlar bu yazımızda c# wpf platformunda çoklu sayfa kullanılarak yapılan bir program yazacağız.
Öncelikle uygulamayı anlatayım size arkadaşlar;Bu uygulamayı yazarken bir kullanım amacım yoktu örnek olarak yaptım. Uygulamamızı başlattığımız zaman karşımıza bir giriş ekranı gelecek.
Burada kaydolma ekranı yok sadece uygulamayı yazarken belirlediğimiz giriş adı ve şifreyle giriş yapabiliyoruz eğer şifre veya giriş adı yanlış olursa giriş yapılmayacak.
Giriş adı ve şifreyi doğru girdikten sonra giriş butonuna bastığımız zaman karşımıza ikinci bir ekran gelecek.
Bu ekranın ise böyle bir tasarımı olacak bu ekranda ne yapacağımıza gelirsek ise;
Ekranın en üst bölümünde bir karşılama metni bulunuyor bu metinde kullanıcı adı ve merhaba yazacaktır hangi kullanıcı adını yazarsak “Merhaba+kullanıcıAdı” şeklinde bir metin karşılayacak bizi.
İkinci olarak “okullar” yazan bir label ve altında “ComboBox” var. Peki bu ComboBox nedir ne işe yarar?
ComboBox’da bu şekilde okul isimleri olacak ve bu okullardan istediğimizi seçebileceğiz.
Combobox’un altında ise bir “Ekle” yazılı buton bulunmakta. Bu buton ise ComboBox’dan seçtiğimiz okul ismini oluşturacağımız diziye kaydetmemizi sağlayacak.
Buton’un altında ise “Kabul” yazılı bir “CheckBox” var ve onun altında da “İleri” yazılı olan bir buton bulunmakta ama bu buton kullanılabilir durumda değil yani basılamaz ve sönük renkte. “kabul” yazılı CheckBox’ı seçili hale getirirsek buton kullanılabilir hale gelecek ve butona tıklayarak bir sonraki sayfamıza geçebileceğiz.
Bu ekranda ise ekranın büyük bir bölümünü kaplayan bir “ListBox” ve altında “Ekle” ve “Sil” yazılı olan iki buton var.
Bu listBox’da önceki ekranda seçmiş olduğumuz okullar yazılı olacak. Birden fazla okul seçme hakkımız olacak.
Altında bulunan “Ekle” butonuna bastığımızda ise ekrana tekrar önceki okul eklediğimiz sayfa gelecek.
“Sil” butonuna tıkladığımız da ise listBox’da seçili olan okulu sileceğiz.
Uygulamamız bu şekilde çalışacaktır arkadaşlar her sayfasını detaylı bir şekilde size anlatmaya çalıştım şimdi ise bu programı beraber yazmaya çalışacağız.İlk olarak “MainWindow” ile başlayalım programı yazmaya.
xml dosyasıyla başlayalım;
Uygulamamızı yazarken çoklu ekranı kullanmak için ben “Frame” kullanacağım. Bir diğer yöntemi daha var ancak o yöntemle yeni açacağımız sayfa yeni bir sayfa olarak açılıyor önceki sayfa kapanmıyor buda pek kullanılmayan bir yöntem olmasını sağlıyor.
Ekranı boydan boya kaplayacak bir “Frame” ekliyoruz ekrana ve buna bir isim veriyoruz.Ben “frame1” ismini verdim ekrana yerleştirdiğim Frame nesneme.Xml dosyasının kodları aşağıdaki gibi olmalı.
1 2 3 4 5 6 7 8 9 10 11 |
<Window x:Class="WpfApplication9.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Frame Name="frame1" NavigationUIVisibility="Hidden" /> </Grid> </Window> |
Şimdi ise Cs doyasına geçip burada kodlarımızı yazalım; Burada yapmamız gereken tek şey Frame nesnesin de İlk sayfamızı göstermek ancak bundan önce uygulamamıza sayfa eklememiz gerekir.Bunun için sol tarafta bulunan “Solution Explorer” altında bulunan dosyalardan uygulama ismini taşıyan dosyaya sağ tıklayıp sırasıyla “Add/New Item” seçeneklerini seçiyoruz.
Açılan ekranda “Page” seçeneğini seçip buna bir isim veriyoruz ben “Page1” ismini verdim. Sayfa ekleme işlemi böyledir arkadaşlar daha sonra 2 kez daha bu şekilde sayfa ekleyeceğiz.
Şimdi ise .cs dosyasına geçip Frame nesnesin de oluşturduğumuz ekranın gözükmesini sağlayacağız.
“public MainWindow” metodunun içine
1 2 3 4 |
Page1 giris=new Page1(); frame1.Navigate(giris); |
Kodunu ekliyoruz. Sayfanın kodu aşağıdaki gibi olacak.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
namespace WpfApplication9 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Page1 giris=new Page1();//1.sayfayı tanımladık ve bir isim verdik. frame1.Navigate(giris);//Giriş sayfasını Page1 yaptık. } } } |
Şimdi ise “Page1” ismini verdiğimiz sayfamızın tasarımına geçelim..xml dosyamıza aşağıdaki kodu ekliyoruz;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<Page x:Class="WpfApplication9.Page1" 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="300" d:DesignWidth="300" Title="Page1"> <Grid> <Label Content="Giris adi" HorizontalAlignment="Left" Margin="51,106,0,0" VerticalAlignment="Top"/> <Label Content="Sifre" HorizontalAlignment="Left" Margin="51,158,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.52,0.464"/> <TextBox x:Name="txtGiris" HorizontalAlignment="Left" Height="23" Margin="134,110,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="156" /> <TextBox x:Name="txtSifre" HorizontalAlignment="Left" Height="23" Margin="134,158,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="156" /> <Button Content="Giriş" HorizontalAlignment="Left" Margin="109,204,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/> </Grid> </Page> |
Bu kodlarla ekrana 2 label, 2 textBox ve 1 buton ekliyoruz ve bunlara isim veriyoruz. Label nesnelerine isim vermemize gerek yok bunlarrla bir işlem yapmayacağımız için. TextBoxlara ise “txtSifre” ve “txtGiris” isimlerini verdim butona ise isim vermeye gerek yok ama ona “Click” metodu ekleyeceğiz ve ona ise “Button_Click” ismini vereceğiz. şimdi ise gelin .cs dosyasına geçip kodlarımızı yazalım.
Burada ilk olarak yeni bir sayfa daha ekleyip ona da “Page2” ismini verelim.Ve sayfayı burada tanımlayıp isim verelim, ben “p2” ismini verdim.Kodu ise şekilde;
Page2 p2 = new Page2();
Şimdi ise “Button_Click” ismini verdiğimiz Click metodunun içinde kullanıcın girdiği şifre ve giriş adı bizim belirleyeceğimiz şifre ve kullanıcı adıyla aynı olup olmayacağını bulup ona göre işlem yapacağız. Ben giriş adını “www.yazilimbilisim.net” , şifreyi ise “devrim” olarak belirledim ve kontrolleri buna göre yapacağım. İlk olarak bir “İf” kullanacağız ve kullanıcının girdiği değerleri okuyup benim karar verdiğim şifre ve giriş adıyla karşılaştıracağım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
private void Button_Click(object sender, RoutedEventArgs e) //Butona tıklanma olayını ele aldık { if(txtGiris.Text.ToString().Equals("www.yazilimbilisim.net") &&txtSifre.Text.ToString().Equals("devrim")) {//Giriş adı ve şifreyi kontol ettik eğer doğruysa yapılacak işlemler this.NavigationService.Navigate(p2);//Eğer doğruysa ekrana Page2'yi getirdik. p2.kullanıcıAdı = txtGiris.Text;//Kullanıcının ismini ikinci sayfada kullanmak için değişkene kaydettim. } else//Eğer şifre veya giriş adı yanlışsa yapılacak işlemler { MessageBox.Show("yanlış şifre veya giriş adı girdiniz. Lüfen tekrar deneyiniz."); //Şifre veya giriş adı yanlış olunca messageBox ile uyarı verdik. } } } |
Yukarıda kod üzerinde gerekli açıklamaları yaptım ancak burada da daha detaylı açıklamalarda bulunayım.
İf’in içnde öncelikle txtGiris adlı textBox’ın içindeki yazıyı okuyup “Equals” metoduyla kendi belirlediğim giriş ismiyle karşılaştırdım ve ardından “&&” ekleyerek ikinci bir koşul daha vererek bu sefer txtSifre adlı TextBoxun içindeki yazıyı Equals metoduyla karşılaştırdım. Siz istediğiniz takdirde “Equals” yerine “==” sembolünüde kullanabilirsiniz.
Şimdi ise if doğru olursa yapılacakları yazacağız; Frame nesnesinde “Page2” ismini verdiğimiz sayfanın gözükmesini sağladık ve p2. sayfasında bulunan “kullanıcıAdı” değişkeninin içine kullanıcı adını atıyoruz. Biz daha Page2 sayfasını tam olarak yazmadığımız için burada hata alabiliriz ancak bu daha sonra geçecektir. Şimdi ise “Else” yazarak if gerçekleşmezse yani giriş adı veya şifre yanlış olursa ne olacağına karar vereceğiz. Ben “MessageBox” içinde tekrar denemesini yazdım.
Sırada ise Page2 sayfası var. Oranın tasarım kodları ise aşağıdaki gibi olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<Page x:Class="WpfApplication9.Page2" 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="300" d:DesignWidth="300" Title="Page2"> <Grid Loaded="Grid_Loaded"> <Label x:Name="lblIsim" Content="Merhaba ADMİN" HorizontalAlignment="Left" Margin="86,31,0,0" VerticalAlignment="Top"/> <Label Content="okullar" HorizontalAlignment="Left" Margin="113,86,0,0" VerticalAlignment="Top" /> <ComboBox x:Name="okullar" HorizontalAlignment="Left" Margin="86,117,0,0" VerticalAlignment="Top" Width="120"> <ComboBoxItem Content="Hikmet Nazif Kurşunoğlu"/> <ComboBoxItem Content="Bağcılar MTAL"/> <ComboBoxItem Content="N.Bilimli MTAL"/> <ComboBoxItem Content="Y.Emre TML"/> <ComboBoxItem Content="Dündar Uçar MTAL"/> <ComboBoxItem Content="Gazi MTAL"/> </ComboBox> <CheckBox x:Name="chKabul" Content="Kabul" HorizontalAlignment="Left" Margin="71,230,0,0" VerticalAlignment="Top" Click="CheckBox_Click"/> <Button x:Name="ileri" Content="İleri" HorizontalAlignment="Left" Margin="186,245,0,0" VerticalAlignment="Top" Width="75" IsEnabled="False" Click="ileri_Click"/> <Button Content="Ekle" HorizontalAlignment="Left" Margin="113,165,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/> </Grid> </Page> |
Kodlarını yazarak ekrana 2 label, 2 buton, 1 comboBox ve bir checkBox ekliyoruz.
Şimdi ise Pag2.xaml.cs dosyamıza geçip kodlarımızı tek tek yazalım. Öncelikle yeni bir sayfa daha oluşturup buna da “Page3” ismini veriyoruz ve bu sayfayı kodlarımızda tanımlayıp “p3” ismini veriyoruz.
Daha sonra Page1 de kullandığımız değişkenimizi oluşturacağız.
1 2 3 |
public String kullanıcıAdı; |
Bundan sonra checkBox’a Click metodu oluşturup içine checkBox’un seçili olup olmadığını anlamamızı sağlayacak kodları yazıyoruz bu kodlar aşağıdaki gibidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
private void CheckBox_Click(object sender, RoutedEventArgs e) {//Kabul ettiği zaman yapılacaklar if(chKabul.IsChecked==true)//Eğer kabul ettiyse yapılacaklar. { ileri.IsEnabled = true;//İleri butonunu kullanılabilir yaptık. } else//Eğer kabul etmediyse yapılacaklar { ileri.IsEnabled = false;//İleri butonunu kullanılamaz hale getirdik. } } |
Gerekli açıklamaları kod üzerinde yaptım şimdi ise seçilen okul isimlerini saklayacağımız bir tür dizi çeşidi olan “ObservableCollection<string>” diziyi oluşturacağız.
1 2 3 |
public static ObservableCollection<String> dizi4=new ObservableCollection<string>(); |
Şimdi ise Ekle butonu için click metodu oluşturup onun içine seçilen okulları dize kaydedecek kodu yazacağız.
1 2 3 4 5 6 |
private void Button_Click(object sender, RoutedEventArgs e)//Ekle butonuna tıklanınca yapılacaklar ele alındı { dizi4.Add(okullar.Text.ToString());//Okul ismini alıp diziye kaydettik. } |
Şimdi ise İleri butonu için click metodu oluşturup diğer sayfaya geçmek için gerekli olan kodları yazacağız.
1 2 3 4 5 6 7 |
private void ileri_Click(object sender, RoutedEventArgs e)//İleri butonuna tıklanınca yapılacakları ele aldık. { Page3 p3 = new Page3();//Page3 ü tanımladık ve isim verdik. this.NavigationService.Navigate(p3);//Ekrana page3 ü getirdik. } |
Bu metodu oluşturduktan sonra Page2 için “Loaded” metodu oluşturup ekrana “Hoşgeldin kullanıcıAdi” yazısını ekrana yazdırmak için gerekli kodları yazacağız.
1 2 3 4 5 6 7 |
private void Grid_Loaded(object sender, RoutedEventArgs e) {//Kullanıcıya ismiyle beraber hoşgeldin yazmak için sayfanın yüklenme olayını ele aldık lblIsim.Content = "Merhaba" + " " + kullanıcıAdı; //İlk sayfada giriş yaptığı kullanıcı ismiyle beraber label'a hoşgeldin yazdırdık. } |
Bu metodların Page.xmal dosyasında butonlarda, checkBoxda ve Page de tanımlı olması gerekiyor ben verdiğim kodlarda bunlar tanımlı o yüzden bir değişiklik yapmamaya veya yaptığınız takdirde her iki tarafta da kodları kontrol etmelisiniz.Bu kodları ekledikten sonra Page2.xaml.cs dosyasının son hali aşağıdaki gibi olamlı;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
namespace WpfApplication9 { /// <summary> /// Interaction logic for Page2.xaml /// </summary> public partial class Page2 : Page { public Page2() { InitializeComponent(); } public String kullanıcıAdı;//Kullanıcı adını kaydedeceğimiz değişken yaptık. private void CheckBox_Click(object sender, RoutedEventArgs e) {//Kabul ettiği zaman yapılacaklar if(chKabul.IsChecked==true)//Eğer kabul ettiyse yapılacaklar. { ileri.IsEnabled = true;//İleri butonunu kullanılabilir yaptık. } else//Eğer kabul etmediyse yapılacaklar { ileri.IsEnabled = false;//İleri butonunu kullanılamaz hale getirdik. } } //Seçilen okulları kaydetmek için observableCollection(dizi) oluşturduk. public static ObservableCollection<String> dizi4=new ObservableCollection<string>(); private void Button_Click(object sender, RoutedEventArgs e)//Ekle butonuna tıklanınca yapılacaklar ele alındı { dizi4.Add(okullar.Text.ToString());//Okul ismini alıp diziye kaydettik. } private void ileri_Click(object sender, RoutedEventArgs e)//İleri butonuna tıklanınca yapılacakları ele aldık. { Page3 p3 = new Page3();//Page3 ü tanımladık ve isim verdik. this.NavigationService.Navigate(p3);//Ekrana page3 ü getirdik. } private void Grid_Loaded(object sender, RoutedEventArgs e) {//Kullanıcıya ismiyle beraber hoşgeldin yazmak için sayfanın yüklenme olayını ele aldık lblIsim.Content = "Merhaba" + " " + kullanıcıAdı; //İlk sayfada giriş yaptığı kullanıcı ismiyle beraber label'a hoşgeldin yazdırdık. } } } |
Şimdi ise son sayfamız olan Page3 sayfamıza geçeceğiz. İlk olarak tasarım ekranını yapıyoruz. Ekranın büyük bölüümü kaplayan bir listBox ve 2 buton ekliyoruz.Kodlar;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<Page x:Class="WpfApplication9.Page3" 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="300" d:DesignWidth="300" Title="Page3" Loaded="Grid_Loaded"> <Grid > <ListBox x:Name="listbox1" Margin="0,0,0,55" /> <Button Content="Ekle" HorizontalAlignment="Left" Margin="30,262,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/> <Button Content="Sil" HorizontalAlignment="Left" Margin="173,262,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/> </Grid> </Page> |
Bu kodları ekledikten sonra Page3.xaml.cs dosyasına geçip kodlarımızı yazmaya başlayabiliriz.
İlk olarak Page2yi tanımlayıp isim veriyoruz ben “p2” ismini verdim.
Daha sonra Ekle butonu için click metodu oluşturduk ve butona tıklayınca Page2 sayfasını ekrana getireceğiz.
1 2 3 4 5 6 |
private void Button_Click(object sender, RoutedEventArgs e)//Ekle butonuna tıklanma olayını ele aldık { this.NavigationService.Navigate(p2);//Ekrana page2 yi getirdik. } |
Daha sonra Sil butonu için click metodu oluşturup ListBoxda seçili olan okul ismini hem listBoxdan hem de diziden sileceğiz.
1 2 3 4 5 6 7 |
private void Button_Click_1(object sender, RoutedEventArgs e)//Silme butonunu ele aldık. { Page2.dizi4.Remove(listbox1.SelectedItem.ToString());//Seçilen okulu listeden sildik. listbox1.Items.Remove(listbox1.SelectedItem);//Seçilen okulu listboxdan sildik. } |
Bu metodu yazdıktan sonra Page3 için “Loaded” metodu yazıp içine sayfa yüklenirken seçilmiş olan okulları listBox içinde göstereceğiz.
1 2 3 4 5 6 7 8 9 10 11 |
private void Grid_Loaded(object sender, RoutedEventArgs e) {//Ekran yüklenirken ListBox'a seçilen okulları eklemek için metod oluşturduk foreach(string eleman in Page2.dizi4) {//Foreach döngüsü ile okulların bulunduğu diziyi parçaladık ve her okul ismini eleman değişkenine //attık. Kaç okul varsa döngü o kadar döner. listbox1.Items.Add(eleman.ToString());//Her okul ismini listBox'a ekledik. } } |
Bu kodu ekledikten sonra Page3.xaml.cs dosyası aşağıdaki gibi olmalıdır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
namespace WpfApplication9 { /// <summary> /// Interaction logic for Page3.xaml /// </summary> public partial class Page3 : Page { public Page3() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e)//Ekle butonuna tıklanma olayını ele aldık { this.NavigationService.Navigate(p2);//Ekrana page2 yi getirdik. } private void Button_Click_1(object sender, RoutedEventArgs e)//Silme butonunu ele aldık. { Page2.dizi4.Remove(listbox1.SelectedItem.ToString());//Seçilen okulu listeden sildik. listbox1.Items.Remove(listbox1.SelectedItem);//Seçilen okulu listboxdan sildik. } Page2 p2 = new Page2();//Page2 yi tanımladık ve isim verdik private void Grid_Loaded(object sender, RoutedEventArgs e) {//Ekran yüklenirken ListBox'a seçilen okulları eklemek için metod oluşturduk foreach(string eleman in Page2.dizi4) {//Foreach döngüsü ile okulların bulunduğu diziyi parçaladık ve her okul ismini eleman değişkenine //attık. Kaç okul varsa döngü o kadar döner. listbox1.Items.Add(eleman.ToString());//Her okul ismini listBox'a ekledik. } } } } |
Uygulama bu kadar arkadaşlar ben gerek kod üzerinde gerek yazımın çeşitli bölümlerinde açıklamalarda bulundum ancak anlamadığınız bir yer veya sorunuz varsa yorum yapmayı ihmal etmeyin.
Kaynak Kodu İndirmek İçin Tıklayınız.