Windows 8 ile Veri Görüntüleme Uygulaması

Windows 8 makalelerine devam ederken hazırlamış olduğum uygulamayı basit bir şekilde burada da aktarıyor olacağım. Sıfırdan bir Veri uygulaması oluşturucam ve Windows 8 ile veri görüntüleme işlemlerini ele alıyor olacağız. Yapacağım uygulamada, otomatil olarak test verileir oluşturacağım ve içerisine yazacağım sınıf vasıtasıyla bu verileri uygulamamızda görüntüleyebileceğiz. Uygulamamızı geliştirirken Visual Studio 2012 kullanacağız. Visual Studio 2012’yi açalım ve File menüsünden New > Project seçenekleri ile yeni bir proje oluşturalım. Templates (Şablonlar) başlığından Visual C# altında yer alan Windows Metro style şablon grubunu seçelim ve bu grubun altında yer alan Blank App (XAML) isimli şablonu seçerek üzerinde geliştirme yapacağımız boş bir proje oluşturalım. Oluşturduğumuz projeye UrunKatalogu adını verelim. Ürün kataloğu hazırlayacağımız bu örnek projemizde, test verisi olarak ürün nesneleri oluşturacağız ve bu nesneleri bir koleksiyon üzerinde toplayacağız. Ardından, koleksiyonumuzda yer alan ürünleri, XAML içerisinde seçilebilir nesneler olarak nasıl gösterip listeleyebileceğimizi inceleyeceğiz. Bunları gerçekleştirebilmek için öncelikle Urun isminde bir class oluşturacağız. Ürün nesnelerimiz kendilerine ait birer Id, Ad, Fiyat, Marka, ve temsili bir görsele sahip olacaklar. Uygulamamız içerisinde bu bilgileri kontrollere bağlayıp gösteriyor olacağız.

Urun.CS Kaynak Kodlari ;

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace UrunKatalogu { public class Urun { public int Id { get; set; } public string Ad { get; set; } public decimal Fiyat { get; set; } public string Marka { get; set; } public string Gorsel { get; set; } public static List<Urun> KatalogOlustur(int adet) { List<Urun> katalog = new List<Urun>(); Random r = new Random(); for (int i = 1; i <= adet; i++) { katalog.Add(new Urun() { Id = i, Ad = "Ürün " + i, Fiyat = r.Next(10, 51), Marka = "Marka " + i * i, Gorsel = "Images/" + r.Next(1, 4) + ".png" }); } return katalog; } } } Projemizde kullanacağımız ürünlerin image'ları için Solution Explorer'da oluşturacağımız yeni bir klasör içerisindeki png uzantılı image'larımızı kodumuzda Gorsel değişkeni içerisinde belirtebiliriz. Artık projemizin tasarım ekranını oluşturabiliriz. Solution Explorer penceresinde MainPage.XAML 'i çift tıklayarak uygulamamızın tasarım XAML kodlarını aşağıdaki gibi yazabilir yada el ile bu nesneleri tasarım ekranına sürükleyip bırakabilirsiniz.

MainPage.XAML Kaynak Kodları ;

<Page x:Class="UrunKatalogu.MainPage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UrunKatalogu" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <GridView x:Name="gridKatalog" HorizontalAlignment="Left" Height="618" Margin="120,10,0,0" VerticalAlignment="Top" Width="1236" ItemTemplate="{StaticResource DataTemplateUrun}"/> <Button x:Name="btnGetir" Content="Verileri Getir" HorizontalAlignment="Left" Height="125" Margin="1110,633,0,0" VerticalAlignment="Top" Width="246" Click="btnGetir_Click"/> </Grid> </Page>   Sıra geldi tasarımımızdaki item'ların itemTemplate üzerinde oluşturulmasına. GridView üzerinde sağ tıklayarak açılan menüden yeni bir ItemTemplate oluşturalım.

                      GridView’e sağ tıklayalım. Edit Additional Templates altından Edit Generated Items (ItemTemplate) seçelim. Alt menüden Create Empty... seçeneğine tıklayalım ve açılan “Create DataTemplate Resource” penceresinde Name (Key) bölümüne isim olarak DataTemplate1 yerine DataTemplateUrun verelim.

                  <DataTemplate x:Key="DataTemplateUrun"> <Grid/> </DataTemplate> Karşımıza açılacak olan XAML kodları arasına artık tasarımımız ile ilgili kodları yazabiliriz.

                      Artık sırada CS tarafında yazmamız gereken kodlara geldi.

MainPage.XAML.CS Kaynak Kodlari ;

using System; using System.Collections.Generic; using System.IO; using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; namespace UrunKatalogu { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); this.Loaded += MainPage_Loaded; } void MainPage_Loaded(object sender, RoutedEventArgs e) { gridKatalog.SelectionChanged += gridKatalog_SelectionChanged; } private void gridKatalog_SelectionChanged(object sender, SelectionChangedEventArgs e) { Urun seciliUrun = gridKatalog.SelectedItem as Urun; if (seciliUrun != null) { DetailPage detaySayfasi = new DetailPage(); detaySayfasi.seciliUrun = seciliUrun; Window.Current.Content = detaySayfasi; } } private void btnGetir_Click(object sender, RoutedEventArgs e) { List<Urun> katalog = Urun.KatalogOlustur(32); gridKatalog.ItemsSource = katalog; } } } Aynı şekilde şeçilen ürünlerimiz için kullanıcı tarafından açılacak olan detay sayfasının tasarımını aşağıdaki gibi hazırlayalım.

DetailPage.XAML Kaynak Kodları ;

<Page x:Class="UrunKatalogu.DetailPage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UrunKatalogu" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid x:Name="grdDetay" Background="#FF28B000" Margin="41,175,906,38"> <Image HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="200" Source="{Binding Gorsel}" Margin="180,39,0,0" /> <TextBlock HorizontalAlignment="Left" Margin="180,360,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Id}" Height="30" Width="200" FontSize="22" /> <TextBlock HorizontalAlignment="Left" Margin="180,330,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Ad}" Height="30" Width="200" FontSize="22" /> <TextBlock HorizontalAlignment="Left" Margin="180,425,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Fiyat}" Height="30" Width="200" FontSize="22" /> <TextBlock HorizontalAlignment="Left" Margin="180,395,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Marka}" Height="30" Width="200" FontSize="22" /> </Grid> <Button x:Name="backButton" Click="backButton_Click_1" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Margin="41,0,0,651"/> <TextBlock HorizontalAlignment="Left" Height="48" Margin="129,69,0,0" TextWrapping="Wrap" Text="Ürün Detayları" VerticalAlignment="Top" Width="331" FontSize="48"/> </Grid> </Page>

DetailPage.XAML.CS Kaynak Kodları ;

using System; using System.Collections.Generic; using System.IO; using System.Linq; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; namespace UrunKatalogu { public sealed partial class DetailPage : Page { public Urun seciliUrun; public DetailPage() { this.InitializeComponent(); this.Loaded += DetailPage_Loaded; } void DetailPage_Loaded(object sender, RoutedEventArgs e) { grdDetay.DataContext = seciliUrun; } private void Button_Click_1(object sender, RoutedEventArgs e) { var rootFrame = new Frame(); rootFrame.Navigate(typeof(MainPage)); Window.Current.Content = rootFrame; Window.Current.Activate(); } private void backButton_Click_1(object sender, RoutedEventArgs e) { var rootFrame = new Frame(); rootFrame.Navigate(typeof(MainPage)); Window.Current.Content = rootFrame; Window.Current.Activate(); } } }

Uygulamanın Ekran Görüntüleri ;

Uygulamamızı ilk derlediğimiz zaman karşımıza Verileri Getir butonu gelecektir.