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

TomGeo — Sun, 12 Dec 2021 09:22:27 GMT

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:

<Grid Margin="20,0">
        <StackPanel>
            <TextBlock Style="{DynamicResource Esri_TextBlockBackStageTitle}" Text="{Binding TabHeading}" />
            <!-- design content for the tab here -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="navItemStepper" Grid.Column="0"  Content="Stepper" 
                        MinHeight="52" FontSize="24" VerticalAlignment="Top"
                        Style="{DynamicResource Esri_ButtonBorderless}" Click="NavItemStepper_Click" />
                <Line Style="{StaticResource verticalLineBackstage}" />
                <Frame x:Name="faks_main" Grid.Column="2"  NavigationUIVisibility="Hidden" Margin="15,15,0,0"/>
            </Grid>
        </StackPanel>
    </Grid>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic How to achive UI as shown in backstage area e.g. Open in ArcGIS Pro SDK Questions

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