通过

Unified Service Desk 中的面板、面板类型和面板布局

 

发布日期： 2016年11月

适用于： Dynamics 365 (online),Dynamics 365 (on-premises),Dynamics CRM 2013,Dynamics CRM 2015,Dynamics CRM 2016

Unified Service Desk for Microsoft Dynamics 365 使用面板显示各种类型的托管控件。 各种预定义的面板类型在 Unified Service Desk 中都可用来支持各种布局选项，如选项卡布局、层面布局和堆叠布局。 使用“面板布局”托管控件，可定义这些面板在 Unified Service Desk 主屏幕上的排列方式。详细信息：面板布局（托管控件）

本节内容

Unified Service Desk 的面板

Unified Service Desk 的面板类型

Unified Service Desk 的面板布局

Unified Service Desk 的面板

每次创建托管控件时，必须对会将其保留在“新的托管控件”页的“显示组”字段中的面板进行指定。 对于大多数托管控件类型，Unified Service Desk 会自动将面板值填充在“显示组”字段中。 例如，“MainPanel”用于托管控件的“CRM 页面”类型，“ToolbarPanel”用于托管控件的“工具栏容器”类型。

以下预定义的面板都可以在 Unified Service Desk 中使用。

面板

说明

MainPanel

底部右侧的主要工作区域。

ChatPanel

聊天窗口的典型位置。 它在代理脚本控件的下方。

HiddenPanel

通常用于没有用户界面 (UI) 的组件中的不可见面板。

LeftPanel1

在“WorkflowPanel”下方位于左侧的一个面板。

LeftPanel2

在“LeftPanel1”下方位于左侧的一个面板。

LeftPanelFill

在“LeftPanel2”下方的一个面板。 此面板可扩展用来将其余可用区域填充至左侧面板的底部边缘。

RightPanel

右侧面板。

CtiPanel *

一个位于顶部右侧的面板，它是电话软件的默认位置。 因为它是一个堆叠面板，所以可以添加多个控件，并彼此紧挨着显示。

SessionExplorerPanel *

一个位于您通常显示会话行所在会话选项卡下方的面板。

WorkflowPanel *

一个位于“SessionExplorerPanel”下方的面板，通常包含代理脚本控件。

ToolbarPanel *

一个位于右侧 Unified Service Desk 徽标顶部的面板，通常存放工具栏。

RibbonPanel

仅供内部使用。

StatusPanel *

一个位于应用程序底部状态栏上的特定面板。

* 这些面板通常是因为特定用途而被保留的，所以只有在需要时才能使用这些面板。

使用 Unified Service Desk 2.2.1 或以后版本，还可以将键盘快捷方式分派到面板，以便客户服务代表可以只使用键盘直接访问客户端应用程序的面板。详细信息：面板的键盘快捷方式

Unified Service Desk 的面板类型

Unified Service Desk 提供以下预定义的面板类型以支持各种布局选项：

面板类型

说明

USDTabPanel

此面板类型包含一个选项卡控件。 每个托管控件都被加载于其中的一个选项卡上。 选项卡名称显示在托管控件“显示名称”字段中所指定的值。 如果没有对托管控件显示指定的名称，则该托管控件所显示的名称与选项卡名称相同。 如果一个或多个托管控件位于此面板上，则会对此面板类型显示选项卡控件/标题。

USDStackPanel

此面板类型将托管控件按照水平或垂直的方式进行堆叠，这类似于 Windows Presentation Foundation (WPF) 中的堆叠面板。 这些可能对工具栏或状态栏等很有用。 这种面板类型来自 StackPanel，支持方向属性。 应在 XAML 中定义方向，从而定义堆叠控件的堆叠方式。

USDDeckTabPanel

如果单个托管控件在此面板上，就不会显示选项卡。 如果两个或更多控件位于此面板上，就会对选项卡控件显示选项卡。

> [!NOTE] >

此控件与“USDTabPanel”的相同，但是当仅加载一个控件时，在能够隐藏顶部选项卡的默认主题中会出现一种样式。

USDCollapsePanel

这与“USDTabPanel”的相同，但默认主题中会定义一种样式，可以自动折叠此面板类型，以便不在其中加载托管控件时，将不再占用 UI 中的空间。

USDFloatingPanel

默认桌面提供了一个此面板类型的实例。 当对托管控件指定了“FloatingPanel”，就会使用此面板类型。 通常您不会在自定义布局中指定此面板类型，但是，如果在有理由使用它时，也可以用到它。

USDFloatingToolPanel

此面板类型会为每个向其加载的托管控件创建一个工具窗口。 默认桌面提供了一个此面板类型的实例。 当对托管控件指定了“FloatingToolPanel”，就会使用此面板类型。 通常您不会在自定义布局中指定此面板类型，但是，如果在有理由使用它时，也可以用到它。

USDPopUpPanel

此类型面板使托管控件中的内容悬浮在主视图上。

还可以使用这些预定义的面板类型在 Unified Service Desk 中创建一个自定义面板类型。详细信息：创建自定义面板类型

Unified Service Desk 的面板布局

使用面板布局定义 Unified Service Desk 客户端中面板在屏幕上的排列。 面板布局使用“面板布局”托管控件定义。详细信息：面板布局（托管控件）

以下布局描述 Unified Service Desk 中的“标准主面板”类型的面板布局（也称为标准面板布局）。

Unified Service Desk 中的 Air 主题

备注

如果不在 Unified Service Desk 配置中创建任何面板布局，将自动使用标准面板布局显示客户端应用程序中的面板和控件。

主窗口中的完整应用程序区域定义为面板本身，称为 MainWorkArea。定义 XAML 或 User-Defined 类型的面板布局时，MainWorkArea 用作“显示组”字段的面板值。

由于面板布局是托管控件，所以您可以在任何配置托管控件的地方使用某个面板布局。 它的一个常见的用法是在主面板区域中定义一个拆分视图。 您可以将显示帐户列表的列表视图显示在顶部，将详细信息视图显示在底部。 您可以在浮动面板中显示整个面板布局，并将其显示在第二监视器上。 有关悬浮面板用途的详细信息，请参阅 配置知识库文章的弹入和弹出功能。

Unified Service Desk 提供以下面板布局类型：

面板布局

说明

标准主面板

标准面板布局提供传统布局，包括左侧一系列的面板、可折叠区域以及右侧一个主工作区域。 下面是用于定义面板布局布局的 XAML。 您还可以在 User Interface Integration (UII) SDK 中找到此 XAML。下载包并提取，以在 "UII\USD Developer Assets\USD Layout and Style Sheet" 目录下查看 SamplePanelLayout.xaml 文件。

        <USD:PanelLayoutBase xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:d="https://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"
  d:DesignHeight="300"
  d:DesignWidth="300">
  <Grid x: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="#d8d8d8"
            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 Width="10"
                   Grid.Column="1" />
        <USD:USDDeckTabPanel x:Name="ToolbarPanel"
                             Grid.Column="2"
                             AutomationProperties.Name="Toolbar Panel"
                             VerticalAlignment="Center"
                             Focusable="True"
                             Margin="0"
                             USD:PanelNavigation.KeyboardShortcut="CTRL+1"/>
        <Grid Grid.Column="3"
              Background="{DynamicResource AboutPanelStandardBackground}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="412"/>
          </Grid.ColumnDefinitions>
          <USD:USDStackPanel Grid.Column="0"
                             x:Name="CtiPanel"
                             Orientation="Horizontal"
                             Focusable="True"
                             VerticalAlignment="Center"
                             AutomationProperties.Name="Cti Panel"/>
          <USD:USDStackPanel Grid.Column="1"
                             HorizontalAlignment="Right"
                             x:Name="AboutPanel"
                             Orientation="Horizontal"
                             Focusable="True"
                             VerticalAlignment="Center"
                             AutomationProperties.Name="AboutPanel"
                             USD:PanelNavigation.KeyboardShortcut="CTRL+2"/>
        </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"
                           USD:PanelNavigation.KeyboardShortcut="CTRL+3"/>
      <Grid x:Name="MainGrid"
            Grid.Row="1"
            AutomationProperties.Name="Main Panels">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="auto" />
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Expander Grid.Column="0"
                  Style="{DynamicResource StretchExpanderStyle}"
                  ExpandDirection="Left"
                  x:Name="ExpanderSessionDetails"
                  IsExpanded="false"
                  BorderBrush="White" >
          <ScrollViewer VerticalScrollBarVisibility="Auto" >
            <Grid Style="{DynamicResource LeftPanelGrid}"
                  Margin="5">
              <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto"
                               Name="ChatPanelRow" />
                <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:PanelNavigation.KeyboardShortcut="CTRL+4"/>
              <USD:USDCollapsePanel x:Name="WorkflowPanel"
                                    AutomationProperties.Name="Workflow Panel"
                                    Grid.Row="1"
                                    Margin="1"
                                    USD:PanelNavigation.KeyboardShortcut="CTRL+5"/>
              <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"
                               USD:PanelNavigation.KeyboardShortcut="CTRL+6"/>
            </Grid>
          </ScrollViewer>

    &lt;/Expander&gt;
    &lt;Grid Grid.Column="1"
          Background="Transparent"&gt;
      &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="0" /&gt;
        &lt;RowDefinition Height="79*" /&gt;
        &lt;RowDefinition Height="125*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;USD:USDCollapsePanel x:Name="RibbonPanel"
                            Grid.Row="0"
                            Visibility="Collapsed"
                            AutomationProperties.Name="Ribbon Panel"
                            Focusable="True"
                            Margin="1"
                            ClipToBounds="False"
                            SnapsToDevicePixels="True"/&gt;
      &lt;USD:USDTabPanel x:Name="MainPanel"
                       Grid.Row="1"
                       AutomationProperties.Name="Main Panel"
                       Grid.RowSpan="2"
                       USD:PanelNavigation.KeyboardShortcut="CTRL+7"/&gt;
    &lt;/Grid&gt;
    &lt;Expander Grid.Column="2"
              Style="{DynamicResource StretchExpanderStyle}"
              ExpandDirection="Right"
              x:Name="RightPanelExpander"
              IsExpanded="false"
              BorderBrush="White" &gt;
      &lt;ScrollViewer VerticalScrollBarVisibility="Auto" &gt;
        &lt;Grid Style="{DynamicResource LeftPanelGrid}" &gt;
          &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height="*" /&gt;
          &lt;/Grid.RowDefinitions &gt;
          &lt;USD:USDTabPanel x:Name="RightPanel"
                           AutomationProperties.Name="Right Panel"
                           Grid.Row="0"
                           USD:PanelNavigation.KeyboardShortcut="CTRL+8"/&gt;
          &lt;USD:USDPopupPanel x:Name="RightPopupPanel"
                             Height="{Binding ActualHeight, ElementName=RightPanel, Mode=OneWay}"
                             Width="{Binding ActualWidth, ElementName=RightPanel, Mode=OneWay}"
                             Placement="Left"
                             PlacementTarget="{Binding ElementName=RightPanel}"
                             PopupAnimation="Scroll"
                             USD:PanelNavigation.KeyboardShortcut="CTRL+9"&gt;
            &lt;Grid&gt;
              &lt;Grid.RowDefinitions&gt;
                &lt;RowDefinition Height="20" /&gt;
                &lt;RowDefinition Height="*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Border Background="#cccccc"
                      Grid.Row="0" &gt;
                &lt;TextBlock Text="Article Preview"
                           HorizontalAlignment="Center"
                           Margin="10,0,0,0" /&gt;
              &lt;/Border&gt;
              &lt;Border BorderThickness="1"
                      Grid.Row="1"
                      BorderBrush="#cccccc"
                      Background="White"&gt;
                &lt;ContentControl  Margin="0,0,0,0"
                                 Name="PopupContainer"
                                 Style="{DynamicResource USDContentControlStyle}"/&gt;
              &lt;/Border&gt;
            &lt;/Grid&gt;
          &lt;/USD:USDPopupPanel&gt;
        &lt;/Grid&gt;
      &lt;/ScrollViewer&gt;
    &lt;/Expander&gt;
  &lt;/Grid&gt;
&lt;/Grid&gt;
&lt;StatusBar Grid.Row="2"
           Style="{DynamicResource StatusBarStyle}"&gt;
  &lt;StatusBarItem&gt;
    &lt;TextBlock x:Name="lblStatusBarClock"
               Text="00:00 AM/PM"
               Style="{DynamicResource StatusBarClockLabelStyle}"/&gt;
  &lt;/StatusBarItem&gt;
  &lt;Separator Style="{DynamicResource StatusBarSeparatorStyle}"/&gt;
  &lt;StatusBarItem &gt;
    &lt;USD:USDStackPanel x:Name="StatusPanel"
                       Orientation="Horizontal"
                       AutomationProperties.Name="Status Panel"
                       Margin="1"/&gt;
  &lt;/StatusBarItem&gt;
&lt;/StatusBar&gt;



</Grid>
</USD:PanelLayoutBase>

功能区主面板

仅供内部使用。

水平拆分

这是在 MainPanel 中常作为托管控件使用的特定布局。 它包含一个具有顶部面板和底部面板的拆分器。 和 Outlook 相似，它通常用于在顶部显示列表视图，在底部显示详细信息视图。 两面板在此布局中定义。

面板名称

说明

TopPanel

这是在顶部显示的面板。 它的定义如下：

USDDeckTabPanel

BottomPanel

这是在底部显示的面板。 它的定义如下：

USDDeckTabPanel

此面板支持以下操作：

操作​​

说明

SetTopPanelHeight

此操作可用于设置顶部面板高度。 它支持两个参数：高度和类型。

类型可以是以下任意一个值：

  • Auto：确定内部固定组件的大小

  • Pixel：像素数值

  • Star：使用剩余空间

高度参数的解释有赖于此类型值。 有关详细信息，请参阅Windows Presentation Foundation (WPF)文档。

SetBottomPanelHeight

此操作可用于设置底部面板高度。 它支持两个参数：高度和类型。

类型可以是以下任意一个值：

  • Auto：确定内部固定组件的大小

  • Pixel：像素数值

  • Star：使用剩余空间

高度参数的解释有赖于此类型值。 有关详细信息，请参阅 WPF 文档。

垂直拆分

这是一个特定布局，它包含一个具有左侧面板和右侧面板的垂直拆分器。

面板名称

说明

LeftPanel

这是在左侧显示的面板。 它的定义如下：

USDDeckTabPanel

RightPanel

这是在右侧显示的面板。 它的定义如下：

USDDeckTabPanel

此面板支持以下操作：

操作​​

说明

SetLeftPanelWidth

此操作可用于设置左侧面板的宽度。 它支持两个参数：宽度和类型。

类型可以是以下任意一个值：

  • Auto：确定内部固定组件的大小

  • Pixel：像素数值

  • Star：使用剩余空间

宽度参数的解释有赖于此类型值。 有关详细信息，请参阅 WPF 文档。

SetRightPanelWidth

此操作可用于设置右侧面板的宽度。 它支持两个参数：宽度和类型。

类型可以是以下任意一个值：

  • Auto：确定内部固定组件的大小

  • Pixel：像素数值

  • Star：使用剩余空间

宽度参数的解释有赖于此类型值。 有关详细信息，请参阅 WPF 文档。

XAML

创建自定义布局的一个最快捷的方式。 但是，此选项不支持代码隐藏。 因此，如果无法描述不含代码的布局，就不能使用此选项，而应换做使用”用户定义“的选项。 有关详细信息，请参阅 WPF 中的代码隐藏和 XAML。

这是 XAML 布局的示例。

        <Grid xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d" xmlns: USD="clr-namespace:Dynamics.PanelLayouts;assembly=Dynamics">
 <Grid.RowDefinitions>
 <RowDefinition Height="*" x:Name="TopPanelRow" />
 <RowDefinition Height="auto" />
 <RowDefinition Height="*" x:Name="BottomPanelRow" />
 </Grid.RowDefinitions>
 < USD: USDDeckTabPanel Grid.Row="1" x:Name="TopPanel" Focusable="False" ClipToBounds="True" />
 <GridSplitter Height="5" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Stretch" ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" />
 <USD: USDDeckTabPanel Grid.Row="3" x:Name="BottomPanel" />
</Grid>

有关此 XAML 中可定义和使用何种面板类型的详细信息，请参阅Unified Service Desk 的面板类型。

用户定义

此设置允许您构建包含代码隐藏的托管控件，以便在处理您的布局时获取 .NET 的全部功能。

有关在用户定义的面板中可定义和使用何种面板类型的详细信息，请参阅Unified Service Desk 的面板类型。

有关创建自定义面板布局的信息，请参阅创建自定义面板布局。

另请参阅

使用 Unified Service Desk 中的自定义面板类型和面板布局
面板的键盘快捷方式

Unified Service Desk 2.0

© 2017 Microsoft。 保留所有权利。 版权

  • Last updated on