How to achive UI as shown in backstage area e.g. Open

TomGeo

I couldn't find a guide on how to style the backstage area in ArcGIS Pro and the BackStage_PropertyPage project in the community samples contains only a header and a checkbox.

What components are used in the xaml to build and style the following UI?

My current attempt is:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Grid</SPAN> <SPAN class="attr-name token">Margin</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>20,0<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>StackPanel</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>TextBlock</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">Style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">{</SPAN>DynamicResource Esri_TextBlockBackStageTitle<SPAN class="punctuation token">}</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Text</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{Binding TabHeading}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
            <SPAN class="comment token"><!-- design content for the tab here --></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Grid</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
                <Grid.ColumnDefinitions>
                    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ColumnDefinition</SPAN> <SPAN class="attr-name token">Width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Auto<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">/></SPAN></SPAN>
                    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ColumnDefinition</SPAN> <SPAN class="attr-name token">Width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Auto<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">/></SPAN></SPAN>
                    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ColumnDefinition</SPAN> <SPAN class="attr-name token">Width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>*<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">/></SPAN></SPAN>
                </Grid.ColumnDefinitions>
                <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Button</SPAN> <SPAN class="attr-name token"><SPAN class="namespace token">x:</SPAN>Name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>navItemStepper<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Grid.Column</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN>  <SPAN class="attr-name token">Content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Stepper<SPAN class="punctuation token">"</SPAN></SPAN> 
                        <SPAN class="attr-name token">MinHeight</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>52<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">FontSize</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>24<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">VerticalAlignment</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Top<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token">
                        <SPAN class="attr-name token">Style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">{</SPAN>DynamicResource Esri_ButtonBorderless<SPAN class="punctuation token">}</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Click</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>NavItemStepper_Click<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
                <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Line</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">Style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">{</SPAN>StaticResource verticalLineBackstage<SPAN class="punctuation token">}</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
                <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Frame</SPAN> <SPAN class="attr-name token"><SPAN class="namespace token">x:</SPAN>Name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>faks_main<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Grid.Column</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>2<SPAN class="punctuation token">"</SPAN></SPAN>  <SPAN class="attr-name token">NavigationUIVisibility</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Hidden<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Margin</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>15,15,0,0<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">/></SPAN></SPAN>
            <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Grid</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>StackPanel</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Grid</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>