WP'da Veri Tabanı-4(Ana Sayfanın Oluşturulması)

MainPage.xaml sayfası bizim kullanıcıya alışveriş listesi ekleme,silme ve eklenen alışveriş listeleri listeleme imkanı sunabildiğimiz bir sayfadır.

Bu sayfayı oluşturmak için ApplicationBarIcon butonlarından da faydalanacağız bu butonları kullanarak yeni sayfa oluşturduğumuzda default olarak yorum halinde olan ve aşağıda gösterilen alanı, yorum olmaktan çıkararak erişebiliriz.

Öncelikle yukarıda belirtilen kodları seçip kırmızı kutu içine alınan kısmı
“Uncomment the selected lines” butonuna tıklayarak bu alanı kullanabilir hale geliriz. Bu
işlemi tamamladıktan sonra aşağıdaki şekilde kodlamamızı yaparak Add new list ve Showlists
uygulama butonlarını oluşturalım yine bu buton resimlerini yolunu vererek kendi seçtiğimiz
resimlerden oluşturabileceğimiz gibi

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark ya da

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\light yolu altında

bulunan varolan ikon resimlerini kullanabiliriz.

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton

IconUri="Icons/add2.png"

Text="add"

x:Name="newListAddBarButton"

Click="newListAddBarButton_Click"/>

<shell:ApplicationBarIconButton

IconUri="Icons/show2.png"

Text="show"

x:Name="ShowMyListBarButton"

Click="ShowMyListBarButton_Click"/>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

ApplicationBarIcon butonlarımızı oluşturduğumuza göre veri tabanı ile ilişkilendirip veri

tabanında yer alan bilgileri listeleyebilmemiz için bir ListBox oluşturalım ve Itemsource’ ini

ProductLists ile ilişkilendirelim.

ItemsSource="{Binding ProductLists}"

ListBox’ ı oluşturmadan önce veri tabanından gelecek verilerin hangi şablonda olacağını

belirleyelim. Bunun için aşağıdaki şekilde bir DataTemplate oluşturalım:

<phone:PhoneApplicationPage.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<CheckBox

IsChecked="{Binding Checked, Mode=TwoWay}"

Grid.Column="0" VerticalAlignment="Top"/>

<TextBlock

Text="{Binding Name}"

FontSize="{StaticResource PhoneFontSizeLarge}"

Grid.Column="1" Grid.ColumnSpan="2"

VerticalAlignment="Top" Margin="-36, 12, 0, 0"/>

<Button

Grid.Column="3"

x:Name="BtnDeleteList"

BorderThickness="0"

Margin="0, -18, 0, 0"

Click="BtnDeleteList_Click">

<Image

Source="Icons/appbar.delete.rest1.png"

Height="75"

Width="75"/>

</Button>

</Grid>

</DataTemplate>

</phone:PhoneApplicationPage.Resources>

Bundan sonraki sayfalarda yapacağımız Binding işlemleri de benzer şekilde olacaktır

,görüldüğü gibi verilerimizin önce bir checkbox , daha sonra listenin ismini gösteren

(<TextBlock Text="{Binding Name}" ile gösterebilen ) bir textblock, bir delete butonu ile

devam etmesini sağladık.

Data templateyi oluşturduktan sonra ListBox kodlaması yapalım:

<ListBox

x:Name="allListItemsListBox"

ItemsSource="{Binding ProductLists}"

Margin="12,0,4,0" Width="440"

ItemTemplate="{StaticResource ListItemTemplate}" Grid.ColumnSpan="2" />

Böylelikle veri tabanımız ile Kontrol elemanları ListBox vb.’ ini ilişkilendirerek(Binding

işlemi ile) verilerimizi sunabiliriz. Bu işlemi çoğu sayfada kullanacağız ve hepsinde de

ListBox kontrolünü tercih edeceğiz çünkü alışveriş listesi bir listelendirme gerektirmekte,

ürünler olsun alış-veriş listesi olsun hepsi liste halinde kullanıcıya sunulmaktadır.

MainPage.xaml.cs kısmında ise aşağıdaki işlemleri yapmalıyız:

İlk olarak kullanıcının yeni liste ekle ApplicationBar butonuna tıkladığında NewListPage ye

gitmesi için aşağıdaki kodlamayı yapalım. Bu arada ApplicationBarIcon butonların Click

eventine ulaşmak için şunları yaparız:

Xaml tarafında butonla ilgili kısma Click yazdığımızda otomatik olarak bize New Event

Handler oluşturacaktır.

Click alanına gelip enter tuşuna bastığımızda aşağıdaki görünüm karşımıza çıkacaktır.

Bu aşamadayken tab tuşuna bastığımızda .xaml.cs taraında click event metodu bizim için

oluşturulmuş olacaktır. XAML tarafında butonların click event’ ine ulaşmak genel olarak bu

şekildedir. Click event’ e ulaştıktan sonra NewList butonumuz için aşağıdaki yönlendirmeyi

yapalım:

private void newListAddBarButton_Click(object sender, EventArgs e)

{

NavigationService.Navigate(new Uri("/NewListPage.xaml", UriKind.Relative));

}

Var olan listelerin gösterilmesi için oluşturduğumuz AppBarIcon butonu ShowList için ise:

public void ShowMyListBarButton_Click(object sender, EventArgs e)

{

NavigationService.Navigate(new Uri("/PanoramaLists.xaml", UriKind.Relative));

}

Var olan listelerin gösterilmesi için oluşturduğumuz AppBarIcon butonu ShowList için ise:

Böylece kullanıcı hangi listeleri görmek istediğini seçmek için seçim yapabileceği (checkbox

işaretli ise liste gösterilir.) sayfaya yani PanoramaLists sayfasına götürülür.

Alışveriş listelerini silmek için kullanacağımız DeleteList butonu veri tabanında yarattığımız

DeleteList metodunu kullanarak seçilen listeyi siler bu listeyi silerken liste içinde bulunan

ürünlerde silineceğinden silmeden önce kullanıcıya bir uyarı sunulur.

private void BtnDeleteList_Click(object sender, RoutedEventArgs e)

{

var button = sender as Button;

if (MessageBox.Show(string.Format("All products of this shop list will delete.Are you sure ?"), "Confirm Delete", MessageBoxButton.OKCancel) == MessageBoxResult.OK)

{

if (button != null)

{

TList ListForDelete = button.DataContext as TList;

//Eğer liste silinirse listeye ait tüm ürünleri de sil.

foreach (TProduct deleteProduct in App.View.DBShop.Products)

{

if (ListForDelete.Id == deleteProduct._PListId)

App.View.DeleteProduct(deleteProduct);

}

App.View.DeleteList(ListForDelete);

}

this.Focus();

}

Sender parametresi ile alışveriş listelerinin bulunduğu listede hangi listenin delete butonuna

tıklanmış ise o liste seçilip silinebilir.

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)

{

// Save changes to the database.

App.View.SaveChangesToDB();

}

Son olarark On NavigatedFrom() metodu ile yaptığımız değişiklikleri (veri ekleme, silme)

veri tabanına yansıtmış oluruz.

Uzun bir makale olduğunun farkındayım,son olarak uygulama koduna burdan erişebilirsiniz,iyi çalışmalar.

Author Description