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

Arşiv

Etiketlenen yazılar border

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 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" />

CSS kullanarak şekiller oluşturmak

18 October 2012 Yorum yapılmamış

Güncelleme: CSS3 ile birlikte aşağıdaki liste ve stiller güncellendi

CSS stillerini kullanarak web sayfalarına çeşitli şekiller ekleyebiliriz.

Aşağıdaki listede kullanabileceğiniz birçok şekil bulunmakta;

#square { width: 100px; height: 100px; background: red; }

#rectangle { width: 200px; height: 100px; background: red; }

#circle { width: 100px; height: 100px; background: red; border-radius: 50%; }

#oval { width: 200px; height: 100px; background: red; border-radius: 100% / 50%; }

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }

#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }

#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }

#pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }

#talkbubble { width: 120px; height: 80px; background: red; position: relative; border-radius: 10px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }

Kaynak: Shapes of CSS