Windows Phone 8 icin sehir-sehir radyo frekanslarini gorebilecegimiz bir uygulama gelistirecegiz.

Bu uygulamanin gelistirilmesi sirasinda Pivot, PivotItem, LongListSelector, DataTemplate, WebClient gibi siniflari kullandigimiz kodlar yazacagiz.

Oncelikle RadyoListe isimli yeni bir Windows Phone App projesi olusturalim;

Proje olusturduktan sonra gelen Windows Phone Platform versiyon secim penceresinde Windows Phone OS 8.0 seceneginin secili oldugundan emin olmaliyiz;

Uygulama ihtiyac duydugu veriyi internetten indirecegi icin WMAppManifest.xml dosyasinda Network erisim izninin istenmis olmasi gerekiyor;

<Capabilities>
	<Capability Name="ID_CAP_NETWORKING" />
</Capabilities>

Radyo listesi icin json formatinda hazirladigim veriyi kendi sunucuma radyolar.json ismi ile yukledim.

Json formatinda okuyacagimiz bu veriyi islemek icin References icerisine Newtonsoft Json.Net (4.5.11) Nuget paketini eklemeliyiz;

Models isminde bir dizin ekleyip, icerisinde LiveData, City, Channel, Frequency isimli siniflar olusturalim;

LiveData.cs

public class LiveData
{
	public IEnumerable<City> Cities { get; private set; }

	public IEnumerable<Channel> Channels { get; private set; }

	public IEnumerable<Frequency> Frequencies { get; private set; }

	public LiveData()
	{
		this.Cities = new List<City>();
		this.Channels = new List<Channel>();
		this.Frequencies = new List<Frequency>();
	}

	public LiveData(string LiveDataResponse)
	{
		var LiveDataResult = JsonConvert.DeserializeObject<LiveData>(LiveDataResponse);

		this.Cities = LiveDataResult.Cities;
		this.Channels = LiveDataResult.Channels;
		this.Frequencies = LiveDataResult.Frequencies;
	}
}

City.cs

public class City
{
	public int ID { get; set; }

	public string Name { get; set; }
}

Channel.cs

public class Channel
{
	public int ID { get; set; }

	public string Name { get; set; }
}

Frequency.cs

public class Frequency
{
	public int CityID { get; set; }

	public int ChannelID { get; set; }

	public float No { get; set; }
}

Uygulama ilk acildiginda calistirilan App (App.xaml.cs) sinifina asagidaki kodlari ekleyelim;

public static Action DataLoaded;

public static LiveData ViewModel = null;

public async static void LoadData()
{
	WebClient wc = new WebClient();

	wc.DownloadStringCompleted += (s, e) =>
	{
		if (e.Error == null)
		{
			ViewModel = new LiveData(e.Result);

			if (DataLoaded != null)
			{
				DataLoaded();
			}
		}
	};

	wc.DownloadStringAsync(new Uri("http://www.enginpolat.com/application-data/radyolar.json"));
}

App sinifinin constructor’inda LoadData() method’unu cagiralim;

LoadData();

Kodlari inceleyecek olursak;

Sinif seviyesinde tanimlanan LiveData tipindeki ViewModel degiskeni, LoadData() method’u icerisinde asenkron olarak doldurulur. ViewModel degiskenine deger atamasi yapildiktan sonra DataLoaded action‘ini dinleyen bir method varsa tetiklenir.

Bu sayede uygulamanin acilisi esnasinda internetten verinin indirilmesi ve deserialize edilmesi asenkron olarak yapilmis olur.

MainPage.xaml dosyasinda ekranda sadece bir Pivot kontrolunun gosterilmesini saglayalim;

<Grid x:Name="LayoutRoot" Background="Transparent">
	<Grid.RowDefinitions>
		<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<phone:Pivot Margin="0,10,10,10" Title="Radyo Listesi" Name="pvtSehirListesi" Grid.RowSpan="1" />
</Grid>

Artik MainPage.xaml.cs dosyasindaki constructor‘a giderek ekrani dolduracak kodlari yazabiliriz;

App.DataLoaded = () =>
{
	foreach (City Sehir in App.ViewModel.Cities)
	{
		PivotItem pi = new PivotItem();
		pi.Header = Sehir.Name;

		LongListSelector list = new LongListSelector();
		list.ItemTemplate = Application.Current.Resources["FrequencyListItemTemplate"] as DataTemplate;
		list.ItemsSource = (from Frekans in App.ViewModel.Frequencies
			join Kanal in App.ViewModel.Channels on Frekans.ChannelID equals Kanal.ID
			where Frekans.CityID == Sehir.ID
			select new { ChannelName = Kanal.Name, Frequency = Frekans.No.ToString("00.0") }).ToList();

		pi.Content = list;

		pvtSehirListesi.Items.Add(pi);
	}
};

Boylece App sinifinda, ViewModel degiskenine deger yukledikten sonra tetikledigimiz Action icerisinde bir foreach dongusu cagirmis oluyoruz.

Dongu icerisinde ilk once yeni bir PivotItem tipinde degisken olusturuyoruz ve Header ozelligine dongu degiskeninden elde ettigimiz sehir ismi bilgisini atiyoruz.

PivotItem tipindeki degiskenin Content ozelligine, LongListSelector tipinde yeni bir degisken atiyoruz.

LongListSelector tipindeki degiskenin ItemsSource ozelligine App.ViewModel degiskenindeki degerlerden LINQ Expression ile olusturdugumuz listeyi atiyoruz.

Ayni sekilde LongListSelector tipindeki degiskenin ItemTemplate ozelligine

Application.Current.Resources["FrequencyListItemTemplate"] as DataTemplate;

degerini atiyoruz.

Son olarak, App.xaml dosyasina FrequencyListItemTemplate ismindeki Resource‘u ekliyoruz;

<Application.Resources>
	<DataTemplate x:Name="FrequencyListItemTemplate">
		<StackPanel Margin="0,0,0,17">
			<TextBlock Text="{Binding ChannelName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
			<TextBlock Text="{Binding Frequency}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
		</StackPanel>
	</DataTemplate>
</Application.Resources>

Uygulamayi calistirdigimizda asagidaki ekran goruntusunu goruyor olmamiz lazim;

Projenin kodlarini buradan indirebilirsiniz.