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

Arşiv

Etiketlenen yazılar controls

Windows 10 UWP uygulamalarında ekran nesnelerine stil vermek – Inline

25 June 2016 Yorum yapılmamış

Windows 10 UWP uygulaması geliştirirken ekranda göstereceğimiz nesnelerin varsayılandan farklı gözükmesini isteriz.

Bunun için istediğimiz nesnelerin stillerini (Style) değiştirmemiz gerekir.

Hemen yeni bir proje oluşturalım ve stilleri nasıl değiştireceğimizi inceleyelim;

Projeyi oluşturduktan sonra, MainPage.xaml dosyasını açalım ve içerisini aşağıdaki şekilde değiştirelim;

Stilini değiştirmek istediğimiz nesnenin özelliklerini kullanarak farklı gözükmesini sağlayabiliyoruz. Örneğin, sayfaya bir Button nesnesi ekleyerek aşağıdaki özelliklerini değiştirebilir, ekranda varsayılan halinden farklı gözükmesini sağlayabiliriz;

  • Background
  • Foreground
  • BorderBrush
  • Margin
  • Padding

Sonuç aşağıdaki gibi olmalı;

HTML5 video element CSS3 ile efekt uygulamak

15 April 2016 Yorum yapılmamış

HTML5 ile gelen <video></video> elementine CSS3 ile stil uygulayarak efekt uygulayabiliyoruz. Örneğin, video element içerisinde oynayan videoyu siyah-beyaz yapmak, renk doygunluğu ile oynamak, flu hale getirmek, renkleri ters çevirmek, vs gibi efektler rahatlıkla programlanabiliyor.

Bu makalede yeni bir HTML5 sayfası oluşturarak, oynayan video’ya nasıl efekt verebileceğimizi göreceğiz.

Öncelikle yeni bir html sayfası oluşturalım;

Sayfanın <body></body> taglarının arasına video elementimizi ekleyelim;

Şimdi, <head></head> taglarının arasına yeni bir <style></style> element ekleyelim ve içerisine aşağıdaki stilleri yazalım;

Artık video elementine hangi efekti uygulamak istiyorsak, ilgili css class‘ını uygulamamız yeterli, örneğin;

HTML5 video element ile sayfanın arkaplanında video oynatmak

02 April 2016 Yorum yapılmamış

Son zamanlarda internette çeşitli sitelerin sayfalarının arkaplanlarını video haline getirdiklerini görüyoruz, örneğin;

Bu makalede bir web sayfasının arkaplanını video haline getireceğiz. Öncelikle yeni bir html sayfası oluşturalım;

Sayfanın <body></body> taglarının arasına video elementimizi ekleyelim;

Artık sayfada video elementimiz gözükecek, hatta video sonuna kadar oynadıktan sonra başa dönecek ve sessiz başlatılacak, fakat istediğimiz gibi sayfanın arkaplanını henüz kaplamıyor. <head></head> elementi içerisine <style></style> elementi ekleyelim ve aşağıdaki stili tanımlayalım;

Son olarak <head></head> elementi içerisine <script></script> elementi aracılığıyla aşağıdaki javascript kodunu ekleyelim ve böylece tarayıcının boyutlandırıldığı durumlarda sayfanın arkaplan video’sunu sayfanın içine tam sığacak şekilde boyutlandıralım;

Bu durumda sayfamızın arkaplanında tam ekran video oynayacak, istersek sayfaya butonlar, menüler, başlıklar, yazı alanları, linkler ekleyebileceğiz;

HTML5 video element özellikleri

25 March 2016 Yorum yapılmamış

Web sayfalarında multimedia oynatmak için HTML5 ile yeni birkaç element ve Javascript API hayatımıza girdi.

Bu makalede HTML5 ile yeni gelen <video> element’ini inceleyeceğiz. Hemen yeni bir html sayfası oluşturalım ve video elementini incelemeye başlayalım.

Visual Studio Code editörünü açalım ve istediğimiz dizinde video.html dosyasını oluşturalım, içerisine en temel HTML5 kodlarını aşağıdaki gibi ekleyelim;

Öncelikle <body></body> tagları arasına yeni bir <video></video> element ekliyoruz. Sayfayı kaydedip tarayıcıda açtığımızda ekranda herhangi bir şey görmüyoruz, çünkü hiçbir özellik verilmemiş olan video elementi ekranda gözükmez.

Basitçe video elementine src attribute tanımlayarak sayfada video‘nun görüntülenmesini sağlayabiliriz, örneğin;

Sayfayı tarayıcıda açtığımız zaman, video‘nun orjinal boyutlarında siyah bir dörtgen görmemiz lazım;

Fakat bu noktada video‘yu başlatmak, durdurmak, ses seviyesini değiştirmek gibi şeyleri yapamıyoruz. Eğer video elementine controls attribute ekleyecek olursak, video‘yu başlatabileceğimiz, durdurabileceğimiz, ilerlemesini takip edebileceğimiz çeşitli butonlar video’nun altına eklenecek, örneğin;

Farklı tarayıcılar farklı video formatlarını desteklerler, yukarıdaki örnekte olduğu gibi eğer sadece mp4 formatını kullanacak olursak bazı kullanıcılar video’yu izleyemeyecekler.

Sayfada video elementinin src attribute’ünü kullanmak yerine, source elementinden birkaç tane kullanabiliriz, böylece birden fazla formatta aynı video’yu video elementine ekleyebiliriz, örneğin;

Artık mp4, webm ve ogg formatlarından birini destekleyen tüm tarayıcılarda videomuz oynatılabilecek. video element içerisine istediğimiz kadar format için istediğimiz kadar source element ekleyebiliriz.

Eğer video‘nun orjinal boyutlarında değil, bizim istediğimiz boyutlarda ekranda görüntülenmesini istiyorsak, yapmamız gereken video elementine width ve height özelliklerini vermek olacak, örneğin;

Eğer video’nun orjinal boyutları ile orantılı boyut belirlersek, video ilgili alanda gösterilir, eğer orantılı boyut belirlemezsek, video ilgili alanın ortasına gelecek şekilde boyutlandırılır, soldan-sağdan veya üstten-alttan kalan boşluklar siyah renk ile doldurulur.

Birçok tarayıcı, sayfadaki video elementinde bulunan video’yu önceden yüklemeye başlar, böylece video oynatılacağı zaman kullanıcı bir miktar yüklenene kadar beklemek zorunda kalmaz.

İstersek bu özelliğin farklı şekilde davranmasını video elementinin preload özelliğine vereceğimiz değer ile sağlayabiliriz.

preload=”none”

Bu durumda, video başlatılana kadar ekranda hiç yer kaplamayacak, siyah arkaplan gözükmeyecek, video uzunluğu dakika/saniye cinsinden bilinmeyecek. Video başlatıldığında video’nun boyutu bulunacak ve boyutu kadar yer kaplamaya başlayacak.

Mobil cihazlarda görüntülenecek video’lar için tavsiye edilen özellik budur. CSS ile video’nun görüntüleneceği alana stil verip, video başlatılana kadar hiç yüklenmemesi sağlanabilir.

preload=”metadata”

Bu durumda, video’nun ne kadar büyük olduğu bilgisi otomatik olarak okunur ve gerekli alanı kaplamaya başlar. İstersek CSS ile stil verebiliriz, vermesek bile en azından video alanı, dakika/saniye cinsinden uzunluğu sayfada gözükür.

İstersek autoplay özelliğini kullanarak, video’nun sayfa açıldığında otomatik olarak oynatılmaya başlanmasını da sağlayabiliriz, örneğin;

Ayrıca loop özelliğini kullanarak, video’nun sonuna gelindiğinde otomatik olarak başa dönerek tekrar oynatılmasını sağlayabiliriz, örneğin;

Eğer video alanının video oynatılana kadar siyah kalmasını istemiyorsak, poster özelliğini kullanabiliriz, örneğin;

Eğer video’nun sessiz oynatılmasını istiyorsak, muted özelliğini kullanabiliriz, örneğin;

Böylece, kullanıcı video’nun sesini açmadıkça, video sessiz olarak oynatılacaktır.

Windows 8 Metro Style ilk uygulamamız

07 October 2011 1 yorum

Windows 8 Programlama makalelerinde ilk uygulamamızı geliştirmeye başlıyoruz.

Windows 8 Başlangıç Ekranımızda (Start Screen) Visual Studio 2011 üzerine tıklayarak, yeni bir Visual Studio 2011 başlatıyoruz.

File / New / Project menüsünden Windows Metro Style kategorisindeki Application proje şablonunu seçiyoruz ve MetroStyleIlkUygulama ismini vererek projemizi oluşturuyoruz.

Proje oluşturulduğunda Visual Studio 2011 varsayılan olarak MainPage.xaml dosyasını açıyor. Uygulamamızın başlangıç ekranı varsayılan olarak MainPage.xaml dosyasıdır.

Grid elementi içerisine bir button, bir de label eklemek için aşağıdaki satırları yazıyoruz;

<Button Content="Mesaj Göster" FontSize="28" Width="250" Height="80" HorizontalAlignment="Center" />
<TextBlock x:Name="MessageText" FontSize="48" Foreground="White" />

WPF ve Silverlight‘ta Label nesnesi oluşturmak için TextBlock nesnesi kullanmamız gerekiyor. Bu elementler ile ekranımıza Mesaj Göster metinli bir button ve metin içermediği için ekranda gözükmeyen bir textblock nesnesi koymuş olduk.

Fakat bu kontrolleri ekranda ortalayabilmek için bir StackPanel içerisine koymamız gerekiyor;

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
	<Button Content="Mesaj Göster" FontSize="28" Width="250" Height="80" HorizontalAlignment="Center" />
	<TextBlock x:Name="MessageText" FontSize="48" Foreground="White" />
</StackPanel>

StackPanel ve Button elemanlarına verdiğimiz Alignment özellikleri sayesinde elemanları ekranda ortalıyoruz.

Son olarak Button element’imize

Click="Button_Click"

özelliğini ekleyelim. Böylece butona tıklanma event‘i ile tetiklenen bir method‘umuz oluyor.

MainPage.xaml.cs dosyasına;

private void Button_Click(object sender, RoutedEventArgs e)
{
	MessageText.Text = "Windows 8 üzerinde çalışan\r\nilk uygulamamız!!";
}

method’unu ekliyoruz.

Son olarak F5 tuşuna basarak projeyi test amaçlı çalıştırıyoruz. Uygulama açılışında ilk önce bekleme ekranı ekrana geliyor.

Fakat çok kısa süre içerisinde ilk ekranımız açılıyor.

Butona tıkladığımızda TextBlock metin ile doluyor.

Kodların tamamı;

<UserControl x:Class="MetroStyleIlkUygulama.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DesignHeight="768" d:DesignWidth="1366">

<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
	<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
		<Button Content="Mesaj Göster" FontSize="28" Width="250" Height="80" HorizontalAlignment="Center" Click="Button_Click" />
		<TextBlock x:Name="MessageText" FontSize="48" Foreground="White" />
	</StackPanel>
</Grid>

</UserControl>