创建自定义面板布局

发布日期： 2016年11月

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

Unified Service Desk 中的面板布局是托管控件，用于在系统中加载所有类型的不同布局。Unified Service Desk 提供一些预定义的面板布局，供您在代理应用程序中使用。有关详细信息，请参阅Unified Service Desk 的面板布局。

Unified Service Desk 还允许您在每次要求安排 Unified Service Desk 面板类型时，让您创建用户定义的或自定义的面板布局，并增强代码隐藏 XAML 的体验。Microsoft Dynamics 365 为创建用户定义的面板布局提供一个 Visual Studio 项目模板的代码隐藏支持。

本主题显示了如何创建面板布局，以便您在其中重新安排面板，在桌面右侧显示会话信息、代理脚本、注释管理器和相关案例，而非左侧。此外，显示所有此类信息的窗格会在 Unified Service Desk 内的会话启动后自动显示，并在会话关闭后自动消失，无需您手动展开和折叠窗格。

本主题内容

必备条件

创建自定义面板布局

测试您的自定义面板布局

必备条件

Microsoft .NET Framework 4.5.2 项
Unified Service Desk 客户端应用程序；藉由使用代理应用程序登录之后测试自定义面板布局的托管控件必须使用客户端应用程序。
Microsoft Visual Studio 2012、Visual Studio 2013 或 Visual Studio 2015
适用于 Visual Studio 2012、Visual Studio 2013 或 Visual Studio 2015 的 NuGet 程序包管理器
适用于包含自定义面板布局项目模板的 Visual Studio 的 Microsoft Dynamics 365 SDK 模板。您可以使用下列方式之一获取模板：
- 从 Visual Studio 库内下载 CRM SDK 模板。双击 CRMSDKTemplates.vsix 文件在 Visual Studio 中安装模板。
- 下载和安装 CRM SDK。模板文件 CRMSDKTemplates.vsix 位于 SDK\Templates 文件夹中。双击该文件，以在 Visual Studio 中安装该模板。

创建自定义面板布局

启动 Visual Studio 并创建一个新项目。
在“新项目”对话框中：
1. 从已安装的模板列表中，展开“Visual C#”，然后选择“Dynamics 365 SDK 模板” > “Unified Service Desk” > “USD 自定义面板布局”。
2. 确保 .NET Framework 4.5.2 已被选中。
3. 指定项目的名称和位置，然后单击“确定”。
在“解决方案资源管理器”中，双击 CustomLayout.xaml 文件以打开 XAML 设计器。XAML 设计器会显示 Unified Service Desk 中的默认面板布局。

替换 XAML 代码（位于带以下示例内提供的代码的 CustomLayout.xaml 文件中）。为此，选择 XAML 区域（如图所示）内的所有代码（CTRL+A），随后将其删除，继而将所提供的 XAML 代码粘帖到同一位置。这样做的目的是将扩展器窗格的位置从左侧移到右侧。

更新自定义面板布局的 XAML 代码

<USD:PanelLayoutBase           
        x:Class="MyUSDCustomPanelLayout.CustomLayout"
        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="500" d:DesignWidth="500">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <local:CRMImageConverter x:Key="CRMImageLoader" />
            <Style x:Key="ImageLogo" TargetType="{x:Type Image}">
                <Setter Property="FlowDirection" Value="LeftToRight"/>
                <Setter Property="Width" Value="161" />
                <Setter Property="Height" Value="25" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </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 Grid.Column="0" Source="{Binding Source=msdyusd_Logo, Converter={StaticResource CRMImageLoader}}"  Style="{DynamicResource ImageLogo}"   />
                <Rectangle Width="10" Grid.Column="1" />
                <USD:USDDeckTabPanel x:Name="ToolbarPanel" Grid.Column="2" AutomationProperties.Name="Toolbar Panel" VerticalAlignment="Stretch" Focusable="False" Margin="1" />
                <Grid Grid.Column="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="412"/>
                    </Grid.ColumnDefinitions>
                    <Grid.Background>
                        <ImageBrush ImageSource="{Binding Source=msdyusd_Office15, Converter={StaticResource CRMImageLoader}}" Stretch="Fill" ></ImageBrush>
                    </Grid.Background>
                    <USD:USDStackPanel Grid.Column="0" x:Name="CtiPanel"  Orientation="Horizontal" Focusable="False" VerticalAlignment="Center" AutomationProperties.Name="Cti Panel" SelectedAppChanged="SelectedAppChangedHander"/>
                    <USD:USDStackPanel Grid.Column="1" HorizontalAlignment="Right" x:Name="AboutPanel"  Orientation="Horizontal" Focusable="False" 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="False" ClipToBounds="True" />
            <Grid x:Name="MainGrid" Grid.Row="1" AutomationProperties.Name="Main Panels">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <Expander Grid.Column="1" Style="{DynamicResource StretchExpanderStyle}"  ExpandDirection="Right" x:Name="RightExpander" IsExpanded="false" BorderBrush="White" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed" >
                    <Grid Style="{DynamicResource LeftPanelGrid}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" Name="ChatPanelRow" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <USD:USDCollapsePanel x:Name="SessionExplorerPanel" AutomationProperties.Name="Session Explorer Panel" Grid.Row="0" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
                        <USD:USDCollapsePanel x:Name="WorkflowPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="1" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
                        <USD:USDCollapsePanel x:Name="ChatPanel" AutomationProperties.Name="Workflow Panel" Grid.Row="2" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                        <USD:USDCollapsePanel x:Name="LeftPanel1" AutomationProperties.Name="Left Panel 1" Grid.Row="3" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                        <USD:USDCollapsePanel x:Name="LeftPanel2" AutomationProperties.Name="Left Panel 2" Grid.Row="4" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                        <USD:USDDeckTabPanel x:Name="LeftPanelFill" AutomationProperties.Name="Left Panel Fill" Grid.Row="5" Margin="1" SelectedAppChanged="SelectedAppChangedHander"/>
                    </Grid>
                </Expander>
                <Grid Grid.Column="0" 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="False" Margin="1" ClipToBounds="False" SnapsToDevicePixels="True" />
                    <USD:USDTabPanel x:Name="MainPanel" Grid.Row="1" AutomationProperties.Name="Main Panel" SelectedAppChanged="SelectedAppChangedHander"/>
                </Grid>
            </Grid>
        </Grid>
        <StatusBar Margin="0" Background="{DynamicResource WindowHeaderStyle}"  Grid.Row="2" Height="auto" VerticalAlignment="Bottom">
            <StatusBarItem Background="{DynamicResource WindowHeaderStyle}" >
                <USD:USDStackPanel x:Name="StatusPanel" Orientation="Horizontal" AutomationProperties.Name="Status Panel" Margin="1" SelectedAppChanged="SelectedAppChangedHander" />
            </StatusBarItem>
        </StatusBar>
    </Grid>
</USD:PanelLayoutBase>

您也可以定义键盘快捷方式来访问自定义面板布局中的面板。详细信息：面板的键盘快捷方式
在 解决方案资源管理器中，右键单击 CustomLayout.xaml 文件，然后单击查看代码 以添加 XAML 之后的代码。此项操作可以打开 CustomLayout.xaml.cs 文件。
通过添加以下代码更新 NotifyContextChange 方法定义。
```
if (context.Count != 0)
{
   RightExpander.IsExpanded = true;
}
else
{ 
   RightExpander.IsExpanded = false;
}
```
该代码可用来检查 Unified Service Desk 内是否存在任何活跃会话，并自动显示（展开）或隐藏（折叠）扩展器窗格。

这是经更新的 NotifyContextChange 方法定义。
保存您的项目，并生成项目（“生成” > “生成解决方案”），检查是否成功生成。

备注

注意，类名称可用来在 CustomLayout.xaml.cs 文件中创建自定义面板布局。在本实例中，它就是 CustomLayout。您将在下一步中需要使用此信息。

测试您的自定义面板布局

在项目的成功生成后，请测试自定义面板布局。测试包含两个部分：在服务器上定义自定义面板布局的承载控件，然后通过您在客户端目录中的自定义代码集使用您的客户端应用程序，并登录到服务器上的 Unified Service Desk。

定义服务器上的自定义面板布局承载控件

登录到 Microsoft Dynamics 365。
在导航栏上，选择“Microsoft Dynamics 365”，并选择“设置”。
选择设置 > Unified Service Desk > 托管控件。
选择“新建”，然后指定“新的承载控件”屏幕上的值，如下所示：

备注

程序集 URI 是指您的程序集名称，而“程序集类型”是指您的程序集文件 (dll) 名称，后跟点号 (.) 和您的 Visual Studio 项目内的类别名称。在此示例中，程序集名称为“MyUSDCustomPanelLayout”，类名称为 CustomLayout，是在创建自定义面板布局时默认的类名称。

保存承载控件。

运行 Unified Service Desk 客户端，以与自定义面板布局协作

将您的 Visual Studio 项目调试文件夹内包含 Web 应用程序适配器定义的程序集文件 (dll) 复制并粘帖到 Unified Service Desk 应用程序目录内，默认情况下，该应用程序目录为 c:\Program Files\Microsoft Dynamics CRM USD\USD。
运行 Unified Service Desk 客户端连接到 Dynamics 365 服务器。
成功登录后，您将会看到自定义面板布局，但其左侧没有扩展器窗格。扩展器窗格现在位于右侧。
选择工具栏上的搜索，然后选择要在会话内显示的某个记录。在这种情况下，选择搜索窗口内的联系人，然后选择 Maria Campbell（示例）。右侧窗格会自动显示关联会话数据、代理脚本和有关当前联系人记录的其他信息。
通过单击顶部会话标记内的十字以关闭会话，右窗格随后会自动关闭/折叠。

备注

在多个会话的情况下，右窗格将会继续显示，直至您已关闭所有会话标记。

另请参阅

以自定义面板布局显示托管控件
 Unified Service Desk 中的面板、面板类型和面板布局

Unified Service Desk 2.0

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

Last updated on 2017-04-18