UWP

Learn Universal Windows Programming Via Modern C++ (Grid Control)

In this article, we are going to learn about Grid control in Modern C++/WinRT.

Grid Control

Grid control is used to arrange the controls in multirow and multicolumn layouts (stackpanel is used to arrange controls in horizontal or vertical).

Let see how to implement Grid control and important properties.

RowDefinition & ColumnDefinition

These properties are used to create a row and column.

Creating Row
  1. RowDefinition App::CreateRow()  
  2. {  
  3.     auto grdLength1 = CreateGrdLength();  
  4.     RowDefinition row_definition;  
  5.     row_definition.Height(grdLength1);  
  6.     return row_definition;  
  7.   
  8. }  
Creating column 
  1. ColumnDefinition App::CreateColumn()  
  2. {  
  3.     auto grdLength1 = CreateGrdLength();  
  4.     ColumnDefinition col_definition;  
  5.     col_definition.Width(grdLength1);  
  6.     return col_definition;    
  7. }  

GridLength

This class is used to set the height and width of the row and column, to prepare the GridLength. First, we should specify the GridUnitType. GridUnitType contains the three properties -

GridUnitType

Auto- Auto sizing sets the space evenly, based on the size of the content that’s it placed in the column or row.

Star- GridLength values use the star sizing which divides the available space specified in the grid row or column.

Pixel- Based on the width or height, it's specified in the column or row it takes and assigns.

Value- this is used to measure the GridLength of the row or column.

  1. GridLength App::CreateGrdLength()  
  2. {  
  3.     GridLength grdLength;  
  4.     grdLength.Value = 45;  
  5.     grdLength.GridUnitType = GridUnitType::Auto;  
  6.     return grdLength;  
  7. }  

RowDefinitions and ColumnDefinitions

RowDefinitions and ColumnDefinitions display the GUI based on the row and column order.

Grid Append properties are used to add the row and column into the RowDefinistions and Columndefinitions. The first row & first column starts with "0".
  1. auto row1 = CreateRow();  
  2.     auto row2 = CreateRow();  
  3.     auto row3 = CreateRow();  
  4.   
  5.     auto Col1 = CreateColumn();  
  6.     auto Col2 = CreateColumn();  
  7.   
  8.     Grid grdView;  
  9.     grdView.RowDefinitions().Append(row1);  
  10.     grdView.RowDefinitions().Append(row2);  
  11.     grdView.RowDefinitions().Append(row3);  
  12.   
  13.     grdView.ColumnDefinitions().Append(Col1);  
  14.     grdView.ColumnDefinitions().Append(Col2);  

Children

All the itemcontrols have to be added into the children properties. Children is a UIElementCollection container. By default, all the controls are added into the zero-index order. Append property is used to add the controls into the container.

Ex - Adding the two stackpanels into the Grid control
  1. grdView.Children().Append(panel1);  
  2.     grdView.Children().Append(panel2);  

SetRow and SetColumn

SetRow - Set the value in which row control should be placed 
SetColumn - Set the value in which column control should be placed.

Both the functions take as FrameWorkElement ( UI control ) as agruments and second argument row or column index
  1. grdView.SetRow(panel1, 0);  
  2.     grdView.SetRow(panel2, 1);  
  3.     grdView.SetColumn(panel1, 0);  
  4.     grdView.SetColumn(panel2, 1);  
Let's see a simple example,

Create two stackpanels. Add the stackpanel into the Grid. The first stackpanel is placed in the first row and first column while the second stackpanel is placed in the second row second column.
  1. #include "pch.h"  
  2.   
  3. using namespace winrt;  
  4. using namespace Windows::ApplicationModel;  
  5. using namespace Windows::ApplicationModel::Activation;  
  6. using namespace Windows::Foundation;  
  7. using namespace Windows::UI;  
  8. using namespace Windows::UI::Xaml;  
  9. using namespace Windows::UI::Xaml::Controls;  
  10. using namespace Windows::UI::Xaml::Controls::Primitives;  
  11. using namespace Windows::UI::Xaml::Interop;  
  12. using namespace Windows::UI::Xaml::Navigation;  
  13. using namespace Windows::UI::Xaml::Media;  
  14. using namespace Windows::Media;  
  15. using namespace Windows::Storage;  
  16.   
  17. struct App :ApplicationT<App>  
  18. {  
  19. public:  
  20.     virtual ~App() = default;  
  21.     static TextBlock CreateTextBlock(hstring);  
  22.     static GridLength CreateGrdLength();  
  23.     static RowDefinition CreateRow();  
  24.     static ColumnDefinition CreateColumn();  
  25.     static StackPanel CreateStackPanel(hstring, Orientation);  
  26.     static void OnLaunched(LaunchActivatedEventArgs const&);  
  27.     static Thickness CreateThickness(int bottom, int left, int right, int top);  
  28. };  
  29.   
  30. Thickness App::CreateThickness(int bottom, int left, int right, int top)  
  31. {  
  32.     Thickness think;  
  33.     think.Bottom = bottom;  
  34.     think.Left = left;  
  35.     think.Right = right;  
  36.     think.Top = top;  
  37.     return think;  
  38. }  
  39.   
  40. TextBlock App::CreateTextBlock(hstring textCaption)  
  41. {  
  42.     TextBlock text;  
  43.     text.Text(textCaption);  
  44.     text.TextAlignment(TextAlignment::Center);  
  45.     text.Margin(CreateThickness(10, 10, 0, 10));  
  46.     return text;  
  47. }  
  48.   
  49. GridLength App::CreateGrdLength()  
  50. {  
  51.     GridLength grdLength;  
  52.     grdLength.Value = 45;  
  53.     grdLength.GridUnitType = GridUnitType::Auto;  
  54.     return grdLength;  
  55. }  
  56.   
  57. RowDefinition App::CreateRow()  
  58. {  
  59.     auto grdLength1 = CreateGrdLength();  
  60.     RowDefinition row_definition;  
  61.     row_definition.Height(grdLength1);  
  62.     return row_definition;  
  63.   
  64. }  
  65.   
  66. ColumnDefinition App::CreateColumn()  
  67. {  
  68.     auto grdLength1 = CreateGrdLength();  
  69.     ColumnDefinition col_definition;  
  70.     col_definition.Width(grdLength1);  
  71.     return col_definition;  
  72.   
  73. }  
  74.   
  75.   
  76. StackPanel App::CreateStackPanel(hstring panelName, Orientation oriPosition)  
  77. {  
  78.     StackPanel stPanel;  
  79.     stPanel.Children().Append(CreateTextBlock(panelName));  
  80.     stPanel.Children().Append(CreateTextBlock(L"Panel 1"));  
  81.     stPanel.Children().Append(CreateTextBlock(L"Panel 2"));  
  82.     stPanel.Children().Append(CreateTextBlock(L"Panel 3"));  
  83.     stPanel.Children().Append(CreateTextBlock(L"Panel 4"));  
  84.     stPanel.Children().InsertAt(4, CreateTextBlock(L"Panel 5"));  
  85.     stPanel.Children().InsertAt(5, CreateTextBlock(L"Panel 6"));  
  86.     stPanel.Orientation(oriPosition);  
  87.     if (oriPosition == Orientation::Horizontal)  
  88.         stPanel.Background(Media::SolidColorBrush(Colors::Red()));  
  89.     else  
  90.         stPanel.Background(SolidColorBrush(Colors::Blue()));  
  91.   
  92.     return stPanel;  
  93. }  
  94.   
  95. void App::OnLaunched(LaunchActivatedEventArgs const&)  
  96. {  
  97.   
  98.     auto panel1 = CreateStackPanel(L"StackPanel 1", Orientation::Horizontal);  
  99.     auto panel2 = CreateStackPanel(L"StackPanel 2", Orientation::Vertical);  
  100.   
  101.     auto row1 = CreateRow();  
  102.     auto row2 = CreateRow();  
  103.     auto row3 = CreateRow();  
  104.   
  105.     auto Col1 = CreateColumn();  
  106.     auto Col2 = CreateColumn();  
  107.   
  108.     Grid grdView;  
  109.     grdView.RowDefinitions().Append(row1);  
  110.     grdView.RowDefinitions().Append(row2);  
  111.     grdView.RowDefinitions().Append(row3);  
  112.   
  113.     grdView.ColumnDefinitions().Append(Col1);  
  114.     grdView.ColumnDefinitions().Append(Col2);  
  115.   
  116.     grdView.Children().Append(panel1);  
  117.     grdView.Children().Append(panel2);  
  118.   
  119.     grdView.SetRow(panel1, 0);  
  120.     grdView.SetColumn(panel1, 0);  
  121.   
  122.     grdView.SetRow(panel2, 1);  
  123.     grdView.SetColumn(panel2, 1);  
  124.   
  125.     Window window = Window::Current();  
  126.     window.Content(grdView);  
  127.   
  128.     window.Activate();  
  129. }  
  130.   
  131. int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)  
  132. {  
  133.     Application::Start([](auto &&) {make<App>(); });  
  134.     return 0;  
  135. }  
output
 
 

All the C++/WinRT samples' code is give here.

Conclusion

I hope you understood how to use the Grid controls.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs