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.
Bir cevap yazın