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

Arşiv

Etiketlenen yazılar background

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

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;

SASS (scss dosyaları) ile !default anahtar kelimesi kullanımı

16 February 2016 Yorum yapılmamış

SASS Dokümantasyonunda Variable Defaults: !default alanında yazana göre;

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

yani, !default anahtar kelimesi ile biten bir değişken tanımı varsa ve o ana kadar o değişken daha önce tanımlanmadıysa tanımlanır ve değer ataması yapılır, daha önce tanımlandıysa görmezden gelinir

Hemen bir örnek ile inceleyelim;

$ornek: 'ilk içerik';

$ornek: 'ikinci içerik' !default;

#main {
	content: $ornek;
}

Yukarıdaki SASS (scss dosyası) çıktısı aşağıdaki gibi olacaktır;

#main {
	content: 'ilk içerik';
}

Aynı şekilde

$renk: red;

$renk: blue !default;

#main {
	background-color: $renk;
}

SASS (scss dosyası) çıktısı aşağıdaki gibi olacaktır;

#main {
	background-color: red;
}

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?

SASS (scss dosyaları) ile diziler ve döngüler

05 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Asp.Net Kategorisindeki diğer makalelerimi ve SASS (scss dosyaları) nedir? makalesini okumanızı tavsiye ederim.

SASS dosyalarında birden fazla değişkenin bir dizi olarak ele alınmasını ve bu dizideki her eleman için bir css stili oluşmasını isteyebiliriz.

Örneğin SASS dosyamızda aşağıdaki değişkenleri tanımlamış olalım;

$Twitter: #41b7d8;
$Facebook: #3b5997;
$GooglePlus: #d64937;
$Linkedin: #0073b2;

SASS dosyalarında liste tipinde bir değişken tanımı yapmak için, değişkene değerleri virgüllerle ayırarak (comma-seperated) vermemiz lazım. Örneğin;

$SocialColors: $Twitter, $Facebook, $GooglePlus, $Linkedin;

Artık @for döngüsü yazarak $SocialColors dizisinin her bir elemanına erişebiliriz;

@for $i from 1 through length($SocialColours) {
	img-#{$i} {
		background: nth($SocialColors, $i);
	}
}

@for döngüsü ile döndüğümüz değişkenin kaçıncı elemanında olduğumuzu #{$i} kodu ile alabiliyoruz, herhangi bir dizinin istediğimiz sıradaki elemanını nth(dizi-adi, sira) kod parçası ile alabiliyoruz.

Yukarıdaki SASS kodunun css çıktısı aşağıdaki gibi olacaktır;

img-1 {
	background:#41b7d8
}
img-2 {
	background:#3b5997
}
img-3 {
	background:#d64937
}
img-4 {
	background:#0073b2
}

Peki, img-1, img-2, img-3 isimli stiller değil de, twitter, facebook, linkedin, isimli stiller oluşturmak isteseydik?

SASS dosyalarında Array (dizi) yerine, Dictionary (sözlük) tipinde değişkenler de oluşturabiliriz. Böylece her eleman iki parçadan oluşacak, örneğin biri değişkenin adını, diğeri rengini içerebilir;

$Social:
	(Twitter, $Twitter),
	(Facebook, $Facebook),
	(GooglePlus, $GooglePlus),
	(Linkedin, $Linkedin);

@each döngüsü ile $Social değişkeninin her elemanına ulaşabilir, ulaştığımız elemanın ilk parçasına $name değişkeni, ikinci parçasına $color değişkeni aracılığıyla ulaşabiliriz;

@each $name, $color in $Social {
	.social-link-#{$name} {
		background-color: $color;
		color: darken($color, 35%);
	}
}

Değişkenin adını, css çıktısına eklemek için #{} kod parçasını kullandık.

Yukarıdaki SASS kodunun css çıktısı aşağıdaki gibi olacaktır;

.social-link-Twitter {
	background-color:#41b7d8;
	color:#114655;
}
.social-link-Facebook {
	background-color:#3b5997;
	color:#090d17;
}
.social-link-GooglePlus {
	background-color:#d64937;
	color:#4b160f;
}
.social-link-Linkedin {
	background-color:#0073b2;
	color:#000;
}

darken() methodunu da kullanarak yazı renginin arkaplan renginden 35% daha koyu olmasını sağladık. Hatta background-image stiline dizi elemanının isminden değer vermek için aşağıdaki kodu kullanabiliriz;

background-image: url('/images/#{$name}.png');

Kaynak : SASSMeister