WPF XMAL ile Grid kullanımı

Gridler kullanarak Hesap Makinesi için görsel arayüz oluşturalım.

<Window x:Class="WPFGiris.D3.MainWindow"         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"         xmlns:local="clr-namespace:WPFGiris.D3"         mc:Ignorable="d"         Title="MainWindow" Height="525" Width="350">     <Grid Margin="10">                  <Grid.ColumnDefinitions>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="*"/>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="2*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>         <Label Content="0" Grid.ColumnSpan="4" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="60"/>         <Button Content="AC" Grid.Row="1" Margin="5"/>         <Button Content="+/1" Grid.Row="1" Grid.Column="1" Margin="5"/>         <Button Content="%" Grid.Row="1" Grid.Column="2" Margin="5"/>         <Button Content="/" Grid.Row="1" Grid.Column="3" Margin="5"/>         <Button Content="7" Grid.Row="2" Grid.Column="0" Margin="5"/>         <Button Content="8" Grid.Row="2" Grid.Column="1" Margin="5"/>         <Button Content="9" Grid.Row="2" Grid.Column="2" Margin="5"/>         <Button Content="*" Grid.Row="2" Grid.Column="3" Margin="5"/>         <Button Content="4" Grid.Row="3" Grid.Column="0" Margin="5"/>         <Button Content="5" Grid.Row="3" Grid.Column="1" Margin="5"/>         <Button Content="6" Grid.Row="3" Grid.Column="2" Margin="5"/>         <Button Content="-" Grid.Row="3" Grid.Column="3" Margin="5"/>         <Button Content="1" Grid.Row="4" Grid.Column="0" Margin="5"/>         <Button Content="2" Grid.Row="4" Grid.Column="1" Margin="5"/>         <Button Content="3" Grid.Row="4" Grid.Column="2" Margin="5"/>         <Button Content="+" Grid.Row="4" Grid.Column="3" Margin="5"/>         <Button Content="0" Grid.Row="5" Grid.ColumnSpan="2" Margin="5"/>         <Button Content="." Grid.Row="5" Grid.Column="2" Margin="5"/>         <Button Content="=" Grid.Row="5" Grid.Column="3" Margin="5"/>     </Grid> </Window> 

<Grid.ColumnDefinitions>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="*"/>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="2*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>

Üstteki kod tanımına göre: .ColumnDefinitions sütun tanımlama anlamına gelmektedir. Altında bulunan elementler ise 4 tanedir. Yani 4 tane sütun oluşturulmuştur. Genişliği * olarak verildiğinden ekran 4 eşit parçaya bölünerek sütunlar oluşturulur.

Grid.RowDefinitions ile satır tanımlama anlamındadır. Height ile yükseklikleri belirtilmiştir * değeri sayfanın yüksekliğini 6 tane satır oluştuğundan 6 parçaya böler. İlk satır için 2* yükseklik değeri belirtildiğinden diğer satırlara göre 2 kat büyüktür.