En savoir plus sur l'interface utilisateur Telerik pour le contrôle de fenêtre par onglets WPF

L'interface utilisateur Telerik pour WPF dans R2 2019 est ici et je suis heureux de pouvoir vous annoncer qu'il peut vous aider à passer au niveau supérieur de la navigation dans votre application WPF. Découvrez le dernier ajout à notre collection de commandes de navigation WPF – la toute nouvelle RadTabbedWindow.

Présentation de RadTabbedWindow

Cela peut sembler être un contrôle WPF hybride, né de l’équation RadTabControl + RadWindow = RadTabbedWindow. Ne vous inquiétez pas, RadTabbedWindow ne ressemble pas à des voitures hybrides – ce contrôle est le meilleur des deux mondes et il n’ya pas deux façons de le gérer.

Toute application mérite un système de navigation efficace. Heureusement, la navigation par onglets est un bon système de ce type. La navigation par onglets peut absolument être décrite comme une «bonne conversation» avec vos clients. S'il est mis en œuvre correctement, il indique clairement et précisément aux utilisateurs:

• où ils se trouvent
• de ce qui leur est disponible
• comment peuvent-ils accéder à ce qui est disponible

Par conséquent, un bon système de navigation doit séparer de manière significative le contenu en différentes sections, indiquent clairement le contenu disponible et présente ce contenu de manière interactive.

Vous souhaitez apporter la productivité de la gestion des fenêtres à onglets à votre application WPF? Laissez-moi vous guider à travers ses fonctions clés.

Fonctions et événements clés

Le contrôle dispose d'une API riche qui facilite grandement la personnalisation de ses fonctionnalités et de son apparence. Voici certaines des principales caractéristiques de la fenêtre à onglets:

• Prise en charge de DragDrop:
      
  • Réorganiser les onglets dans une seule fenêtre
  • Déplacez les onglets pour créer une nouvelle fenêtre
  • Faites glisser les onglets déroulants d'une fenêtre à l'autre

      

• Fonctionnalité épingler / désépingler / fermer (via l'interface utilisateur ou par programme)
• Ajout du temps d'exécution des onglets (via l'interface utilisateur ou par programme)
• Liaison des données
• Prise en charge tactile prête à l'emploi
• 19659008] Oh, n'oublions pas de mentionner que le contrôle RadTabbedWindow expose également un certain nombre d'événements qui contribuent grandement à la personnalisation facile du comportement du contrôle:
  • TabbedWindowCreating (nouveau créé par glisser-déposer)
  • AddingNewTab
  • ] PreviewTabPinned & TabPinned
  • PreviewTabUnpinned & TabUnpinned
  • PreviewTabClosed & TabClosed
  • PreviewSelectionChanged & SelectionChanged

  Vous pouvez trouver des informations plus détaillées dans le grand article . La fenêtre à onglets comprend la variété intégrée de notre interface utilisateur Telerik pour la suite thématique WPF (cela signifie des améliorations encore plus simples de l'aspect et de la convivialité). Aussi, n'hésitez pas à profiter de la personnalisation parfaite des couleurs et de la création rapide de palettes à l'aide du Color Theme Generator .
  Passons maintenant à la partie intéressante! Les sections suivantes vous guideront dans l’incorporation du contrôle WebView d’UWP dans RadTabbedWindow.

  Hébergement de WebView dans RadTabbedWindow

  Vous souvenez-vous de XAML Islands ? Ils ressemblent à de petits conteneurs dans les applications WPF – ceux qui peuvent contenir de petits fragments de XAML pour rendre les contrôles UWP. De cette façon, nous pouvons maintenant apporter une expérience encore plus riche avec le contrôle UWP WebView moderne dans notre fenêtre à onglets.

  Avec les nouvelles versions de Windows 10, vous pouvez héberger des contrôles UWP dans des applications de bureau non UWP à l'aide de cette fonctionnalité. Vous trouverez plus d'informations à ce sujet ici ici .

  Les avez-vous déjà essayés? Honte à moi, je ne le ferais pas.

  Quel meilleur moment que maintenant pour tester les eaux des îles XAML? 🙂

  Conditions requises pour l'hébergement de WebView

  Avant de poursuivre, vous devez vous assurer que certaines conditions sont remplies:

  Une fois que nous avons coché toutes les puces ci-dessus, nous sommes prêts à faire glisser la vue Web. le contrôle de la boîte à outils de Visual Studio

  Guide pas à pas

  Dans ce guide, j'utilise la fenêtre à onglets avec la version NoXaml et le thème Fluent.

  1. Créez une application WPF vide, ajoutez des références aux assemblys suivants et fusionnez les ResourceDictionaries correspondants dans App. xaml:
         
     • Telerik.Windows.Controls
     • Telerik.Windows.Controls.Navigation
     • Telerik.Windows.Controls.Data

     Ajoutez un style vide ciblant la fenêtre principale basée sur RadTabbedWindowStyle. Votre App.xaml doit ressembler à ceci:

      < Application.Resources > 
       < ResourceDictionary > 
       < ResourceDictionary.MergedDictionaries > 
       < ResourceDictionary   Source  =  "/ Telerik.Windows.Themes.Fluent; composant / Thèmes / System.Windows.xaml"  / > 
       < ResourceDictionary   Source  =  "/ Telerik.Windows.Themes.Fluent; composant / Thèmes / Telerik.Windows.Controls.xaml"  /> 
       < ResourceDictionary   Source  =  "/ Telerik.Windows.Themes.Fluent; composant / Thèmes / Telerik.Windows.Controls.Navigation.xaml"  / > 
       </  ResourceDictionary.MergedDictionaries > 
       < Style [19659058] TargetType  =  "local: MainWindow"   BasedOn  =  "{StaticResource RadTabbedWindowStyle}"   />  /> 19659045] </  ResourceDictionary [19659045]> 
      </  Application.Ressources >  
       

         

  2. Ajouter xmlns: telerik = "http://schemas.telerik.com/2008/xaml/presentation," remplacez Window par telerik: RadTabbedWindow et supprimez la grille vide. Votre MainWindow.xaml devrait ressembler à ceci:
         

      < telerik: RadTabbedWindow   x: Class  =  "WpfApplication1.MainWindow" 
     
     
     
       
     
     
                    
     
     
     
     
     
     
     
     
       xmlns: local  =  "Clr-namespace: WpfApplication1 "
     
       mc: Ignorable  = " d "
       Header  = " MainWindow "  Hauteur  = " 800 "  Largeur  = " 1300 "> 
      </  telerik: RadTabbedWindow > 
     

     Pour pouvoir afficher le contenu de WebView en tant que RadTabbedWindow, vous devez l'ajouter. l'espace de noms suivant et définissez la propriété AllowTransparency sur false. Cette propriété est vraie par défaut en raison de l'ombre sous-jacente présente dans tous les thèmes.

     
      xmlns: navigation = "espace de nom clr: Telerik.Windows.Controls.Navigation; assembly = Telerik.Windows.Controls.Navigation" 
      navigation: RadWindowInteropHelper.AllowTransparency = "False" 

     dans MainWindows.xx cs, vous devriez hériter de RadTabbedWindow au lieu de Window:

      public   partiel   classe   MainWindow: RadTabbedWindow 
      {
       public   MainWindow () [19659047]  {
       InitializeComponent (); 
      } 
     }  
       

         

  3. Si vous souhaitez que la fenêtre à onglets soit la fenêtre principale, vous devez supprimer StartupUri du fichier App.xaml et modifier App.xaml.cs afin qu'il contienne les éléments suivants:
         

      protected   override   null   OnStartup (StartupEventArgs e) 
      {
       nouveau   MainWindow (). Show (); 
       base [19659045] .OnStartup (e); 
     } 
     

     Sinon, vous pouvez la créer en tant que fenêtre distincte en ajoutant une nouvelle fenêtre à votre projet et en modifiant en conséquence le type de style cible du style vide à l'étape 1.

         

  4. Ajoutez un nouvel élément à la fenêtre à onglets, faites glisser WebView à partir de la boîte à outils de Visual Studio et définissez les configurations souhaitées:

     

  5. Exécutez l'application et profitez!

  Le fichier GIF suivant est un exemple du guide ci-dessus, à la seule différence qu'il crée une nouvelle WebView en tant que contenu du nouvel événement AddingNewTab du formulaire à onglet. Le fragment de code de AddingNewTab suit également.

  

   private void RadTabbedWindow_AddingNewTab (expéditeur d’objet, Telerik.Windows.Controls.TabbedWindow.AddingNewTabEventArgs e) [article]. 
   wv.Source = new Uri ("https://google.com"); 
   RadTabItem newTab = e.Item en tant que RadTabItem; 
   if (newTab! = Null) 
   {
   newTab.Header = "Nouvel onglet"; 
   newTab.Content = wv; 
  } 
  } 

  Cela ne m'a pas fait mal, et ça a l'air plutôt cool, n'est-ce pas? La version R2 2019 de Telerik étant déjà en ligne, n'hésitez pas à essayer immédiatement RadTabbedWindow et n'hésitez pas à partager vos impressions dans la section des commentaires ci-dessous.

  À découvrir

  Il est fort probable que ce soit la première fois que vous entendiez parler de l'interface utilisateur Telerik pour WPF, vous pouvez alors explorer la grande variété de fonctions, contrôles et thèmes clés prêts à être utilisés pour notre page de produits .

  ---