Panels and Layout in USD

Panel Layouts are a type of hosted control in USD that defines the arrangement of panels, which is the layout of your USD application.

Selecting Unified Service Desk->Hosted Controls, you can see we have a Panel Layout hosted control defined:

Selecting the panel, you can see the XAML associated with the layout:

Within the XAML, you can see panel types such as USDTabPanel, USDDeckTabPanel, USDStackPanel, USDCollapsePanel, USDPopupPanel, and panels, including:

• MainPanel
• LeftPanelFill
• RightPanel
• ToolbarPanel
• CtiPanel
• AboutPanel
• SessionTabsPanel
• SessionExplorerPanel
• WorkflowPanel
• ChatPanel
• LeftPanel1
• LeftPanel2
• RibbonPanel
• RightPopupPanel
• StatusPanel

You can read more about Panels on the Microsoft website: https://msdn.microsoft.com/en-us/library/dn865006.aspx

The main window is itself a panel called MainWorkArea.

In the hosted control definition, the panel to open the hosted control is specified.

Check out the XAML of a typical panel layout:

<Grid 
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 mc:Ignorable="d" xmlns:local="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics"
 xmlns:USD="clr-namespace:Microsoft.Crm.UnifiedServiceDesk.Dynamics.PanelLayouts;assembly=Microsoft.Crm.UnifiedServiceDesk.Dynamics">
 <Grid Grid.Name="LayoutRoot">
 <Grid.Resources>
 <local:CRMImageConverter x:Key="CRMImageLoader" />
</Grid.Resources>
 <Grid.RowDefinitions>
 <RowDefinition Height="40" />
 <RowDefinition Height="*" />
 <RowDefinition Height="30" />
 </Grid.RowDefinitions>
 <Border Grid.Row="0" BorderBrush="#FFD8D8D8" BorderThickness="0,1,0,1">
 <Grid Background="{DynamicResource WindowHeaderStyle}" Grid.Row="0" Margin="0">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="auto" />
 <ColumnDefinition Width="auto" />
 <ColumnDefinition Width="*" />
 <ColumnDefinition Width="Auto" />
 </Grid.ColumnDefinitions>
 <Image Style="{DynamicResource USDLogo}" Grid.Column="0" ToolTip="Unified Service Desk" AutomationProperties.Name="Unified Service Desk" />
 <Rectangle FrameworkElement.Width="10" Grid.Column="1" />
 <USD:USDDeckTabPanel x:Name="ToolbarPanel" Grid.Column="2" AutomationProperties.Name="Toolbar Panel" VerticalAlignment="Center" Focusable="True" Margin="0" />
 <Grid Grid.Column="3" Background="{DynamicResource AboutPanelBackground}">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*" />
 <ColumnDefinition Width="412" />
 </Grid.ColumnDefinitions>
 <USD:USDStackPanel x:Name="CtiPanel" Grid.Column="0" Orientation="Horizontal" Focusable="True" VerticalAlignment="Center" AutomationProperties.Name="Cti Panel" />
 <USD:USDStackPanel x:Name="AboutPanel" Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal" Focusable="True" VerticalAlignment="Center" AutomationProperties.Name="AboutPanel" />
 </Grid>
 </Grid>
 </Border>
 <Grid Grid.Row="1" VerticalAlignment="Stretch" Margin="0" Background="{DynamicResource WindowBackgroundStyle}">
 <Grid.RowDefinitions>
 <RowDefinition Height="auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="auto" />
 </Grid.RowDefinitions>
 <USD:USDDeckTabPanel x:Name="SessionTabsPanel" Grid.Row="0" Margin="5,5,0,5" AutomationProperties.Name="Session Tabs Panel" Focusable="True" ClipToBounds="True" Background="Red" />
 <Grid Grid.Row="1" AutomationProperties.Name="Main Panels">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="auto" />
 <ColumnDefinition Width="*" />
 <ColumnDefinition Width="auto" />
 </Grid.ColumnDefinitions>
 <Expander x:Name="ExpanderSessionDetails" Grid.Column="0" Style="{DynamicResource StretchExpanderStyle}" ExpandDirection="Left" IsExpanded="False" BorderBrush="#FFFFFFFF">
 <ScrollViewer VerticalScrollBarVisibility="Auto">
 <Grid Style="{DynamicResource LeftPanelGrid}" Margin="5">
 <Grid.RowDefinitions>
 <RowDefinition Height="auto" />
 <RowDefinition Height="auto" />
 <RowDefinition x:Name="ChatPanelRow" Height="auto" />
 <RowDefinition Height="auto" />
 <RowDefinition Height="auto" />
 <RowDefinition Height="auto" />
 </Grid.RowDefinitions>
 <USD:USDCollapsePanel x:Name="SessionExplorerPanel" AutomationProperties.Name="Session Explorer Panel" Grid.Row="0" Margin="1" />
 <USD:USDCollapsePanel x:Name="WorkflowPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="1" Margin="1" Background="Aqua" />
 <USD:USDCollapsePanel x:Name="ChatPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="2" Margin="1" />
 <USD:USDCollapsePanel x:Name="LeftPanel1" AutomationProperties.Name="Left Panel 1" Grid.Row="3" Margin="1" />
 <USD:USDCollapsePanel x:Name="LeftPanel2" AutomationProperties.Name="Left Panel 2" Grid.Row="4" Margin="1" />
 <USD:USDTabPanel x:Name="LeftPanelFill" AutomationProperties.Name="Left Panel Fill" Grid.Row="5" Margin="1" MinHeight="300" />
 </Grid>
 </ScrollViewer>
 </Expander>
 <Grid Grid.Column="1" Background="Transparent">
 <Grid.RowDefinitions>
 <RowDefinition Height="0" />
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <USD:USDCollapsePanel x:Name="RibbonPanel" Grid.Row="0" Visibility="Collapsed" AutomationProperties.Name="Ribbon Panel" Focusable="True" Margin="1" ClipToBounds="False" SnapsToDevicePixels="True" />
 <USD:USDTabPanel x:Name="MainPanel" Grid.Row="1" AutomationProperties.Name="Main Panel" Grid.RowSpan="2" />
 </Grid>
<GridSplitter HorizontalAlignment="Right" 
 VerticalAlignment="Stretch" 
 Grid.Column="1" ResizeBehavior="PreviousAndNext"
 Width="5" Background="#FFBCBCBC"/>
 <Expander x:Name="RightPanelExpander" Grid.Column="2" Style="{DynamicResource StretchExpanderStyle}" ExpandDirection="Right" IsExpanded="False" BorderBrush="#FFFFFFFF">
 <ScrollViewer VerticalScrollBarVisibility="Auto">
 <Grid Style="{DynamicResource LeftPanelGrid}">
 <Grid.RowDefinitions>
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <USD:USDTabPanel x:Name="RightPanel" AutomationProperties.Name="Right Panel" Grid.Row="0" />
 <USD:USDPopupPanel x:Name="RightPopupPanel" Popup.Placement="Left" Popup.PopupAnimation="Scroll" Height="{Binding ActualHeight,ElementName=RightPanel,Mode=OneWay}" Width="{Binding ActualWidth,ElementName=RightPanel,Mode=OneWay}" Popup.PlacementTarget="{Binding ElementName=RightPanel}" >
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="20" />
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <Border Background="#FFCCCCCC" Grid.Row="0">
 <TextBlock Text="Article Preview" HorizontalAlignment="Center" Margin="10,0,0,0" />
 </Border>
 <Border BorderThickness="1" Grid.Row="1" BorderBrush="#FFCCCCCC" Background="#FFFFFFFF">
 <ContentControl x:Name="PopupContainer" Margin="0,0,0,0" />
 </Border>
 </Grid>
 </USD:USDPopupPanel>
 </Grid>
 </ScrollViewer>
 </Expander>
 </Grid>
 </Grid>
 <StatusBar Grid.Row="2" Style="{DynamicResource StatusBarStyle}">
 <StatusBarItem>
 <USD:USDStackPanel x:Name="StatusPanel" Height="30" Orientation="Horizontal" AutomationProperties.Name="Status Panel" />
 </StatusBarItem>
 </StatusBar>
 </Grid>
</Grid>

Note the different panel types:

• Standard Main Panel. This does not define the display group.
• Ribbon Main Panel. This does not define the display group.
• Vertical Split. Includes Display Group:

  

• Horizontal Split. Includes Display Group:

  

• XAML. Includes Display Group and XAML.

  

• User Defined. Includes Display Group:

  

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter | YouTube