Introduction

In this article, you will learn about Controls and Layout in WPF.
Overview
  • To design the tile for "VehicalPurchaseManagement system" dashboard by using builtin controls and layout
  • Learn to customize built-in controls and Layout
Prerequisites
  • Visual Studio 2010 or above
  • Before starting with this article, please download the code from my previous article.

Demo Steps

Step 1
Open the VehicalPurchaseManagement.sln and go to the VehicalPurchaseManagement.xaml file and add the below code.
In this demo application, Grid is considered as the root layout and other layouts can be added as child layouts.
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="20*" />
  4. <RowDefinition Height="90*" />
  5. <RowDefinition Height="8*" />
  6. <RowDefinition Height="150*" />
  7. <RowDefinition Height="5*" />
  8. <RowDefinition Height="150*" />
  9. <RowDefinition Height="5*" />
  10. <RowDefinition Height="150*" />
  11. <RowDefinition Height="20*" />
  12. </Grid.RowDefinitions>
  13. <Grid.ColumnDefinitions>
  14. <ColumnDefinition Width="20*" />
  15. <ColumnDefinition Width="150*" />
  16. <ColumnDefinition Width="5*" />
  17. <ColumnDefinition Width="150*" />
  18. <ColumnDefinition Width="30*"/>
  19. <ColumnDefinition Width="150*" />
  20. <ColumnDefinition Width="30*" />
  21. <ColumnDefinition Width="150*" />
  22. <ColumnDefinition Width="20*" />
  23. </Grid.ColumnDefinitions>
  24. </Grid>
Step 2
Create a folder to add the images required for this demo. To do this, right-click on project name ->Add ->New Folder as shown below and name it as Images.
Note
You can download the images from the attached project zip file.
Step 3
Add the button AddCart, as shown below:
  1. <Button Grid.Column="1" Grid.Row="5" Background="#FF3598DC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
  2. Content="Add Stock" Tag="Images\Addcart.png" />
This button is positioned at the 5th row and 1st column of the Grid.
Observe the other properties of a Button such as HorizontalAlignment, VerticalAlignment & Background. Try to change the values of these properties & understand the impact.
Properties such as Grid.Row and Grid.Column that doesn’t belong to the Button but has been used to position the control in Grid layout is called Attached properties.
Observe that, the Content property of the button is displaying only text on the button(Tile) but not the image. In this context, the Content property of the button class is used as an Attribute.
Observe the output below:
Step 4
You can add images and text on the button by declaring the Content property of the button as an element, as highlighted below:
  1. <Button Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="3" Background="#FF2A80B9" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  2. <Button.Content>
  3. <Grid>
  4. <Grid.RowDefinitions>
  5. <RowDefinition Height="28*"/>
  6. <RowDefinition Height="64*"/>
  7. <RowDefinition Height="50*"/>
  8. <RowDefinition Height="8*"/>
  9. </Grid.RowDefinitions>
  10. <Grid.ColumnDefinitions>
  11. <ColumnDefinition Width="15"/>
  12. <ColumnDefinition Width="28*"/>
  13. <ColumnDefinition Width="64*"/>
  14. <ColumnDefinition Width="43*"/>
  15. </Grid.ColumnDefinitions>
  16. <Image Source="Images\ViewCart.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  17. <TextBlock Text="View Orders" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  18. </Grid>
  19. </Button.Content>
  20. </Button>
Step 5
Run the Application and see the output screen:
Step 6
Similarly, add other required buttons, as shown below:
  1. <Button Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="3" Background="#FF2A80B9" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  2. <Button.Content>
  3. <Grid>
  4. <Grid.RowDefinitions>
  5. <RowDefinition Height="28*"/>
  6. <RowDefinition Height="64*"/>
  7. <RowDefinition Height="50*"/>
  8. <RowDefinition Height="8*"/>
  9. </Grid.RowDefinitions>
  10. <Grid.ColumnDefinitions>
  11. <ColumnDefinition Width="15"/>
  12. <ColumnDefinition Width="28*"/>
  13. <ColumnDefinition Width="64*"/>
  14. <ColumnDefinition Width="43*"/>
  15. </Grid.ColumnDefinitions>
  16. <Image Source="Images\Car2.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  17. <TextBlock Text="View Orders" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  18. </Grid>
  19. </Button.Content>
  20. </Button>
  21. <Button Grid.Column="1" Grid.Row="5" Background="#FF3598DC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  22. <Button.Content>
  23. <Grid>
  24. <Grid.RowDefinitions>
  25. <RowDefinition Height="28*"/>
  26. <RowDefinition Height="64*"/>
  27. <RowDefinition Height="50*"/>
  28. <RowDefinition Height="8*"/>
  29. </Grid.RowDefinitions>
  30. <Grid.ColumnDefinitions>
  31. <ColumnDefinition Width="15"/>
  32. <ColumnDefinition Width="28*"/>
  33. <ColumnDefinition Width="64*"/>
  34. <ColumnDefinition Width="43*"/>
  35. </Grid.ColumnDefinitions>
  36. <Image Source="Images\Addcart.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  37. <TextBlock Text="Add Cart" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  38. </Grid>
  39. </Button.Content>
  40. </Button>
  41. <Button Grid.Column="3" Grid.Row="5" Background="#FF36BCDC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  42. <Button.Content>
  43. <Grid>
  44. <Grid.RowDefinitions>
  45. <RowDefinition Height="28*"/>
  46. <RowDefinition Height="64*"/>
  47. <RowDefinition Height="50*"/>
  48. <RowDefinition Height="8*"/>
  49. </Grid.RowDefinitions>
  50. <Grid.ColumnDefinitions>
  51. <ColumnDefinition Width="15"/>
  52. <ColumnDefinition Width="28*"/>
  53. <ColumnDefinition Width="64*"/>
  54. <ColumnDefinition Width="43*"/>
  55. </Grid.ColumnDefinitions>
  56. <Image Source="Images\ViewCart.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  57. <TextBlock Text="View Cart" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  58. </Grid>
  59. </Button.Content>
  60. </Button>
  61. <Button Grid.Column="5" Grid.Row="3" Background="#FFE84C3D" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  62. <Button.Content>
  63. <Grid>
  64. <Grid.RowDefinitions>
  65. <RowDefinition Height="28*"/>
  66. <RowDefinition Height="64*"/>
  67. <RowDefinition Height="50*"/>
  68. <RowDefinition Height="8*"/>
  69. </Grid.RowDefinitions>
  70. <Grid.ColumnDefinitions>
  71. <ColumnDefinition Width="15"/>
  72. <ColumnDefinition Width="28*"/>
  73. <ColumnDefinition Width="64*"/>
  74. <ColumnDefinition Width="43*"/>
  75. </Grid.ColumnDefinitions>
  76. <Image Source="Images\EditCustomer.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  77. <TextBlock Text="Edit Customer" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  78. </Grid>
  79. </Button.Content>
  80. </Button>
  81. <Button Grid.Column="5" Grid.Row="5" Background="#FFE87B3E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  82. <Button.Content>
  83. <Grid>
  84. <Grid.RowDefinitions>
  85. <RowDefinition Height="28*"/>
  86. <RowDefinition Height="64*"/>
  87. <RowDefinition Height="50*"/>
  88. <RowDefinition Height="8*"/>
  89. </Grid.RowDefinitions>
  90. <Grid.ColumnDefinitions>
  91. <ColumnDefinition Width="15"/>
  92. <ColumnDefinition Width="28*"/>
  93. <ColumnDefinition Width="64*"/>
  94. <ColumnDefinition Width="43*"/>
  95. </Grid.ColumnDefinitions>
  96. <Image Source="Images\EditSupplier.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  97. <TextBlock Text="Edit Supplier" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  98. </Grid>
  99. </Button.Content>
  100. </Button>
  101. <Button Grid.Column="5" Grid.Row="7" Background="#FFE8A33E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  102. <Button.Content>
  103. <Grid>
  104. <Grid.RowDefinitions>
  105. <RowDefinition Height="28*"/>
  106. <RowDefinition Height="64*"/>
  107. <RowDefinition Height="50*"/>
  108. <RowDefinition Height="8*"/>
  109. </Grid.RowDefinitions>
  110. <Grid.ColumnDefinitions>
  111. <ColumnDefinition Width="15"/>
  112. <ColumnDefinition Width="28*"/>
  113. <ColumnDefinition Width="64*"/>
  114. <ColumnDefinition Width="43*"/>
  115. </Grid.ColumnDefinitions>
  116. <Image Source="Images\EditSupplier.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  117. <TextBlock Text="Edit Supplier" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  118. </Grid>
  119. </Button.Content>
  120. </Button>
  121. <Button Grid.Column="7" Grid.Row="3" Background="#FF27AE61" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  122. <Button.Content>
  123. <Grid>
  124. <Grid.RowDefinitions>
  125. <RowDefinition Height="28*"/>
  126. <RowDefinition Height="64*"/>
  127. <RowDefinition Height="50*"/>
  128. <RowDefinition Height="8*"/>
  129. </Grid.RowDefinitions>
  130. <Grid.ColumnDefinitions>
  131. <ColumnDefinition Width="15"/>
  132. <ColumnDefinition Width="28*"/>
  133. <ColumnDefinition Width="64*"/>
  134. <ColumnDefinition Width="43*"/>
  135. </Grid.ColumnDefinitions>
  136. <Image Source="Images\ViewSupplier.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  137. <TextBlock Text="View Supplier" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  138. </Grid>
  139. </Button.Content>
  140. </Button>
  141. <Button Grid.Column="7" Grid.Row="5" Background="#FF27AF3E" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  142. <Button.Content>
  143. <Grid>
  144. <Grid.RowDefinitions>
  145. <RowDefinition Height="28*"/>
  146. <RowDefinition Height="64*"/>
  147. <RowDefinition Height="50*"/>
  148. <RowDefinition Height="8*"/>
  149. </Grid.RowDefinitions>
  150. <Grid.ColumnDefinitions>
  151. <ColumnDefinition Width="15"/>
  152. <ColumnDefinition Width="28*"/>
  153. <ColumnDefinition Width="64*"/>
  154. <ColumnDefinition Width="43*"/>
  155. </Grid.ColumnDefinitions>
  156. <Image Source="Images\AddCustomer.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  157. <TextBlock Text="Add Customer" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  158. </Grid>
  159. </Button.Content>
  160. </Button>
  161. <Button Grid.Column="7" Grid.Row="7" Background="#FF75AF27" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  162. <Button.Content>
  163. <Grid>
  164. <Grid.RowDefinitions>
  165. <RowDefinition Height="28*"/>
  166. <RowDefinition Height="64*"/>
  167. <RowDefinition Height="50*"/>
  168. <RowDefinition Height="8*"/>
  169. </Grid.RowDefinitions>
  170. <Grid.ColumnDefinitions>
  171. <ColumnDefinition Width="15"/>
  172. <ColumnDefinition Width="28*"/>
  173. <ColumnDefinition Width="64*"/>
  174. <ColumnDefinition Width="43*"/>
  175. </Grid.ColumnDefinitions>
  176. <Image Source="Images\AddCustomer.png" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" />
  177. <TextBlock Text="Add Customer" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
  178. </Grid>
  179. </Button.Content>
  180. </Button>
Step 7
Run the application and observe the screen:
Step 8
Also, maximize the window and observe that all buttons are resized as per the window.
Observation
The same properties with the same value such as HorizontalAlignment="Stretch", VerticalAlignment="Stretch" are repetitive.
  • A similar code is repeated for all the tiles with a change in image source and text inside <Button.Content>
  • The text size on the tile is not resized as per the window size
To reduce the repetition of the same code and to apply common appearance, you can use Template and Styles. In the next article, you will learn to customize the button template & apply styles.

Summary

In this article, we discussed the built-in controls and layouts, and customization of built-in controls and layouts. Please find the attached code for better understanding and let me know if you have any questions/queries regarding the article. Cheers