Contrôle UWP hôte dans WPF

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.

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.

]

Et le résultat devrait ressembler à ceci:

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:

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:

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:

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.