Otros conceptos de la interfaz de usuario remota

En este artículo se amplían los conceptos fundamentales descritos en el tutorial introductorio de la interfaz de usuario remota y se exploran los siguientes temas adicionales:

Menús contextuales

Puedes agregar un menú contextual a un control de interfaz de usuario remoto desde XAML (lenguaje de marcado extensible de aplicaciones) asignando la FrameworkElementpropiedad ContextMenu de . Este proceso refleja la forma en que agregaría un menú contextual en WPF estándar (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>

En el ejemplo anterior, el vs:Image control se usa para agregar una imagen al encabezado del elemento de menú contextual (más detalles en la sección imágenes siguiente). Asegúrese de hacer referencia a los espacios de nombres vs y styles en el archivo XAML:

<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">

El comando de cada elemento de menú está enlazado a un AsyncCommand elemento (para obtener más información, consulte el tutorial de interfaz de usuario remota):

[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; }
}

Imágenes

Puedes usar XAML de interfaz de usuario remota para mostrar imágenes personalizadas o imágenes del catálogo de imágenes de Visual Studio.

En el ejemplo siguiente se muestra cómo puede mostrar la ClearWindowContent imagen proporcionada por el catálogo de imágenes de Visual Studio. También detalla la adición de una imagen personalizada al proyecto de extensión (un archivo denominado Images\MyCustomImage.16.16.png). Para obtener más información sobre cómo agregar imágenes a una extensión, consulte el artículo Comandos.

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

Como siempre, asegúrese de hacer referencia a los espacios de nombres vs y styles en el archivo XAML:

<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">

También puede vincular la propiedad Source a una cadena o a 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>

El contexto de datos correspondiente sería:

[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;
}

Contenido relacionado

Para conocer los conceptos básicos de la interfaz de usuario remota, consulte el tutorial de interfaz de usuario remota. Para ver escenarios más avanzados, consulte Conceptos avanzados de la interfaz de usuario remota.

  • Last updated on