WPF Layout Techniques - Grids

අපි දන්නවා WPF එහෙම නැත්නම් Windows Presentation Foundation කිව්වම Windows applications ගොඩක් ලස්සනට හදාගන්න Microsoft එකෙන් අපිට දීල තියෙන technology එකක්. ඉතින් අපි අද බලමු ඕනෙම application එකක් හදද්දී අපිට ගොඩක් වැදගත් දෙයක් වෙන control layout එක ලේසියෙන් කරගන්නේ කොහොමද කියල. මේකට අපි පාවිච්චි කරන්නේ Grid කියන control එක. අපි අද අපේ උදාහරණය විදිහට ගන්නේ සරල Login form එකක්. කට්ටියට මතක නේ අපි web pages හදද්දී <table></table> tags වලින් layout හදනවා මේ වැඩෙත් ටිකක් විතර එකට සමානයි. වැඩි කතා නැතුව බලමුකෝ අපි මොකද්ද කරන්න හදන්නේ කියලා.

Login Window

දැන් අපි බලමු මේක හදාගන්නේ කොහොමද කියල.

1. අපි මුලින්ම කරගන්න ඕනෙ වැඩේ තමයි අපේ basic layout එක grid එකක් පාවිච්චි කරලා හදාගන්න එක. මේ තියෙන්නේ ඒකට ඕනෙ කරන xaml code එක.
   

    <Window x:Class="WpfBasics.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Login to WPF Sample" Height="200" Width="350" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow" Background="WhiteSmoke">  
      <Grid>  
        <Grid.RowDefinitions>  
          <RowDefinition Height="35" />  
          <RowDefinition Height="35" />  
          <RowDefinition Height="35" />  
          <RowDefinition Height="35" />  
          <RowDefinition Height="*" />  
        </Grid.RowDefinitions>  
        <Grid.ColumnDefinitions>  
          <ColumnDefinition Width="120" />  
          <ColumnDefinition Width="*" />  
        </Grid.ColumnDefinitions>  
      </Grid>  
    </Window>  
   

   මේකේ සමහර Height Width values * කියල දාල තියෙන්නේ, ඉතිරි වෙන ඉඩ ඔක්කොම ගන්න කියන එක. මේ වැඩේ කරලා ඉවර උනාම ඔයාලගේ window එක මෙන්න මේ වගේ කොටස් කීපයකට බෙදිලා තියෙන්න ඕනෙ. මේකේ තියෙන මේ එක එක cells ඇතුලට තමා අපි අපේ Labels Textboxes වගේ items දාන්නේ.
   
   
   
   
2. දැන් අපි ලෑස්ති වෙන්නේ අපේ Heading text එක එහෙමත් නැත්නම් මේ Welcome to WPF Samples කියල ලොකුවට තියෙන text එක දාගන්න.
   

    <Label Grid.Row="0" Grid.ColumnSpan="2" Margin="20,0" Content="Welcome to WPF Samples" FontSize="16" FontWeight="Bold" />  
   

   දැන් මෙතන ඔයාලට පේනවා Margin, Content වගේ සාමාන්‍යයෙන් අපි පාවිච්චි කරන properties වලට අමතරව Grid.Row="0" Grid.ColumnSpan="2" කියල properties දෙකක් පාවිච්චි වෙනවා. ඒ දෙකෙන් තමා කියවෙන්නේ අපි මේ දාන item එක grid එකේ position වෙන්න ඕනෙ කොහොමද කියල. Grid.Row="0" කිව්වම මේක වැටෙන්නේ grid එකේ පළවෙනි row එකට. Grid.ColumnSpan="2" කිව්වම මේ item එක columns දෙකක් හරහා පැතිරෙනවා කියන එක කියවෙනවා.
3. දැන් බලමු Username, Password labels එක්ක boxes දාගන්න විදිහ.
   

   <Label Grid.Row="1" Grid.Column="0" Margin="20,0" Content="Username :" />  
   <TextBox Grid.Row="1" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="10,5,0,0" Name="txtUsername" VerticalAlignment="Top" Width="150" />  
   <Label Grid.Row="2" Grid.Column="0" Margin="20,0" Content="Password :" />  
   <PasswordBox Grid.Row="2" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="10,5,0,0" Name="pwdPassword" VerticalAlignment="Top" Width="150" />  
   

   Username label එක ගත්තොත් ඒක අපි දාල තියෙන්නේ දෙවැනි row එකේ පළවෙනි column එකට. ඒ වගේ තමා අපි අනිත් controls ටිකත් arrange කරගෙන තියෙන්නේ.
4. ඊට පස්සේ අපි මේ පහල පෙන්නලා තියෙන විදිහට තමා buttons දෙක දාගන්නේ.
   

   <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal">  
          <Button Content="Login" Margin="10,0,5,0" Height="23" Name="btnLogin" Width="75" />  
          <Button Content="Cancel" Height="23" Name="btnCancel" Width="75" />  
   </StackPanel>  
   

   මෙතන මේ තියන StackPanel එකෙන් කරන්නේ ඒකට දාන controls තිරස් අතට හරි සිරස් අතට හරි arrange කරගන්න එක. මේකේ Orientation="Horizontal" කියල තියෙන නිසා එයා අපි දාන controls තිරස් අතට arrange කරගන්නවා.
5. මේ window එක design කරගන්න ඕනෙ වෙන සම්පූර්ණ xaml code එක තමා පහල තියෙන්නේ.
   

    <Window x:Class="WpfBasics.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Login to WPF Sample" Height="200" Width="350" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow" Background="WhiteSmoke">  
      <Grid>  
        <Grid.RowDefinitions>  
          <RowDefinition Height="35" />  
          <RowDefinition Height="35" />  
          <RowDefinition Height="35" />  
          <RowDefinition Height="35" />  
          <RowDefinition Height="*" />  
        </Grid.RowDefinitions>  
        <Grid.ColumnDefinitions>  
          <ColumnDefinition Width="120" />  
          <ColumnDefinition Width="*" />  
        </Grid.ColumnDefinitions>  
        <Label Grid.Row="0" Grid.ColumnSpan="2" Margin="20,0" Content="Welcome to WPF Samples" FontSize="16" FontWeight="Bold" />  
        <Label Grid.Row="1" Grid.Column="0" Margin="20,0" Content="Username :" />  
        <TextBox Grid.Row="1" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="10,5,0,0" Name="txtUsername" VerticalAlignment="Top" Width="150" />  
        <Label Grid.Row="2" Grid.Column="0" Margin="20,0" Content="Password :" />  
        <PasswordBox Grid.Row="2" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="10,5,0,0" Name="pwdPassword" VerticalAlignment="Top" Width="150" />  
        <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal">  
          <Button Content="Login" Margin="10,0,5,0" Height="23" Name="btnLogin" Width="75" />  
          <Button Content="Cancel" Height="23" Name="btnCancel" Width="75" />  
        </StackPanel>  
      </Grid>  
    </Window>  
   

එහෙම නම් ඉතින් කට්ටිය මේ වැඩේ try කරලා බලන්න හරිම ලේසියි, windows forms වලට වඩා ලේසි කියල හිතෙනවා මට නම්.