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

Arşiv

Etiketlenen yazılar appbar

Windows 8 uygulaması içerisinden fotoğraf ve video çekmek

10 June 2014 Yorum yapılmamış

Windows Store için geliştireceğimiz uygulama içerisinden fotoğraf ve video çekecek ve Fotoğraflar ve Videolar dizinlerine kaydedeceğiz.

Yeni oluşturduğumuz projenin Package.appxmanifest dosyasını açıyor ve Capabilities tabında yeralan Webcam, Videos Library, Pictures Library kutucuklarını işaretliyoruz. Böylece uygulamamızın çalışırken ihtiyaç duyacağı yetkileri kullanıcıdan talep edilmesini sağlıyoruz.

MainPage.xaml dosyasını açarak içerisine aşağıdaki xaml kodlarını ekleyelim ve ekranın altında bir AppBar gözükmesini, içerisinde bir adet StackPanel iki adette Button olmasını sağlayalım;

<Page.BottomAppBar>
	<AppBar>
		<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
			<Button Style="{StaticResource PhotoAppBarButtonStyle}" Click="PhotoButton_Click /">
			<Button Style="{StaticResource VideoAppBarButtonStyle}" Click="VideoButton_Click /">
		</StackPanel>
	</AppBar>
</Page.BottomAppBar>

Öncelikle PhotoButton_Click methodunun içini dolduralım;

private async void PhotoButton_Click(object sender, RoutedEventArgs e)
{
	var camera = new CameraCaptureUI();

	var capture = await camera.CaptureFileAsync(CameraCaptureUIMode.Photo);

	if (capture != null)
	{
		var file = await KnownFolders.PicturesLibrary.CreateFileAsync(Guid.NewGuid().ToString("N") + ".jpg", CreationCollisionOption.ReplaceExisting);

		await capture.CopyAndReplaceAsync(file);
	}
}

İlk olarak CameraCaptureUI sınıfından yeni bir değişken oluşturup, CaptureFileAsync() methodunu çağırıyoruz, parametre olarak CameraCaptureUIMode.Photo değerini veriyoruz, böylece fotoğraf çekmek için gerekli hazırlıklarımızı tamamlamış oluyoruz.

KnownFolders sınıfının PicturesLibrary özelliği sayesinde cihazın fotoğraf kütüphanesine erişiyoruz ve CreateFileAsync() methodunu kullanarak çekilen fotoğrafı kaydedebileceğimiz bir dosya oluşturuyoruz.

capture ismindeki değişkenin CopyAndReplaceAsync() methodu sayesinde webcam kullanılarak çekilen resmi kaydediyoruz.

Video çekimi yapacak VideoButton_Click methodunun içi PhotoButton_Click methoduna çok benziyor;

private async void VideoButton_Click(object sender, RoutedEventArgs e)
{
	var camera = new CameraCaptureUI();

	var capture = await camera.CaptureFileAsync(CameraCaptureUIMode.Video);

	if (capture != null)
	{
		var file = await KnownFolders.VideosLibrary.CreateFileAsync(Guid.NewGuid().ToString("N") + ".wmv", CreationCollisionOption.ReplaceExisting);

		await capture.CopyAndReplaceAsync(file);
	}
}

Üç önemli değişiklik var;

  • camera değişkeninin CaptureFileAsync() methoduna parametre olarak CameraCaptureUIMode.Photo değeri yerine CameraCaptureUIMode.Video değerini veriyoruz
  • KnownFolders sınıfının PicturesLibrary özelliği yerine VideosLibrary özelliğini kullanıyoruz
  • CreateFileAsync() methoduna parametre olarak verdiğimiz dosya isminin uzantısını jpg yerine wmv yapıyoruz

Böylece Windows 8 uygulaması içerisinden hem fotoğraf hem video çekebilir ve uygun dizinlere kaydedilmesini sağlayabiliriz.

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.