The Border control

Border (Kenarlık) kontrolü, başka bir öğenin etrafına bir kenarlık, arka plan veya her ikisini birden çizebileceğiniz bir Decorator (Dekoratör) kontrolüdür. WPF panelleri, kenarları etrafında bir kenarlık çizme desteği sunmadığı için, Border kontrolü, örneğin bir Panel'i Border kontrolüyle çevreleyerek bunu kolayca gerçekleştirmenize yardımcı olabilir.

A simple example on using the Border as described above could look like this:

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="170" Width="200">
    <Grid Margin="10">
		<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

Border (Kenarlık) tamamen görünüşsüzdür, ta ki bir arka plan veya bir kenarlık fırçası ve kalınlık tanımlayana kadar. İşte burada, Background (ArkaPlan), BorderBrush (KenarlıkFırçası) ve BorderThickness (KenarlıkKalınlığı) özelliklerini kullanımı.

Yuvarlak köşeli kenarlık

Border (Kenarlık) hakkında gerçekten takdir ettiğim özelliklerden biri, yuvarlak köşeleri elde etmenin bu kadar kolay olmasıdır. İşte köşelerin artık yuvarlak olduğu bu hafif değiştirilmiş örneğe bir bakın:

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
		<Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="8,8,3,3">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

Yapmam gereken tek şey CornerRadius özelliğini eklemekti. Bu özellik, tüm dört köşe için kullanılacak tek bir değerle belirtilebilir veya burada olduğu gibi, üst sağ ve sol köşeler için ayrı, ardından alt sağ ve sol köşeler için ayrı değerler belirtebilirsiniz.

Kenarlık rengi ve kalınlığı

Yukarıdaki kenarlık çok sade, ancak renk ve/veya kalınlık düzenleyerek kolayca değiştirilebilir. Çünkü BorderThickness özelliği Thickness türündedir, bu nedenle kenarlıkların her bir genişliğini ayrı ayrı değiştirebilir veya sol ve sağ için bir değer, üst ve alt kenarlıklar için tek değer vererek ayarlayabilirsiniz.

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
		<Border Background="GhostWhite" BorderBrush="DodgerBlue" BorderThickness="1,3,1,5">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

Kenarlık etiketi için arkaplan

Background özelliği, Brush türündedir, bu da pek çok harika olasılık sunar. İlk örneklerde görüldüğü gibi, arka plan olarak basit bir renk kullanmak çok kolaydır, ancak aslında gradyanlar da kullanabilirsiniz ve bunu yapmak o kadar da zor değildir:

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
		<Border BorderBrush="Navy" BorderThickness="1,3,1,5">
			<Border.Background>
				<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
					<GradientStop Color="LightCyan" Offset="0.0" />
					<GradientStop Color="LightBlue" Offset="0.5" />
					<GradientStop Color="DarkTurquoise" Offset="1.0" />
				</LinearGradientBrush>
			</Border.Background>
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

Bu durumda, Border'ın arka planı için kullanılacak bir LinearGradientBrush ve daha uygun bir kenarlık rengi belirledim. LinearGradientBrush anlaşılabilir bir sözdizimine sahip olmayabilir, bu yüzden bunu ve diğer fırça türlerini daha sonraki bir bölümde açıklayacağım, ancak şimdilik örneğimi deneyebilir ve değerleri değiştirerek sonucu görebilirsiniz.