Partager via

Autres concepts de l’interface utilisateur distante

Cet article s’étend sur les concepts fondamentaux abordés dans le didacticiel d’introduction à l’interface utilisateur à distance et explore les rubriques supplémentaires suivantes :

Menus contextuels

Vous pouvez ajouter un menu contextuel à un contrôle d’interface utilisateur distant à partir de XAML (Extensible Application Markup Language) en affectant la FrameworkElementpropriété ContextMenu . Ce processus reflète la façon dont vous ajouteriez un menu contextuel dans WPF standard (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>

Dans l’exemple précédent, le vs:Image contrôle est utilisé pour ajouter une image à l’en-tête de l’élément de menu contextuel (plus de détails dans la section Images qui suit). Veillez à référencer les espaces de noms vs et styles dans le fichier 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">

La commande de chaque élément de menu est liée à un AsyncCommand (pour plus d’informations, consultez le didacticiel sur l’interface utilisateur distante) :

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

Images

Vous pouvez utiliser XAML de l'interface utilisateur distante pour afficher des images personnalisées ou celles du catalogue d'images Visual Studio.

L’exemple suivant montre comment afficher l’image ClearWindowContent fournie par le catalogue d’images Visual Studio. Il détaille également l’ajout d’une image personnalisée au projet d’extension (un fichier nommé Images\MyCustomImage.16.16.png). Pour plus d’informations sur l’ajout d’images à une extension, consultez l’article Commandes.

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

Comme toujours, veillez à référencer les espaces de noms vs et styles dans le fichier 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">

Vous pouvez également lier la Source propriété à une chaîne ou à un 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>

Le contexte de données correspondant serait :

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

Contenu connexe

Pour connaître les principes de base de l’interface utilisateur distante, consultez le didacticiel sur l’interface utilisateur distante. Pour des scénarios plus avancés, consultez les concepts avancés de l’interface utilisateur distante.

  • Last updated on