Onnavigatedto | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar onnavigatedto

Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding

02 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak makalesini okumanızı tavsiye ederim.

En son geliştirdiğimiz hali ile ekranımız aşağıdaki şekilde gözüküyor olmalı;

Databinding yapabilmek için öncelikle MainPage.xaml.cs dosyasını açıp, binding yapacağımız property‘leri ve varsa varsayılan değerlerini tanımlıyoruz.

Bu örnekte saat, dakika ve saniyenin her hanesini ayrı gösterebilmek için Hour1, Hour2, Minute1, Minute2, Second1 ve Second2 property’lerini aşağıdaki gibi tanımladım;

public string Hour1 { get; set; } = "0";

public string Hour2 { get; set; } = "0";

public string Minute1 { get; set; } = "0";

public string Minute2 { get; set; } = "0";

public string Second1 { get; set; } = "0";

public string Second2 { get; set; } = "0";

Artık ekrandaki Textblock nesnelerini güncelleyebiliriz, RefreshDisplay() methodunu tanımlayıp, içerisinde yukarıda tanımladığımız property‘lere değer ataması yapıyoruz;

private void RefreshDisplays()
{
	var now = DateTime.Now;

	var hour = now.Hour.ToString("00");
	var minute = now.Minute.ToString("00");
	var second = now.Second.ToString("00");

	Hour1 = hour.Substring(0, 1);
	Hour2 = hour.Substring(1, 1);

	Minute1 = minute.Substring(0, 1);
	Minute2 = minute.Substring(1, 1);

	Second1 = second.Substring(0, 1);
	Second2 = second.Substring(1, 1);
}

Sayfa açıldığında RefreshDisplays() methodunu çağırabilmek için sayfanın açıldığı anı bilmemiz ve tam orada RefreshDisplays() methodunu çağırmamız lazım.

Windows 10 UWP uygulamalarında bir sayfanın açıldığı anı Page sınıfında tanımlı olan OnNavigatedTo() methodunda yakalayabiliyoruz.

MainPage sınıfımızın base class‘ı olan Page sınıfında tanımlı olan OnNavigatedTo() methodunda kod çalıştırabilmek için OnNavigatedTo methodunu override etmemiz lazım;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	base.OnNavigatedTo(e);

	RefreshDisplays();
}

override ettiğimiz OnNavigatedTo() methodunun içerisinde RefreshDisplays() methodunu çağırıyoruz.

Databinding için code-behind tarafında yapmamız gereken tüm hazırlıkları yaptık, şimdi MainPage.xaml dosyasını açarak binding kodlarını tamamlayalım.

MainPage.xaml dosyasında yeralan nesnelerden binding yapmak istediklerimizin, binding yapmak istediğimiz property‘lerine değer olarak {x:Bind} ataması yapmalıyız.

Bu örnekte, Textblock nesnelerinin Text property‘lerine binding yapmak istiyoruz, MainPage.xaml dosyasındaki Grid elementini aşağıdaki kodlara dönüştürüyoruz;

<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>

	<Border Grid.Column="0">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Hour1}" />
			<TextBlock Text="{x:Bind Hour2}" />
		</StackPanel>
	</Border>
	<Border Grid.Column="1">
		<TextBlock Text=":" />
	</Border>
	<Border Grid.Column="2">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Minute1}" />
			<TextBlock Text="{x:Bind Minute2}" />
		</StackPanel>
	</Border>
	<Border Grid.Column="3">
		<TextBlock Text=":" />
	</Border>
	<Border Grid.Column="4">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{x:Bind Second1}" />
			<TextBlock Text="{x:Bind Second2}" />
		</StackPanel>
	</Border>

</Grid>

MainPage.xaml dosyasında sayfamızın ön izlemesi aşağıdaki gibi gözükmeli;

Eğer uygulamayı çalıştıracak olursak zaman bilgisi aşağıdaki şekilde ekranda gözüküyor olmalı;

Windows 10 UWP uygulamalarında ön veya arka kamera’nın görüntüsünü almak

26 January 2016 Yorum yapılmamış

Windows 10 UWP uygulamalarında cihazda bulunan ön veya arka kamera’dan birinin görüntüsünü alarak ekranda göstermek isteyebiliriz.

Örneğin, daha kaliteli olduğu için arka kamera‘nın görüntüsünü alıp üzerine filtre uygulayarak ekranda önizleme yaptırabiliriz.

Aynı şekilde ön kamera‘nın görüntüsünü ekranda göstererek kullanıcının aynaya bakıyormuş gibi uygulamayı kullanmasını sağlayabiliriz.

Hemen Visual Studio‘yu açarak yeni bir proje oluşturalım ve nasıl yapabildiğimize bakalım.

Windows kategorisinden Blank App (Universal Windows) proje template’ini seçerek, projeme bir isim veriyorum;

2-00

Solution Explorer‘dan erişebildiğim Package.appxmanifest dosyasına çift tıklayarak açıyoruz.

2-01

Capabilities tab’ında yeralan WebCam ve Microphone kutucuklarını işaretliyoruz;

2-02

MainPage.xaml dosyasını açıyor ve sayfaya bir CaptureElement nesnesi ekliyoruz;

MainPage.xaml.cs dosyasını açıyor ve OnNavigatedTo methodunu override ediyoruz. Böylece MainPage sayfasına gelindiğinde yapılacak işleri yazabileceğimiz bir method‘umuz oluyor;

OnNavigatedTo methodunda sırasıyla şunları yapıyoruz;

  • Uygulamanın çalıştığı cihazda bulunan ve video kaydetme yeteneğine sahip olan cihazların listesini alıyoruz
  • Bu cihaz listesinden ön panel‘de olanları filtreliyoruz
  • Eğer ön panelde bir video kaydedici cihaz varsa, bu cihazın Id bilgisi üzerinden cihaza erişiyoruz
  • Eriştiğimiz cihaz’ın önizlemesini MainPage.xaml dosyasında tanımladığımız CaptureElement nesnesi üzerinde göstermeye başlıyoruz

Eğer ön kamera‘nın değilde, arka kamera‘nın görüntüsünü göstermek isteseydik camera değişkenine aşağıdaki şekilde değer ataması yapmamız gerekecekti;

Windows 8 için Blog RSS Reader uygulaması

08 May 2014 Yorum yapılmamış

Blog’ların RSS adreslerine bağlanacak, makalelerin listesini getirecek ve seçilen makaleyi okumamızı sağlayacak Windows 8 uygulaması geliştireceğiz.

Öncelikle BlogReader isimli Windows 8 projesini oluşturalım ve MainPage.xaml dosyasına aşağıdaki kodları yazarak ekran tasarımımızı yapalım;

<Page
	x:Class="BlogReader.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:BlogReader"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d">

	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="300" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>


		<ListView Name="BlogPostListView" Margin="20" Grid.Column="1" SelectionChanged="BlogPostListView_SelectionChanged">
			<ListView.ItemTemplate>
				<DataTemplate>
					<StackPanel>
						<TextBlock Text="{Binding Title}" FontSize="14" Margin="5,0,0,0" TextWrapping="Wrap" />
						<TextBlock Text="{Binding Description}" FontSize="12" Margin="15,0,0,0" />
					</StackPanel>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>

		<Grid Margin="20" Grid.Column="2">
			<Grid.RowDefinitions>
				<RowDefinition Height="40"/>
				<RowDefinition Height="*"/>
			</Grid.RowDefinitions>

			<TextBlock Name="PostTitleText" Text="{Binding Title}" FontSize="20" Grid.Row="0" TextWrapping="Wrap" />
			<WebView Name="ContentView" Grid.Row="1" Margin="0,50,0,0" />
		</Grid>
	</Grid>

	<Page.TopAppBar>
		<AppBar Name="topBar">
			<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
				<Button Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Click="Refresh_Click" />
			</StackPanel>
		</AppBar>
	</Page.TopAppBar>
</Page>

Böylece iki sütunlu bir Grid içerisinde soldaki sütunda Blog’un RSS adresinden çekeceğimiz makalelerin listesini göstereceğiz, sağdaki sütunda ise makale listesinden seçilen makalenin başlığını ve içeriğini göstereceğiz.

Ekranın TopAppBar‘ında verileri tekrar çekecek olan Refresh (Tazele) Button nesnesi yer alacak.

Projemize BlogPost isminde bir sınıf ekleyelim ve rss adresindeki bilgiyi parse ettiğimizde elde edeceğimiz veriyi tutacağımız property‘leri tanımlayalım;

public class BlogPost
{
	public string Title { get; set; }
	public string Author { get; set; }
	public string Content { get; set; }
	public DateTime PubDate { get; set; }
}

Artık MainPage.xaml.cs dosyasına gidebilir ve sayfa ekrana ilk geldiğinde yapılacak işleri OnNavigatedTo() methodunun içerisine yazabiliriz.

Öncelikle rss adresindeki veriyi parse ettiğimizde elde edeceğimiz BlogPost‘ların listesi için bir değişken tanımlaması yapıyoruz;

var postList = new List<BlogPost>();

Şimdi Windows.Web.Syndication namespace’inde tanımlı SyndicationClient tipinde bir değişken tanımlayabilir ve RetreiveFeedAsync() methodunu kullanarak belli bir adresteki rss verisini parse edebiliriz.

var client = new SyndicationClient();

var feed = await client.RetrieveFeedAsync(new Uri("http://feeds.feedburner.com/muammerbenzes"));

Not : Bu örnekte sevgili Muammer Benzeş‘in blogunun rss adresini kullandık, başka blogların rss adresleri için özel bir kod yazmaya gerek yok.

Parse ettiğimiz rss verisinin içerisinde dönerek BlogPost listesine teker teker ekliyoruz;

foreach (var item in feed.Items)
{
	var post = new BlogPost();

	post.Title = item.Title.Text;
	post.PubDate = item.PublishedDate.DateTime;
	post.Author = item.Authors[0].Name.ToString();
	if (feed.SourceFormat == SyndicationFormat.Atom10)
	{
		post.Content = item.Content.Text;
	}
	else if (feed.SourceFormat == SyndicationFormat.Rss20)
	{
		post.Content = item.Summary.Text;
	}

	postList.Add(post);
}

Tek yapmamız gereken ekrandaki BlogPostListView nesnesine elimizdeki BlogPost listesini bağlamak.

BlogPostListView.ItemsSource = postList;

BlogPostListView nesnesinden bir blog post seçildiğinde ekranın sağ tarafında başlığı ve içeriği ile göstermek için aşağıdaki method’u da MainPage.xaml.cs dosyasına eklememiz gerekiyor;

private void BlogPostListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	if (e.AddedItems.Count > 0)
	{
		var post = e.AddedItems[0] as BlogPost;
		if (post != null)
		{
			PostTitleText.Text = post.Title;
			ContentView.NavigateToString(post.Content);
		}
	}
	else
	{
		PostTitleText.Text = "";
		ContentView.NavigateToString("");
	}
}

Böylece BlogPostListView nesnesinden herhangi bir blog post seçilirse ekranın sağ tarafında seçilen blog post’un başlığı ve içeriği görüntüleniyor olacak.