Before reading this article, I highly recommend reading the previous parts of the series.

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

SplitView

SplitView is used to create a top-level navigation. This control is divided into the following two main areas.

  • Pane area.
  • Content area.

Pane area - Pane area is representing the menu that users want to interact with.

Content area - the Content Area is used to display different pages or different controls based on the pane menu selected by the user.

sample code
  1. SplitView sView;
  3. auto txtPane = CreateTextBlock(L"Pane area");
  4. txtPane.HorizontalAlignment(HorizontalAlignment::Center);
  5. txtPane.VerticalAlignment(VerticalAlignment::Center);
  6. txtPane.Margin(CreateThickness(20, 0, 0, 0));
  7. txtPane.FontSize(25);
  9. txtStatus = CreateTextBlock(L"Modern C++ (SplitView) Content area");
  10. txtStatus.HorizontalAlignment(HorizontalAlignment::Center);
  11. txtStatus.VerticalAlignment(VerticalAlignment::Center);
  12. txtStatus.TextWrapping(TextWrapping::WrapWholeWords);
  13. txtStatus.FontSize(75);
  14. txtStatus.Foreground(SolidColorBrush(Colors::Red()));
  16. sView.Pane(txtPane );
  18. sView.Content(txtStatus);

Pane

The Pane area is generally used to display the menu items for Navigation to load various items into the content area.

The following are some of the important properties.

  • CompactPaneLength: Normal display width of the pane area.
  • OpenPaneLength: User interacts in the pane, changes the display of the width.
  • IsPaneOpen: Find pane in CompactPaneLength or OpenPaneLength mode.
sample code
  1. SplitView sView;
  2. sView.IsPaneOpen(true);
  3. sView.OpenPaneLength(200);
  4. sView.CompactPaneLength(50);

Display modes of SplitView control.

  • Overlay.
  • CompactOverlay.
  • Inline.
  • Compact inline.

CompactOverlay mode

Overlay into the view area is good to use for Mobile version or small size window. For example, PC (Calculator app).



CompactInline mode is divided into a SplitView area and it's good to use for a PC version.

Inline and Overlay are used to hide the pane area. "Hide the pane area" properties are usually used in the mobile version or small size window. For example, in a Calculator app, the Pane area is hidden. When you click the Hamburger button (“?“), the CompactOverlay mode pane will open in the app.

This is the sample code to set display mode.
  1. SplitView sView;
  2. sView.DisplayMode(SplitViewDisplayMode::CompactInline);
Hamburger menu button in SplitView Control

For a Hamburger menu button in the UAP, we can see this control in Groove music or calculator (in the preceding image, Pane area is a Hamburger menu button). This control is more popular in the SplitView Control. Let us see how to create Hamburger button.
  1. Open the "Character map" font (search in Windows OS).
  2. Select the font type "Segoe MDL2 Assets".
  3. Choose the Hamburger font ( Highlighted in the below image).



  4. Copy the Unicode character "E700" at the end of the image.
Goto Modern C++ .cpp project
Create a button and set the content L"\uE700" ( Assign the Unicode string as \u prefix should be used) and FontFamily should be set as
L"Segoe MDL2 Assets".
  1. Button BtnHamburger;
  2. IInspectable captionText = PropertyValue::CreateString(L"\uE700");
  3. BtnHamburger.Content(captionText);
  4. BtnHamburger.FontFamily(FontFamily(L"Segoe MDL2 Assets"));
SplitView Example
In this example, we are adding Hamburger button into SplitView control. The Hamburger event will handle the pane area open and closed.
and various types of "Segoe MDL2 Assets".
  1. #include "pch.h"
  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::Media;
  13. using namespace Windows::UI::Xaml::Navigation;
  14. using namespace Windows::UI::Popups;
  15. using namespace Windows::Storage;
  17. struct App :ApplicationT<App>
  18. {
  19. public:
  20. App()
  21. {
  23. }
  24. virtual ~App() = default;
  26. TextBlock txtStatus;
  27. SplitView sView;
  28. AppBarButton btnHome;
  31. TextBlock CreateTextBlock(hstring text)
  32. {
  33. TextBlock txtBlock;
  34. txtBlock.Text(text);
  35. txtBlock.FontSize(15);
  36. return txtBlock;
  37. }
  39. AppBarButton CreateAppBarButton(Symbol icon, hstring text, int Idx)
  40. {
  41. AppBarButton appBtn;
  42. appBtn.Label(text);
  43. appBtn.Click({ this,&App::OnBtnClick });
  44. appBtn.Tag(PropertyValue::CreateInt32(Idx));
  45. appBtn.VerticalAlignment(VerticalAlignment::Top);
  46. auto sIcon = CreateSymbolIcon(icon);
  47. appBtn.Icon(sIcon);
  48. return appBtn;
  50. }
  52. void OnBtnClick(IInspectable const &sender, RoutedEventArgs const args)
  53. {
  54. if (sView.IsPaneOpen())
  55. {
  56. sView.IsPaneOpen(false);
  57. btnHome.Icon(CreateSymbolIcon(Symbol::Pin));
  58. }
  59. else
  60. {
  61. sView.IsPaneOpen(true);
  62. btnHome.Icon(CreateSymbolIcon(Symbol::UnPin));
  63. }
  64. }
  66. SymbolIcon CreateSymbolIcon(Symbol icon)
  67. {
  68. SymbolIcon sIcon;
  69. sIcon.Symbol(icon);
  70. return sIcon;
  71. }
  73. Thickness CreateThickness(int left, int top, int right, int bottom)
  74. {
  75. Thickness thick;
  76. thick.Left = left;
  77. thick.Top = top;
  78. thick.Right = right;
  79. thick.Bottom = bottom;
  80. return thick;
  81. }
  83. StackPanel CreateStackPanel(hstring caption, hstring hamStytle,int Tag)
  84. {
  85. StackPanel sPanel;
  86. sPanel.Orientation(Orientation::Horizontal);
  87. //sPanel.Margin(CreateThickness(0, 0, 10, 0));
  89. auto HamButton = CreateBtnHamburger(caption, hamStytle, Tag);
  90. sPanel.Children().Append(HamButton);
  92. Button txtBox;
  93. IInspectable captionText = PropertyValue::CreateString(caption);
  94. txtBox.Content(captionText);
  95. txtBox.Tag(PropertyValue::CreateInt32(Tag));
  96. txtBox.Click({ this,&App::OnBtnClick });
  97. txtBox.VerticalAlignment(VerticalAlignment::Center);
  98. txtBox.Margin(CreateThickness(0, 1, 0, 0));
  99. txtBox.Width(100);
  100. txtBox.Height(50);
  101. sPanel.Children().Append(txtBox);
  103. return sPanel;
  104. }
  106. Button CreateBtnHamburger(hstring caption,hstring hamburgerStytle,int tag)
  107. {
  108. Button BtnHamburger;
  109. IInspectable captionText = PropertyValue::CreateString(hamburgerStytle);
  110. BtnHamburger.Content(captionText);
  111. BtnHamburger.FontFamily(FontFamily(L"Segoe MDL2 Assets"));
  112. BtnHamburger.Click({ this,&App::OnBtnClick });
  113. BtnHamburger.Width(50);
  114. BtnHamburger.Height(50);
  115. BtnHamburger.Margin(CreateThickness(0, 1, 0, 0));
  116. BtnHamburger.Tag(PropertyValue::CreateInt32(tag));
  117. return BtnHamburger;
  118. }
  120. void OnLaunched(LaunchActivatedEventArgs const&)
  121. {
  123. auto txtHeader = CreateTextBlock(L"SplitView Sample");
  124. txtHeader.HorizontalAlignment(HorizontalAlignment::Center);
  125. txtHeader.VerticalAlignment(VerticalAlignment::Center);
  126. txtHeader.FontSize(75);
  128. auto txtPane = CreateTextBlock(L"Pane area");
  129. txtPane.HorizontalAlignment(HorizontalAlignment::Center);
  130. txtPane.VerticalAlignment(VerticalAlignment::Center);
  131. txtPane.Margin(CreateThickness(20, 0, 0, 0));
  132. txtPane.FontSize(25);
  134. txtStatus = CreateTextBlock(L"Modern C++ (SplitView) Content area");
  135. txtStatus.HorizontalAlignment(HorizontalAlignment::Center);
  136. txtStatus.VerticalAlignment(VerticalAlignment::Center);
  137. txtStatus.TextWrapping(TextWrapping::WrapWholeWords);
  138. txtStatus.FontSize(75);
  139. txtStatus.Foreground(SolidColorBrush(Colors::Red()));
  141. auto BtnHamburger = CreateStackPanel(L"Home", L"\uE700", 1);
  142. auto btnBrigthness = CreateStackPanel(L"Brightness", L"\uE706",2);
  143. auto btnWifi = CreateStackPanel(L"Wifi", L"\uE701", 3);
  144. auto btnbluetooth = CreateStackPanel(L"Bluetooth", L"\uE702", 4);
  145. auto btnHotSpot = CreateStackPanel(L"Hotspot", L"\uE704", 5);
  146. auto btnMap = CreateStackPanel(L"Map", L"\uE707", 6);
  149. StackPanel sPanel;
  150. sPanel.Children().Append(BtnHamburger);
  151. sPanel.Children().Append(txtPane);
  152. sPanel.Children().Append(btnBrigthness);
  153. sPanel.Children().Append(btnWifi);
  154. sPanel.Children().Append(btnbluetooth);
  155. sPanel.Children().Append(btnHotSpot);
  156. sPanel.Children().Append(btnMap);
  157. sPanel.Background(SolidColorBrush(Colors::SeaGreen()));
  160. sView.Pane(sPanel);
  161. sView.DisplayMode(SplitViewDisplayMode::CompactInline);
  162. sView.IsPaneOpen(true);
  163. sView.OpenPaneLength(200);
  164. sView.CompactPaneLength(50);
  166. sView.Content(txtStatus);
  168. Window window = Window::Current();
  169. window.Content(sView);
  170. window.Activate();
  173. }
  174. };
  178. int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)
  179. {
  180. Application::Start([](auto &&) {make<App>(); });
  181. return 0;
  182. }
Output


Conclusion

I hope you understood how to use SplitView control.