Skip to main content

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 වලට වඩා ලේසි කියල හිතෙනවා මට නම්.
Labels:

Comments

Post a Comment

Popular posts from this blog

Adding Unique Constraints with Entity Framework Code First

Entity Framework Code First is a great way to define and maintain your database within your application it self. While it poses a nice set of complementing libraries like Data Annotations and Fluent Configurations which helps you specially in defining phase of your database, it would give you a headache if you try to define a unique constraint on a column. For example in the users table of your application you could probably have an int ID column which would serve as the primary key and you might need to make your Username column a unique one. Since you are using EF Code First you will soon find out there is no direct way to accomplish this requirement. Unfortunately fluent configurations doesn't have syntax like HasUnique(u => u.Username); I asked the same question in stackoverflow , but didn't get a convincing answer. Since there is no direct support from EF for this you could take one of following alternatives to achieve it. Approach 1 :  ...
3 comments
Read more

Building Highly Scalable Web Applications with Windows Azure

Among many other benefits of moving or building your web applications in cloud, for me I think the most important benefit we get is scalability. When it comes to web applications there are two approaches for scalability. Scale out - This means we increase the number of running instances of the application with a load balancer which distributes the requests among those instances Scale up - This means we increase the physical resources on a single application instance, for example we can increase the RAM of the hosted machine In reality preferred way of web application scalability should be to scale out. Because there are obvious hardware limitations in scale up approach. Bearing that in mind if we look at what Windows Azure provides out of the box, for a certain level it supports scale up approach and it has a great amount of support for scale out approach. Scaling your application out Windows Azure supports both automatic and manual scale out of the ap...
4 comments
Read more

HTML INPUT enhancement with Regular Expressions and Java Scripts

අද කථා කරන්න යන්නේ බොහොම සරල දෙයක් ගැන. සරල උනාට ඉතින් මට මේක කරගන්න ඕන වෙලා හොයන කොට නම් ඉතින් හොයාගන්න ටිකක් කරදර උනා, ඒ නිසාම තමා මම හිතුවේ මේක ගැන ලියන්න ඕනෙ කියල. අපි හැමෝම HTML forms validate කරන්න Java Script පාවිච්චි කරනවා නේ, එක අලුත් දෙයක් නෙමේ. ඒ වගේම තමා Regular Expressions කියන්නෙත් අපිට අලුත් දෙයක් නෙමේ. අපි බලමු මේ දෙකම පාවිච්චි කරලා HTML textbox එකකට අපිට ඕනෙ characters විතරක් enter කරන්න දෙන්නේ කොහොමද කියල. මෙන්න මේක තමා අපි පාවිච්චි කරන HTML page එක. <!DOCTYPE html> <html> <head> <title>JS and RegEx</title> </head> <body> <label for="txtUsername">Username</lable> <input type="text" id="txtUsername" placeholder="Enter Username"/> </body> </html> මේ තියෙන page එක html විදිහට save කරලා browser එකේ බැලුවම මෙන්න මේ වගේ තමා පෙන්නේ. දැන් හිතන්න අපිට මේ username එකට @,#,%,$ වගේ...
Post a Comment
Read more