Fermer

décembre 6, 2018

Contrôle UWP hôte dans WPF

TB_870x220


Non, les îles XAML ne sont pas un lieu de vacances exotique, mais à certains égards, c'est encore plus excitant. Cette nouvelle fonctionnalité destinée aux développeurs de postes de travail .NET de Microsoft vise à moderniser les applications classiques WPF, WinForms et Win32. Plongeons-nous.

Dans cette série de blogs, nous vous expliquerons en quoi consiste l’archipel XAML, son utilité et comment l’utiliser dans vos applications. Dans le précédent article nous avons brièvement parlé de l'historique de la mise en œuvre des îles XAML, de ce qu'il est, des fonctionnalités clés et de l'API, de ce qui est disponible maintenant et de ce à quoi vous pouvez vous attendre

L’accent sera mis sur: Hébergement d’un UWP WebView, InkCanvas, MapControl et établissement de liaisons UWP natives dans une application WPF et Windows Forms . Examinons maintenant de plus près les wrappers disponibles (WebView, InkCanvas et WindowsXamlHost) et comment créer des liaisons UWP natives à partir des mondes WPF et WinForms.

WebView, InkCanvas et WindowsXamlHost Wrappers

La création d'un wrapper personnalisé pour un contrôle UWP spécifique peut prendre beaucoup de temps. Pour cette raison, certains des contrôles UWP les plus utilisés sont emballés pour vous et peuvent être utilisés immédiatement. Les contrôles encapsulés actuellement sont WebView, InkCanvas, InkToolBar, MediaPlayerElement et MapControl.

REMARQUE: la dernière version de Windows (1809) doit être installée pour pouvoir utiliser les îles XAML.

Pour pouvoir utiliser ces contrôles, vous devez d'abord ajouter une référence au package Microsoft.Toolkit.Wpf.UI.Controls Nuget pour WPF et à Microsoft.Toolkit.Forms.UI.Controls pour Windows Forms.

 XAML_Islands_nuget "title =" XAML_Islands_nuget "style =" vertical-align: middle; "/></p data-recalc-dims=

Une fois le package ajouté, vous pouvez sortir et ouvrir la boîte à outils Visual Studio. Les commandes enveloppées doivent y être visualisées. et déposez-les dans votre application et utilisez-les comme n'importe quel autre contrôle WPF / WinForms.

Par exemple, nous pouvons ajouter InkCanvas et WebView:

 WebView_InkCanvas_Toolbox "title =" WebView_InkCanvas_Toolbox "style =" vertical-align: middle; " ></p data-recalc-dims=

Les propriétés et méthodes de WebView et les InkCanvas sont également exposés et peuvent être utilisés directement:

 













]

Et le résultat devrait ressembler à ceci:

 WebVIew and InkCanvas "title =" WebVIew et InkCanvas "style =" vertical-align: middle; "/></div data-recalc-dims=

Comment encapsuler d'autres contrôles UWP?

Pour tout autre contrôle non encapsulé, vous pouvez utiliser WindowsXamlHost et le visualiser dans WPF.

Vous devez d'abord ajouter l'espace de noms suivant en XAML afin de pouvoir utiliser WindowsXamlHost:

  xmlns: XamlHost = "espace de noms clr: Microsoft.Toolkit.Wpf.UI.XamlHost; assembly = Microsoft.Toolkit .Wpf.UI.XamlHost "

Une fois l'espace de noms ajouté, WindowsXamlHost peut être déclaré. En utilisant InitialTypeName de l'hôte, vous devez spécifier le type exact du contrôle que vous souhaitez initialiser. Par exemple, voici comment afficher un bouton UWP natif pur:

REMARQUE: pour pouvoir référencer les API Windows 10 dans votre application WPF / WinForms, assurez-vous d'avoir ajouté les références nécessaires. .

En utilisant ChildChanged vous pouvez accéder au bouton dans le code situé derrière et jouer avec. L'événement ChildChanged garantit le chargement complet du bouton:

   

Et dans le code-behind:

  private void WindowsXamlHost_ChildChanged (expéditeur d'objet, System.EventArgs e) 
{
var host = expéditeur (WindowsXamlHost);
var button = host.Child en tant que Windows.UI.Xaml.Controls.Button;
button.Content = "Je suis le bouton UWP";
}

Il ne s'agit que d'un exemple simple d'initialisation d'un bouton UWP dans WPF à l'aide de l'hôte. Vous pouvez déclarer une interface utilisateur encore plus complexe et l'assigner en tant qu'enfant à WindowsXamlHost:

  ... 
global :: Windows.UI.Xaml.Hosting.WindowsXamlManager.InitializeForCurrentThread ();


. uwpGrid = new Grid ();
uwpGrid.Margin = new Windows.UI.Xaml.Thickness (12, 20, 12, 14);
uwpGrid.RowDefinitions.Add (new RowDefinition ());
uwpGrid.RowDefinitions.Add (new RowDefinition () {Height = Windows.UI.Xaml.GridLength.Auto});

var map = nouveau MapControl ();

var sliderGrid = new Grid ();
Grid.SetRow (sliderGrid, 1);
sliderGrid.Margin = new Windows.UI.Xaml.Thickness (12);

var sliderPanel = new StackPanel (); [19459020)] vqr zoomSlider = new Slider ();
zoomSlider.Minimum = 1;
zoomSlider.Maximum = 20;
zoomSlider.Header = "Niveau de zoom";
zoomSlider.Value = 17.5;
] sliderPanel.Children.Add (zoomSlider);

var headingSlider = new Slider ();
headingSlider.Minimum = 0;
headingSlider.Maximum = 360;
headingSlider.Header = "Heading";
headingSlider.Value = 0;
sliderPanel.Children. Ajouter (headingSlider);

var désiréePitchSlider = nouveau Slider ();
désiréePitchSlider.Minimum = 0;
désiréePitchSlider.Maximum = 64;
désiréePitchSlider.Header = "Désir désirée";
désiréPitchSlider.Value = 32;
sliderPanel.Children.Add (désirésPitchSlider);
sliderGrid.Children.Add (sliderPanel);

uwpGrid.Children.Add (this.map);
uwpGrid.Children.Add (sliderGrid);
this.xamlHost.Child = uwpGrid;
...

Et le résultat final devrait être:

 UWPMap "title =" UWPMap "style =" vertical-align: middle; "/></p data-recalc-dims=

Contrôles UWP hôtes dans Windows Forms

De la même manière que WPF, vous pouvez envelopper n'importe quel contrôle UWP natif et le visualiser dans Windows Forms.

Vous devez d'abord ajouter le package Nuget Microsoft.Toolkit.Forms.UI.Controls. Comme dans WPF, vous devriez pouvoir voir les contrôles UWP encapsulés dans votre boîte à outils.

D'un simple glisser-déposer, le contrôle souhaité peut être placé et utilisé dans votre application.

Par exemple, voici comment un bouton UWP peuvent être créés dans le monde WinForms:

 WinForms_XamlIslands "title =" WinForms_XamlIslands "style =" vertical-align: middle; "/></p data-recalc-dims=

Et dans le code arrière utilisant l'événement ChildChanged vous pouvez définir les propriétés souhaitées sur le bouton:

 XAMLIslands_WinForms "title =" XAMLIslands_WinForms "/><pre data-recalc-dims= private void windowsXamlHost1_ChildChanged (expéditeur d'objet, EventArgs e)
[
privé.
var button = host.Child en tant que Windows.UI.Xaml.Controls.Button;
button.Content = "Le bouton UWP est appelé à partir de Windows Forms :)";
}

Le résultat final devrait ressembler à ceci:

 WinForms_XAMLIslands "title =" WinForms_XAMLIslands "style =" vertica l-align: middle; "/></p data-recalc-dims=

Utilisation des liaisons avec les îlots XAML

L’une des fonctionnalités les plus utiles du XAML est les liaisons. Étant donné que l'enfant de WindowsXamlHost s'exécute sur le même processus et sur le même thread, comme avec WPF et Windows Forms, vous pouvez établir des liaisons pour votre contrôle UWP natif sans aucun problème.

Par exemple, créons un simple Classe ViewModel:

 Classe publique ViewModel: INotifyPropertyChanged 
{
Chaîne privée uwpBtnContent;

publique ViewModel ()
{
this.UwpBtnContent = "je me suis désolé" ";
}

chaîne publique UwpBtnContent
{
get
{
renvoyez this.uwpBtnContent;
]
set
if (this.uwpBtnContent! = valeur)
{
this.uwpBtnContent = valeur;
this.NotifyPropertyChanged (na meof (UwpBtnContent));
}
}
]

événement public PropertyChangedEventHandler PropertyChanged;

Evénement privé NotifyPropertyChanged ([CallerMemberName] string propertyName "") [194590] ] {
PropertyChanged? .Invoke (this, nouveau PropertyChangedEventArgs (propertyName));
}

Après cela, dans l'événement ChildChanged nous pouvons créer la liaison suivante pour le Propriété de contenu du Button:

  private void WindowsXamlHost_ChildChanged (expéditeur de l'objet, System.EventArgs e) 
{
var host = (WindowsXamlHost) expéditeur;
var button = host.Child en tant que Windows.UI. Xaml.Controls.Button;
button.SetBinding (
Windows.UI.Xaml.Controls.Button.ContentProperty,
nouveau Windows.UI.Xaml.Data.Binding ()
{
Chemin = new Windows.UI.Xaml.PropertyPath ("UwpBtnContent"),
Source = new ViewModel ()
})
}

Le résultat devrait ressembler à ceci:

 Binding "title = "Binding" style = "vertical-align: middle;" /></p data-recalc-dims=

Limitations

Les îles XAML étant encore en prévisualisation, elles ont quelques limitations. En voici quelques-unes:

  • Les contrôles enveloppés ne réagissent pas correctement aux changements de DPI et d’échelle
  • Les outils d’accessibilité ne fonctionnent pas de manière transparente dans l’application et les contrôles hébergés

. Vous trouverez une liste complète contenant plus d’informations sur les autres limitations des îles XAML ici .

Closing Words

Être développeur de bureau n'a jamais été aussi excitant. Donner une apparence native à votre application WPF et WinForms à l’aide des îles XAML est une autre fonctionnalité intéressante introduite par Microsoft. Je suis enthousiaste de voir comment XAML Islands se développe et pour toutes les nouvelles fonctionnalités qui, à mon avis, nous parviendront en tant que développeurs.

N'hésitez pas et essayez dès maintenant les îles XAML. Croyez-moi, vous ne le regretterez pas. Vous voudrez peut-être également consulter nos suites WPF WinForms et UWP qui sont en parfaite harmonie avec toutes les nouveautés des îles XAML à . NET Core 3.0 .

Merci et codage heureux.

P.S. Dans le troisième et dernier blog de la série, nous allons nous concentrer sur le style et les personnalisations, et en particulier sur la création d'applications WPF et WinForms inspirées par Fluent Design.


Les commentaires sont désactivés en mode Aperçu.



Source link