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

Arşiv

Etiketlenen yazılar stackpanel

Windows 10 UWP uygulamasında MediaEditing ile resimlerden video oluşturmak

06 March 2016 Yorum yapılmamış

Bu makale’de ilginç bir uygulama yazarak, 10 adet resim ve 1 adet mp3 dosyasından 1 adet video üreteceğiz.

Aşağıdaki projeyi geliştirirken ihtiyacımız olacak örnek dosyaları aşağıda paylaşıyorum;

Hemen yeni bir Blank App (Universal Windows) proje oluşturalım;

MainPage.xaml dosyasını açalım içerisindeki kodları aşağıdaki şekilde güncelleyelim. Böylece ekranda bir Button nesnesi gözükecek, üzerine tıklandığında resim ve ses dosyaları kullanılarak bir video oluşturulacak, oluşturulan video dosyası Button‘un hemen altına eklediğimiz MediaElement nesnesinde oynatılacak.

<Page
	x:Class="CreatingVideoFromImages.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:CreatingVideoFromImages">

	<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Button Content="Video Oluştur" Click="Button_Click" />

		<MediaElement x:Name="player" Width="1024" Height="768" />
	</StackPanel>

</Page>

MainPage.xaml.cs dosyasında Button_Click() methodunu oluşturmalıyız;

private async void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	var composition = new MediaComposition();
	var folderPhotos = await Package.Current.InstalledLocation.GetFolderAsync("Assets\\Photos");

	foreach (var file in await folderPhotos.GetFilesAsync())
	{
		var clip = await MediaClip.CreateFromImageFileAsync(file, TimeSpan.FromMilliseconds(3500));

		composition.Clips.Add(clip);
	}

	var folderSounds = await Package.Current.InstalledLocation.GetFolderAsync("Assets\\Sounds");

	foreach (var file in await folderSounds.GetFilesAsync())
	{
		var track = await BackgroundAudioTrack.CreateFromFileAsync(file);

		composition.BackgroundAudioTracks.Add(track);
	}

	var renderFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("video.mp4", CreationCollisionOption.GenerateUniqueName);

	await composition.RenderToFileAsync(renderFile);

	player.SetSource(await renderFile.OpenReadAsync(), renderFile.ContentType);

	player.Play();
}

Yukarıdaki kod bloğunda öncelikle MediaComposition sınıfından yeni bir değişken oluşturuyoruz. Böylece istediğimiz kadar resim, ses veya video dosyasını bu composition değişkenine ekleyerek yeni bir video oluşturabileceğiz.

Package sınıfının InstalledLocation property‘sinden erişebildiğimiz GetFolderAsync() methodu ile projenin istediğim dizinine erişebiliyor, GetFilesAsync() methodunu kullanarak içindeki dosyaları elde edebiliyoruz.

MediaClip sınıfının static CreateFromImageFileAsync() methodunu kullanarak TimeSpan sınıfı aracılığıyla belirlediğimiz süre kadar videoda görüntülenecek resimleri composition değişkenine ekliyoruz.

BackgroundAudioTrack sınıfının static CreateFromFileAsync() methodunu kullanarak videonun arkaplan sesi olacak ses dosyalarını composition değişkenine ekliyoruz.

ApplicationData sınıfının LocalFolder property‘si aracılığı ile erişebildiğimiz CreateFileAsync() methodu aracılığıyla video.mp4 isimli dosyayı oluşturuyoruz, ikinci parametrede CreationCollisionOption.GenerateUniqueName değerini verdiğimiz için aynı isimli bir dosya zaten dizinde varsa dosyaya yeni bir isim verilecek.

MediaComposition sınıfının RenderToFileAsync() methodunu kullanarak, resim ve ses dosyaları eklediğim composition değişkeninden video oluşturuyoruz.

Ekranda yeralan MediaElement nesnesinin SetSource() methodunu kullanarak oluşturduğumuz video dosyasını yüklüyor, Play() methodunu kullanarak ekranda oynatmaya başlıyoruz.

Bu makalede verdiğim resim ve ses dosyalarını kullanarak oluşturulan videoyu aşağıda izleyebilirsiniz;

Windows 10 UWP uygulamasında Log için Slack kullanmak

22 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding makalesini okumanızı tavsiye ederim.

Slack, http://www.slack.com adresinde hizmet veren, son yılların en başarılı uygulamalarından birisi. Kendi sitelerinde yazana göre;

Slack is a messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive

Geçen hafta aldığım çok ilginç bir email‘de bir uygulamada loglama için Slack kullanabilir miyiz? sorusu vardı.

Bu makalede Windows 10 UWP uygulamasında Slack entegrasyonu yapacağız, fakat aynı yöntemler ile rahatlıkla bir web uygulamasında veya web service‘inde aynı entegrasyon kurulabilir.

Öncelikle Slack üzerinde ücretsiz olarak bir hesap, hesabı oluşturduktan sonra yeni bir Channel oluşturmamız gerekiyor. Örneğin SlackLoggerApp-Logs isimli bir channel oluşturmak için;

Yeni bir public channel oluşturunca Slack sayfasında aşağıdaki gibi bir mesaj gözükmeli;

Got it! butonuna tıkladığımızda bizi channel‘in sayfasına yönlendirmeli;

https://{hesap}.slack.com/apps/build/custom-integration adresine giderek yazacağımız uygulamanın entegre olacağı Slack web servisini oluşturuyoruz. Bunun için Incoming WebHooks seçeneğini seçerek ilerlememiz lazım;

Gelen ekranda uygulamamızı geliştirirken ihtiyaç duyacağımız tüm bilgiler yer alıyor. Özellikle Webhook URL ve Sending Messages alanındaki bilgilere kesinlikle ihtiyacımız olacak;

Bu noktaya geldikten sonra Visual Studio‘yu açalım ve yeni bir Blank App (Universal App) projesi oluşturalım;

Projeyi oluşturduktan sonra MainPage.xaml dosyasını açalım ve aşağıdaki kodları yazalım;

<Page
	x:Class="SlackLogger.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SlackLogger">

	<StackPanel Background="#1abc9c" Padding="10">
		<TextBox Header="Adınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind FirstName, Mode=TwoWay}" />
		<TextBox Header="Soyadınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind LastName, Mode=TwoWay}" />
		<TextBox Header="EMail Adresiniz" Margin="5" BorderBrush="Transparent" Text="{x:Bind EMail, Mode=TwoWay}" />
		<TextBox Header="Mesajınız" Margin="5" Height="300" BorderBrush="Transparent" Text="{x:Bind MessageBody, Mode=TwoWay}" />
		<Button Content="Gönder" Margin="5" Height="40" HorizontalAlignment="Stretch" Click="{x:Bind Send}" />
	</StackPanel>

</Page>

Önce bir StackPanel nesnesi oluşturduk, içerisine 4 adet Textbox 1 adet Button nesnesi ekledik.

Textbox nesnelerinin Header özelliklerine verdiğimiz değerler ile birer başlığa sahip olmalarını sağladık.

BorderBrush özelliklerine verdiğimiz Transparent değer sayesinde çerçevelerin gözükmemesini sağladık.

Son olarak, Text özelliklerine ve Click olayına {x:Bind} tipinde değerler vererek Databinding yapıyoruz. Burada önemli olan nokta, Textbox‘ların Text özelliklerine yaptığımız Databinding‘de Mode özelliğine TwoWay değerini vererek, iki yönlü Databinding yapmak. Böylece ekranda bir değer değiştirildiği zaman Databinding yapıldığı property‘nin değeri otomatik olarak güncellenecek.

Böylece çalıştırdığımızda aşağıdaki gibi gözüken bir uygulama elde edeceğiz;

Databinding için FirstName, LastName, EMail ve MessageBody property‘lerini, ayrıca Send() methodunu yazmamız lazım. MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

public string FirstName { get; set; }
public string LastName { get; set; }
public string EMail { get; set; }
public string MessageBody { get; set; }

private async void Send()
{
	var client = new HttpClient();

	var payload = "{\"text\": \"" + FirstName + " " + LastName + "(" + EMail + ") : " + MessageBody + "\"}";

	await client.PostAsync(new Uri("https://hooks.slack.com/services/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"), new HttpStringContent(payload));
}

Böylece Gönder butonuna basıldığında Slack‘te oluşturduğumuz public channel‘ın web service‘ine istediğimiz bilgiyi gönderebileceğiz. Bu makaledeki örnekte Ad Soyad (EMail) : Message formatında bilgiyi Windows.Web.Http namespace‘i altında yeralan HttpClient sınıfının PostAsync() methoduna HttpStringContent tipinde gönderiyoruz.

Gönder butonuna bastığımızda, Slack, aşağıdaki notification‘ı gösterecek;

Eğer Slack‘teki public channel‘ın sayfasını açacak olursak, orada da mesajı görebileceğiz;

Windows 10 UWP Uygulamalarının Hafıza Kullanım Durumu için MemoryManager sınıfını kullanmak

08 February 2016 Yorum yapılmamış

Windows 10 UWP uygulaması geliştirirken hafıza‘nın ne kadarını kullandığınızı ve kullanabileceğiniz ne kadar hafıza alanı kaldığını bulmanız gerekebilir.

Bu durumda Windows.System namespace‘i altında yeralan MemoryManager sınıfını kullanabiliriz.

Hemen Visual Studio açarak yeni bir proje oluşturalım;

Öncelikle MainPage.xaml dosyasını açalım ve içerisine aşağıdaki kodları yazarak ekranımızı tasarlayalım;

<Page
	x:Class="MemoryManagerOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:MemoryManagerOrnek">

	<StackPanel>

		<TextBlock Text="AppMemoryUsage:" />
		<TextBlock Name="AppMemoryUsage" />
		<TextBlock Text="AppMemoryUsageLimit:" />
		<TextBlock Name="AppMemoryUsageLimit" />

	</StackPanel>

</Page>

Şimdi MainPage.xaml.cs dosyasını açalım ve DispatcherTimer sınıfından yeni bir değişken tanımlayıp, MainPage sınıfının constructor‘ında, her 1 saniyede bir tetiklenmesini sağlayalım;

DispatcherTimer timer = null;

public MainPage()
{
	this.InitializeComponent();

	timer = new DispatcherTimer();
	timer.Interval = new TimeSpan(0, 0, 1);
	timer.Tick += timer_Tick;
	timer.Start();
}

Artık timer_Tick() metodumuzu yazabiliriz;

private void timer_Tick(object sender, object e)
{
	AppMemoryUsage.Text = string.Format("{0} ({1:0.00} MB)", MemoryManager.AppMemoryUsage, MemoryManager.AppMemoryUsage / (1024.0 * 1024.0));
	AppMemoryUsageLimit.Text = string.Format("{0} ({1:0.00} GB)", MemoryManager.AppMemoryUsageLimit, MemoryManager.AppMemoryUsageLimit / (1024 * 1024 * 1024));
}

Yukarıdaki metodun içerisinde öncelikle MemoryManager sınıfının AppMemorryUsage property‘sinin değerini okuduk ve bunu (1024 x 1024) değerine bölerek kaç megabayt (MB) yaptığını hesapladık, AppMemoryUsage isimli Textblock nesnesinde gösterdik.

Aynı şekilde MemoryManager sınıfının AppMemorryUsageLimit property‘sinin değerini okuduk ve bunu (1024 x 1024 x 1024) değerine bölerek kaç gigabayt (GB) yaptığını hesapladık, AppMemoryUsageLimit isimli Textblock nesnesinde gösterdik.

Uygulama açıldıktan sonra her 1 saniyede bir, uygulamanın o anda kullandığı hafıza miktarı ve kullanabileceği hafıza miktarı ekranda gösterilecek.

Not : Eğer uygulamayı bilgisayarınızda çalıştıracak olursanız, AppMemoryUsageLimit değeri olarak, sistemde kullanılabilir boş hafıza miktarını görmelisiniz. Eğer 512 MB hafızaya sahip bir cep telefonunda çalıştıracak olursanız, 185 MB limitini, 1024 MB (1 GB) hafızalı bir cep telefonunda çalıştıracak olursanız 390 MB limit görmelisiniz.

Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak

31 January 2016 Yorum yapılmamış

Windows 10 UWP uygulaması yazarken bazen ekranda stil verdiğimiz bir nesnenin stilini aynı tipteki diğer nesnelere de uygulamak isteriz.

Böyle bir durumda içinde bulunduğumuz Page‘in Resources kısmına stillerimizi ortak bir şekilde tanımlamak ve sayfanın içinde aynı tipteki nesnelerde kullanmak iyi bir çözüm yolu olabilir.

Bu makalede örnek olarak, saati gösterecek veya belli bir süreden geri sayım yapabilecek aşağıdaki sayfayı UWP ile tasarlayacağız;

Öncelikle sayfanın kodlarını aşağıdaki hale getirip temizleyelim;

<Page
	x:Class="PageResourceStyleOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:PageResourceStyleOrnek">

</Page>

Sayfaya önce bir StackPanel nesnesi, StackPanel nesnesinin içerisine bir Grid nesnesi, Grid nesnesinin ColumnDefinitions özelliğine de 5 adet ColumnDefinition ekliyoruz.

Aynı şekilde Grid nesnesinin içerisine her Column‘a birer tane denk gelecek şekilde Border nesneleri ekliyoruz, Border nesnelerinin içerisine TextBlock veya StackPanel içerisinde TextBlock ekliyoruz.

Border nesnelerini kullanmamızın sebebi, TextBlock nesnesi tek başına arkaplan rengine sahip olamaz, eğer Border nesnesinin içerisine koyarsak, Border nesnesine verdiğimiz Background özelliği sayesinde bir arkaplan rengi olabilir.

<StackPanel Margin="10">
	<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="0" />
				<TextBlock Text="0" />
			</StackPanel>
		</Border>
		<Border Grid.Column="1">
			<TextBlock Text=":" />
		</Border>
		<Border Grid.Column="2">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="0" />
				<TextBlock Text="0" />
			</StackPanel>
		</Border>
		<Border Grid.Column="3">
			<TextBlock Text=":" />
		</Border>
		<Border Grid.Column="4">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="0" />
				<TextBlock Text="0" />
			</StackPanel>
		</Border>

	</Grid>
</StackPanel>

Böylece tasarım anında ekranımız aşağıdaki gibi gözükecek;

İstediğimiz ekran tasarımına henüz sahip değiliz, fakat yaklaştık. Sayfada birçok nesnenin aynı şekilde gözükmesini istiyoruz, eğer hepsinde aynı özelliklere aynı değerleri verecek olursak aslında bunu elde edebiliriz. Fakat daha sonra değişiklik yapması zor olur, kodun karmaşıklığı artar, vs.

Sayfadaki Page elementinin içerisine Resources elementi ekler ve içerisine istediğimiz nesnelerin ortak sahip olacağı stilleri yazarsak bu problemlerin önüne geçmiş oluruz;

<Page.Resources>
	<Style TargetType="Border">
		<Setter Property="Background" Value="#e67e22" />
		<Setter Property="Padding" Value="10" />
	</Style>
	<Style TargetType="TextBlock">
		<Setter Property="FontSize" Value="20" />
		<Setter Property="Foreground" Value="White" />
		<Setter Property="Margin" Value="10" />
	</Style>
</Page.Resources>

Öncelikle Page.Resources elementini oluşturuyoruz, sayfadaki tüm Border nesneleri için hangi özelliklere hangi değeri atamak istiyorsak, Style elementi içerisinde Setter elementini kullanarak, Property ve Value değerlerine atamalar yapıyoruz.

Aynı şekilde sayfadaki tüm TextBlock nesneleri için de ortak özelliklere değer atamaları yapıyoruz.

Tüm Border ve TextBlock nesnelerine aynı değerleri tek tek atamak yerine, Page.Resources içerisinde ortak bir şekilde atamış olduk. Artık arkarengi değiştirmek istersek, tek bir yerden değiştirebileceğiz;

<Setter Property="Background" Value="#9b59b6" />

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.