共用方式為


其他遠端使用者介面概念

本文擴充了 遠端UI 簡介教學課程中涵蓋的基本概念,並探討了下列其他主題:

操作功能表

從 XAML (可延伸應用程式標記語言)中,您可以透過指派 FrameworkElementContextMenu 屬性,將內容功能表新增至遠端 UI 控制項。 此過程類似於您在標準 WPF(Windows Presentation Foundation)中新增內容功能表的方式。

<TextBox Text="Some text">
    <TextBox.ContextMenu>
      <ContextMenu Style="{DynamicResource {x:Static styles:VsResourceKeys.ContextMenuStyleKey}}">
        <MenuItem Header="Do something" Command="{Binding FirstCommand}" />
        <MenuItem Header="Do something else" Command="{Binding SecondCommand}">
          <MenuItem.Icon>
            <vs:Image Source="KnownMonikers.ClearWindowContent" />
          </MenuItem.Icon>
        </MenuItem>
      </ContextMenu>
    </TextBox.ContextMenu>
</TextBox>

在上一個範例中, vs:Image 控制項可用來將影像新增至操作功能表項目的標頭 (如需詳細資訊,請參閱 下列影像一節)。 請確定您在 XAML 檔案中參考 vsstyles 命名空間:

<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vs="http://schemas.microsoft.com/visualstudio/extensibility/2022/xaml"
              xmlns:styles="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
              xmlns:colors="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0">

每個功能表項目的命令都會系結到某個命令AsyncCommand(如需詳細資訊,請參閱遠端 UI 教學課程):

[DataContract]
internal class MyToolWindowData : NotifyPropertyChangedObject
{
    public MyToolWindowData()
    {
        FirstCommand = new(async (commandParameter, cancellationToken) => ...);
        SecondCommand = new(async (commandParameter, cancellationToken) => ...);
    }

    [DataMember]
    public IAsyncCommand FirstCommand { get; }

    [DataMember]
    public IAsyncCommand SecondCommand { get; }
}

圖片

您可以使用遠端 UI XAML 來顯示自訂影像或 Visual Studio 影像目錄中的影像。

下列範例示範如何顯示 ClearWindowContent Visual Studio 影像目錄所提供的影像。 它還詳細說明了將自訂映像新增至擴充專案(名為 Images\MyCustomImage.16.16.png的檔案)。 如需將影像新增至擴充功能的詳細資訊,請參閱 命令一文

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <Border>
        <vs:Image Source="KnownMonikers.ClearWindowContent" />
    </Border>
    <Border>
        <vs:Image Source="MyCustomImage" />
    </Border>
</StackPanel>

一如往常,請務必參考 vs XAML 檔案中的 和 styles 命名空間:

<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vs="http://schemas.microsoft.com/visualstudio/extensibility/2022/xaml"
              xmlns:styles="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
              xmlns:colors="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0">

您也可以將屬性資料繫結 Source 至字串或 ImageMoniker

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <Border BorderThickness="2" BorderBrush="Red" Margin="2">
        <vs:Image Source="{Binding StringImage}" />
    </Border>
    <Border BorderThickness="2" BorderBrush="Red" Margin="2">
        <vs:Image Source="{Binding StringImageFromCatalog}" />
    </Border>
    <Border BorderThickness="2" BorderBrush="Red" Margin="2">
        <vs:Image Source="{Binding MonikerImage}" />
    </Border>
    <Border BorderThickness="2" BorderBrush="Red" Margin="2">
        <vs:Image Source="{Binding MonikerImageFromCatalog}" />
    </Border>
</StackPanel>

對應的資料內容會是:

[DataContract]
internal class MyToolWindowData
{
    [DataMember]
    public string StringImage { get; } = "MyCustomImage";

    [DataMember]
    public string StringImageFromCatalog { get; } = "KnownMonikers.ClearWindowContent";

    [DataMember]
    public ImageMoniker MonikerImage { get; } = ImageMoniker.Custom("MyCustomImage");

    [DataMember]
    public ImageMoniker MonikerImageFromCatalog { get; } = ImageMoniker.KnownValues.ClearWindowContent;
}

如需遠端UI基本概念,請參閱 遠端UI教學課程。 如需更進階的案例,請參閱 進階遠端使用者介面概念