Learn Universal Windows Programming Via Modern C++ (Stackpanel)

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

• Learn Universal Windows Programming Via Modern C++
• Learn Universal Windows Programming Via Modern C++ (Button Control)

Stackpanel

Stackpanel is merely holding one or more controls into a panel. The inside panel controls are called child controls. Child controls can be arranged into horizontal (left to right) or vertical (top to bottom) stacks. We can add all the itemcontrols into the Stackpanel, like textbox, button, and combobox.

Why is Stackpanel holding more controls? One of the reasons are window objects, as you can see in the Button control sample coding the window object is holding only one control at a time. Yet if we add another control the first control gets overwritten.

Sample of two controls into the window object: 

void App::OnLaunched(LaunchActivatedEventArgsconst &)
{
    Button BtnClick;
    IInspectable captionText = PropertyValue::CreateString(L "Click Me");
    BtnClick.Content(captionText);
    //To change background and Foreground of the color
    BtnClick.Background(SolidColorBrush(Colors::Red()));
    BtnClick.Foreground(SolidColorBrush((Colors::Yellow())));
    BtnClick.Click( & App::BtnClick);
    Button BtnClickOK;
    IInspectable captionOK = PropertyValue::CreateString(L "OK");
    BtnClickOK.Content(captionOK);
    Window window = Window::Current();
    window.Content(BtnClick);
    window.Content(BtnClickOK);
    window.Activate();
}

Button control has overwritten output

 

 

To avoid this, stackpanel will be very helpful. Add all the controls into the stackpanel, lastly add the stackpanel control into the window object so that all the controls are visible. Let see the stackpanel properties with an example.

Properties

Children

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

Example

stPanel.Children().Append(CreateTextBlock(L"Panel 1"));
stPanel.Children().Append(CreateTextBlock(L"Panel 2"));

Insert properties is used to place the control into the index position. (breaking the zero-index concept)

 

Example

stPanel.Children().InsertAt(4,CreateTextBlock(L"Panel 5"));
stPanel.Children().InsertAt(5,CreateTextBlock(L"Panel 6"));

 

Orientation

Orientation is used to arrange the child controls vertically or horizontally, by default the stackpanel orientation is vertical. 

Vertical (top to bottom)

 

Horizontal (left to right)

 

Nested Stackpanel

Stackpanel is added inside another stackpanel...

 

Let's see one sample application on how to use Orientation property and nested stackpanels.

#include "pch.h"
using namespace winrt;
using namespace Windows::ApplicationModel;
using namespace Windows::ApplicationModel::Activation;
using namespace Windows::Foundation;
using namespace Windows::UI;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Interop;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
using namespace Windows::UI::Popups;
using namespace Windows::Media::Ocr;
using namespace Windows::Storage;
struct App: ApplicationT < App > {
    public: virtual~App() =
        default;
    static TextBlock CreateTextBlock(hstring);
    static StackPanel CreateStackPanel(hstring, Orientation);
    static void OnLaunched(LaunchActivatedEventArgs
        const & );
    static Thickness CreateThickness(int bottom, int left, int right, int top);
};
Thickness App::CreateThickness(int bottom, int left, int right, int top) {
    Thickness think;
    think.Bottom = bottom;
    think.Left = left;
    think.Right = right;
    think.Top = top;
    return think;
}
TextBlock App::CreateTextBlock(hstring textCaption) {
    TextBlock text;
    text.Text(textCaption);
    text.TextAlignment(TextAlignment::Center);
    text.Margin(CreateThickness(10, 10, 0, 10));
    return text;
}
StackPanel App::CreateStackPanel(hstring panelName, Orientation oriPosition) {
    StackPanel stPanel;
    stPanel.Children().Append(CreateTextBlock(panelName));
    stPanel.Children().Append(CreateTextBlock(L "Panel 1"));
    stPanel.Children().Append(CreateTextBlock(L "Panel 2"));
    stPanel.Children().Append(CreateTextBlock(L "Panel 3"));
    stPanel.Children().Append(CreateTextBlock(L "Panel 4"));
    stPanel.Children().InsertAt(4, CreateTextBlock(L "Panel 5"));
    stPanel.Children().InsertAt(5, CreateTextBlock(L "Panel 6"));
    stPanel.Orientation(oriPosition);
    if (oriPosition == Orientation::Horizontal) stPanel.Background(SolidColorBrush(Colors::Red()));
    else stPanel.Background(SolidColorBrush(Colors::Blue()));
    return stPanel;
}
void App::OnLaunched(LaunchActivatedEventArgs
    const & ) {
    auto panel1 = CreateStackPanel(L "StackPanel 1", Orientation::Horizontal);
    auto panel2 = CreateStackPanel(L "StackPanel 2", Orientation::Vertical);
    StackPanel panel;
    panel.Children().Append(panel1);
    panel.Children().Append(panel2);
    panel.BorderThickness(CreateThickness(5, 5, 5, 5));
    panel.Background(SolidColorBrush(Colors::Yellow()));
    Window window = Window::Current();
    window.Content(panel);
    window.Activate();
}
int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int) {
    Application::Start([](auto && ) {
        make < App > ();
    });
    return 0;
}

Output 

 

Conclusion

I hope you understood how to use the stackpanel controls.