Grid Kullanımı : Bir İletişim Formu

Son birkaç bölümdür bir çok teorik bilgi verdik, bazıları çok fazla teorikti. Bu bölümde Grid hakkında elimizdekileri birleştireceğiz ve gerçek dünyada kullanılabilecek bir örnek yapacağız : Basit bir iletişim formu.

İletişim formları hakkında iyi olan şey, çok kullanılan diyaloglara bir örnek olması - kullanılan teknikleri alıp yapmanız gereken her diyalogda uygulayabilirsiniz.

İlk olarak bu görevi çok basit düşüneceğiz ve size basit bir iletişim formu göstereceğiz. Üç satıra sahip, iki tanesi Auto yükseklikte ve sonuncu yıldız yükseklik değerli, geri kalan alanı işgal ediyor :

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>		
		<TextBox>Name</TextBox>
		<TextBox Grid.Row="1">E-mail</TextBox>
		<TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>		
	</Grid>
</Window>

Göreceğiniz gibi sadece ilk ikisi ihtiyacı olan kadar alan kaplarken son TextBox kontrol geri kalan alanı işgal ediyor. Pencereyi boyutlandırmayı denediğinizde 'Comment' TextBox kontrolünün boyutlarının değiştiğini göreceksiniz.

Bu çok basit örnekte alanların ne işe yaradığına dair etiketler yok. Yerine açıklamayı TextBox kontrollerin içlerine yazdık, fakat bu genelde Windows diyaloglarının görünümü değil. Hadi görünümü ve kullanılabilirliği biraz arttıralım :

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
	<Grid Margin="10">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Label>Name: </Label>
		<TextBox Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="1">E-mail: </Label>
		<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
		<Label Grid.Row="2">Comment: </Label>
		<TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
	</Grid>
</Window>

Fakat belki de yorum (Comment) alanının hiç de açıklanmaya gereği olmadığını düşündünüz? Bu durumda etiket koymayıp ColumnSpan kullanarak yorum (Comment) için ayrılan TextBox kontrolüne daha geniş alan ayırabiliriz:

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />

Gördüğünüz gibi Grid çok güçlü bir panel. Umarım tüm bu teknikleri kendi diyaloglarınızı tasarlarken kullanırsınız.