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

Arşiv

Etiketlenen yazılar page

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 resimleri yuvarlak göstermek

02 March 2016 1 yorum

Son yıllarda özellikle mobil uygulamalarda avatar dediğimiz stilde resimleri yuvarlak göstermek sıklıkla kullanılır oldu.

Bunu gerçekleştirebilmek için resimleri yuvarlak kaydetmeye gerek yok.

Bu makalede Windows 10 UWP projesinde resimleri nasıl yuvarlak gösterebileceğimizi inceleyeceğiz.

Önce bir Blank App (Universal Windows) projesi oluşturalım;

Projenin Assets dizinine yuvarlak göstermek istediğimiz resmi ekleyelim, bu makalede ben Bora Kaşmer‘in aşağıdaki resmini ekliyorum;

MainPage.xaml dosyasını açalım ve kodları aşağıdaki şekilde güncelleyelim;

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

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Image Source="/Assets/bora.jpg" Width="250" Height="250" />
	</Grid>

</Page>

Böylece ekrana bir Image nesnesi ekledik ve içerisinde Bora Kaşmer‘in resmini aşağıdaki gibi gösterdik;

Eğer bu resmi kare değil, yuvarlak göstermek istiyorsak, Grid nesnesinin içindeki Image nesnesini Ellipse nesnesi ile değiştirip, Fill özelliğine ImageBrush nesnesi ekliyoruz;

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

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Ellipse Width="250" Height="250">
			<Ellipse.Fill>
				<ImageBrush ImageSource="/Assets/bora.jpg" />
			</Ellipse.Fill>
		</Ellipse>
	</Grid>

</Page>

Böylece ekranımız aşağıdaki şekilde yuvarlak resim ile gözükür hale geliyor;

Windows 10 UWP Uygulamalarında InkCanvas ile imza almak

10 February 2016 2 yorum

Geçen hafta email ile aldığım bir soruyu cevaplamak üzere bu makaleyi yazıyorum.

Windows 10 UWP uygulamalarında eğer kullanıcının imzasını ekran üzerinde almak isterseniz InkCanvas sınıfını kullanabilirsiniz.

Hemen Visual Studio açıp yeni bir proje oluşturarak nasıl yapabileceğimizi inceleyelim;

Öncelikle MainPage.xaml dosyasını açalım ve içerisini aşağıdaki gibi değiştirerek, ekran tasarımımızı yapalım;

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

	<Grid Background="#f1c40f" Padding="20">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>

		<TextBox Header="Adınız" Grid.Row="0" />
		<TextBox Header="Soyadınız" Grid.Row="1" />
		<TextBlock Text="İmzanız" Margin="0, 4, 0, 8 " Grid.Row="2" />
		<InkCanvas x:Name="ink" Grid.Row="3" />
		<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="Kaydet" Padding="10" Grid.Row="4" />
	</Grid>

</Page>

Eğer uygulamamızı Windows 10 Mobile Emulator‘ünde açacak olursak aşağıdaki gibi gözükmeli;

Dokunmatik ekran ve Mouse ile InkCanvas‘ın kullanılabilmesi için MainPage.xaml.cs dosyasında bulunan constructor‘da InkPresenter property‘sinde yeralan InputDeviceTypes özelliğine CoreInputDeviceTypes enum’ında bulunan Mouse ve Touch değerlerini aşağıdaki şekilde eklememiz gerekli;

ink.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;

Böylece uygulamada imza atmak için bir boşluk oluşturmuş olduk;

Eğer istersek, InkCanvas sınıfının InkPresenter property’sinde yeralan UpdateDefaultDrawingAttributes() methoduna yeni bir InkDrawingAttributes sınıfından değişken tanımlayabilir ve InkCanvas üzerine yapılan çizimlerin kalemini değiştirebiliriz;

var attr = new InkDrawingAttributes();
attr.Color = Colors.Red;
attr.PenTip = PenTipShape.Circle;
attr.Size = new Size(3, 18);
ink.InkPresenter.UpdateDefaultDrawingAttributes(attr);

Not : Taklit etmeye çalıştığım Picasso‘nun çok bilinen imzası aşağıdaki gibidir, ne dersiniz, benzetebilmiş miyim?

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 {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ı;