Unified Service Desk でのパネル、パネルの種類、およびパネルのレイアウト

標準メイン パネル

標準パネル レイアウトは、左側に一連のパネル、右側に折りたたみ可能な領域とメインの作業領域を含む、従来のレイアウトを提供します。 以下は、パネル レイアウトの定義に使用された XAMLです。User Interface Integration (UII) SDK で、この XAML を見つけることもできます。Download パッケージで、"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 のように、上部にリスト ビューを、下部に詳細ビューを表示するのに使用されます。 2 つのパネルは、このレイアウトで定義されます。

このパネルでは、以下のアクションがサポートされています。

左右分割

これは特殊なレイアウトで、垂直の分割線、および左パネルと右パネルが含まれます。

このパネルでは、以下のアクションがサポートされています。

XAML

ユーザー設定のレイアウトを作成する最も簡単な方法の 1 つです。 ただし、このオプションは分離コードをサポートしません。 結果として、コードを使用せずにレイアウトを記述することができない場合は、このオプションは使用できません。その代わりに、[ユーザー定義] のオプションを使用する必要があります。 詳細については、「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のパネル タイプ」を参照してください。

カスタム パネル レイアウトの作成方法については、「カスタム パネル レイアウトの作成」を参照してください。