Entrainement
Module
Navigation dans une application canevas dans Power Apps - Training
Dans ce module, les apprenants vont étudier plus en détail la navigation dans Power Apps.
Ce navigateur n’est plus pris en charge.
Effectuez une mise à niveau vers Microsoft Edge pour tirer parti des dernières fonctionnalités, des mises à jour de sécurité et du support technique.
Découvrez comment utiliser une trame et les pages pour activer une navigation pair à pair de base dans votre application.
Presque toutes les applications nécessitent une navigation entre les pages. Même une application simple avec une page de contenu unique aura généralement une page de paramètres qui nécessite une navigation. Dans cet article, nous allons parcourir les principes fondamentaux de l’ajout d’un code XAML Page
à votre application et de l’utilisation d’une page à l’autre Frame
.
Important
Nous utilisons le modèle d’application vide de Microsoft Visual Studio pour cet exemple. Il existe des différences dans les modèles pour les applications Windows App SDK/WinUI 3 et les applications UWP. Veillez donc à sélectionner l’onglet approprié pour votre type d’application.
Pour créer une application vide dans Visual Studio :
BasicNavigation
, puis cliquez sur Créer.MainWindow.xaml
fichiers et MainWindow
code-behind.Conseil
Pour plus d’informations, consultez Créer votre premier projet WinUI 3 (Kit de développement logiciel (SDK) d’application Windows.
Lorsque votre application comporte plusieurs pages, vous utilisez un frame pour naviguer entre elles. La Frame
classe prend en charge différentes méthodes de navigation telles que Navigate, GoBack et GoForward, et les propriétés telles que BackStack, ForwardStack et BackStackDepth.
Lorsque vous créez un projet sdk d’application Windows dans Visual Studio, le modèle de projet crée une MainWindow
classe (de type Microsoft.UI.Xaml.Window). Toutefois, elle ne crée pas de cadre ou de page et ne fournit aucun code de navigation.
Pour activer la navigation entre les pages, ajoutez un Frame
élément racine de MainWindow
. Vous pouvez le faire dans la méthode Application.OnLaunched substituée dans le App.xaml
fichier code-behind. Ouvrez le App
fichier code-behind, mettez à jour le OnLaunched
remplacement et gérez l’événement NavigationFailed , comme illustré ici.
// App.xaml.cs
protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
m_window = new MainWindow();
// Create a Frame to act as the navigation context and navigate to the first page
Frame rootFrame = new Frame();
rootFrame.NavigationFailed += OnNavigationFailed;
// Navigate to the first page, configuring the new page
// by passing required information as a navigation parameter
rootFrame.Navigate(typeof(MainPage), args.Arguments);
// Place the frame in the current Window
m_window.Content = rootFrame;
// Ensure the MainWindow is active
m_window.Activate();
}
void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}
// App.xaml.h
// Add after OnLaunched declaration.
void OnNavigationFailed(IInspectable const&, Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const&);
///////////////
// App.xaml.cpp
void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
window = make<MainWindow>();
Frame rootFrame = Frame();
rootFrame.NavigationFailed({ this, &App::OnNavigationFailed });
rootFrame.Navigate(xaml_typename<BasicNavigation::MainPage>(), box_value(e.Arguments()));
window.Content(rootFrame);
window.Activate();
}
void App::OnNavigationFailed(IInspectable const&, NavigationFailedEventArgs const& e)
{
throw hresult_error(E_FAIL, hstring(L"Failed to load Page ") + e.SourcePageType().Name);
}
Notes
Pour les applications avec une navigation plus complexe, vous utiliserez généralement une NavigationView comme racine de MainWindow et placez-la Frame
comme contenu de l’affichage de navigation. Pour plus d’informations, consultez l’affichage navigation.
La méthode Navigate est utilisée pour afficher du contenu dans ce Frame
fichier . Ici, MainPage.xaml
est passé à la Navigate
méthode, donc la méthode se charge MainPage
dans le Frame
.
Si la navigation vers la fenêtre initiale de l’application échoue, un NavigationFailed
événement se produit et ce code lève une exception dans le gestionnaire d’événements.
Le modèle d’application vide ne crée pas plusieurs pages d’application pour vous. Avant de pouvoir naviguer entre les pages, vous devez ajouter des pages à votre application.
Pour ajouter un nouvel élément à votre application :
BasicNavigation
projet pour ouvrir le menu contextuel.MainPage
sur le bouton Ajouter .Page2
.À présent, ces fichiers doivent être répertoriés dans le cadre de votre BasicNavigation
projet.
C# | C++ |
---|---|
|
|
Important
Pour les projets C++, vous devez ajouter une #include
directive dans le fichier d’en-tête de chaque page qui fait référence à une autre page. Pour l’exemple de navigation entre pages présenté ici, le fichier mainpage.xaml.h contient #include "Page2.xaml.h"
, à son tour, page2.xaml.h contient #include "MainPage.xaml.h"
.
Les modèles de page C++ incluent également un exemple Button
et cliquez sur le code du gestionnaire que vous devez supprimer des fichiers XAML et code-behind de la page.
Dans MainPage.xaml
, remplacez le contenu de page existant par le contenu suivant :
<Grid>
<TextBlock x:Name="pageTitle" Text="Main Page"
Margin="16" Style="{StaticResource TitleTextBlockStyle}"/>
<HyperlinkButton Content="Click to go to page 2"
Click="HyperlinkButton_Click"
HorizontalAlignment="Center"/>
</Grid>
Ce code XAML ajoute :
pageTitle
avec sa propriété Text définie Main Page
comme élément enfant de la grille racine.Dans le MainPage
fichier code-behind, ajoutez le code suivant pour gérer l’événement hyperlinkButton que vous avez ajouté pour activer la Click
navigation vers Page2.xaml
.
// MainPage.xaml.cs
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(Page2));
}
// pch.h
// Add this include in pch.h to support winrt::xaml_typename
#include <winrt/Windows.UI.Xaml.Interop.h>
////////////////////
// MainPage.xaml.h
void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);
////////////////////
// MainPage.xaml.cpp
void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>());
}
MainPage
est une sous-classe de la classe Page. La Page
classe a une propriété Frame en lecture seule qui obtient le Frame
conteneur .Page
Lorsque le Click
gestionnaire d’événements des HyperlinkButton
MainPage
appels Frame.Navigate(typeof(Page2))
, le Frame
contenu Page2.xaml
de .
Chaque fois qu’une page est chargée dans le cadre, cette page est ajoutée en tant que PageStackEntry à BackStack ou ForwardStack du frame, ce qui permet l’historique et la navigation vers l’arrière.
Maintenant, faites la même chose en Page2.xaml
. Remplacez le contenu de page existant par le contenu suivant :
<Grid>
<TextBlock x:Name="pageTitle" Text="Page 2"
Margin="16" Style="{StaticResource TitleTextBlockStyle}"/>
<HyperlinkButton Content="Click to go to main page"
Click="HyperlinkButton_Click"
HorizontalAlignment="Center"/>
</Grid>
Dans le Page2
fichier code-behind, ajoutez le code suivant pour gérer l’événement Click
hyperlinkButton pour accéder à MainPage.xaml
.
// Page2.xaml.cs
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(MainPage));
}
// Page2.xaml.h
void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);
/////////////////
// Page2.xaml.cpp
void winrt::BasicNavigation::implementation::Page2::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>());
}
Générez et exécutez l'application. Cliquez sur le lien qui indique « Cliquez pour accéder à la page 2 ». La deuxième page qui indique « Page 2 » en haut doit être chargée et affichée dans le cadre. Cliquez maintenant sur le lien de la page 2 pour revenir à la page principale.
Votre application navigue désormais entre deux pages, mais elle ne fait vraiment rien d’intéressant pour le moment. Souvent, lorsqu’une application a plusieurs pages, les pages doivent partager des informations. Vous allez maintenant transmettre des informations de la première page à la deuxième page.
Dans MainPage.xaml
, remplacez l’élément HyperlinkButton
que vous avez ajouté précédemment par le stackPanel suivant. Cela ajoute une étiquette TextBlock et une zone de name
texte pour entrer une chaîne de texte.
<StackPanel VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center" Text="Enter your name"/>
<TextBox HorizontalAlignment="Center" Width="200" x:Name="name"/>
<HyperlinkButton Content="Click to go to page 2"
Click="HyperlinkButton_Click"
HorizontalAlignment="Center"/>
</StackPanel>
Vous allez maintenant utiliser la deuxième surcharge de la Navigate
méthode et passer le texte de la zone de texte en tant que deuxième paramètre. Voici la signature de cette Navigate
surcharge :
public bool Navigate(System.Type sourcePageType, object parameter);
bool Navigate(TypeName const& sourcePageType, IInspectable const& parameter);
Dans le HyperlinkButton_Click
gestionnaire d’événements du MainPage
fichier code-behind, ajoutez un deuxième paramètre à la Navigate
méthode qui référence la Text
propriété de la name
zone de texte.
// MainPage.xaml.cs
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(Page2), name.Text);
}
// MainPage.xaml.cpp
void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
Frame().Navigate(xaml_typename<BasicNavigation::Page2>(), winrt::box_value(name().Text()));
}
Dans Page2.xaml
, remplacez le HyperlinkButton
fichier que vous avez ajouté précédemment par le code suivant StackPanel
. Cela ajoute un TextBlock pour afficher la chaîne de texte passée à partir de MainPage
.
<StackPanel VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center" x:Name="greeting"/>
<HyperlinkButton Content="Click to go to page 1"
Click="HyperlinkButton_Click"
HorizontalAlignment="Center"/>
</StackPanel>
Dans le Page2
fichier code-behind, ajoutez le code suivant pour remplacer la OnNavigatedTo
méthode :
// Page2.xaml.cs
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.Parameter is string && !string.IsNullOrWhiteSpace((string)e.Parameter))
{
greeting.Text = $"Hello, {e.Parameter.ToString()}";
}
else
{
greeting.Text = "Hello!";
}
base.OnNavigatedTo(e);
}
// Page2.xaml.h
void Page2::OnNavigatedTo(Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& e)
{
auto propertyValue{ e.Parameter().as<Windows::Foundation::IPropertyValue>() };
if (propertyValue.Type() == Windows::Foundation::PropertyType::String)
{
auto name{ winrt::unbox_value<winrt::hstring>(e.Parameter()) };
if (!name.empty())
{
greeting().Text(L"Hello, " + name);
__super::OnNavigatedTo(e);
return;
}
}
greeting().Text(L"Hello!");
__super::OnNavigatedTo(e);
}
Exécutez l’application, tapez votre nom dans la zone de texte, puis cliquez sur le lien qui indique Click to go to page 2
.
Lorsque l’événement Click
des HyperlinkButton
appels Frame.Navigate(typeof(Page2), name.Text)
in MainPage
est passé, Page2
la name.Text
propriété est transmise et la valeur des données d’événement est utilisée pour le message affiché sur la page.
Le contenu et l’état de la page ne sont pas mis en cache par défaut. Pour le faire, vous devez les activer dans chaque page de votre application.
Dans notre exemple de base peer-to-peer, lorsque vous cliquez sur le Click to go to page 1
lien, Page2
le TextBox
(et tout autre champ) activé MainPage
est défini sur son état par défaut. L’une des façons de contourner ce problème consiste à utiliser la propriété NavigationCacheMode pour spécifier qu’une page doit être ajoutée au cache de page du cadre.
Par défaut, une nouvelle instance de page est créée avec ses valeurs par défaut chaque fois que la navigation se produit. Dans MainPage.xaml
, définissez Enabled
NavigationCacheMode
sur (dans la balise d’ouverturePage
) pour mettre en cache la page et conserver toutes les valeurs de contenu et d’état de la page jusqu’à ce que le cache de page pour le frame soit dépassé. Définissez NavigationCacheMode sur Required si vous voulez ignorer les limites CacheSize, qui spécifient le nombre de pages de l’historique de navigation qui peuvent être mises en cache pour la trame. Toutefois, n’oubliez pas que la taille limite du cache peut être cruciale, selon les limites de mémoire d’un appareil.
<Page
x:Class="BasicNavigation.MainPage"
...
mc:Ignorable="d"
NavigationCacheMode="Enabled">
Maintenant, lorsque vous cliquez sur la page principale, le nom que vous avez entré dans la zone de texte est toujours là.
Par défaut, chaque page est animée dans le cadre lorsque la navigation se produit. L’animation par défaut est une animation « entrée » qui fait glisser la page vers le haut du bas de la fenêtre. Toutefois, vous pouvez choisir différentes options d’animation qui conviennent mieux à la navigation de votre application. Par exemple, vous pouvez utiliser une animation d’extraction pour donner le sentiment que l’utilisateur va plus loin dans votre application, ou une animation de diapositive horizontale pour donner le sentiment que deux pages sont des homologues. Pour plus d’informations, consultez Transitions de page.
Ces animations sont représentées par des sous-classes de NavigationTransitionInfo. Pour spécifier l’animation à utiliser pour une transition de page, vous allez utiliser la troisième surcharge de la Navigate
méthode et passer une NavigationTransitionInfo
sous-classe comme troisième paramètre (infoOverride
). Voici la signature de cette Navigate
surcharge :
public bool Navigate(System.Type sourcePageType,
object parameter,
NavigationTransitionInfo infoOverride);
bool Navigate(TypeName const& sourcePageType,
IInspectable const& parameter,
NavigationTransitionInfo const& infoOverride);
Dans le HyperlinkButton_Click
gestionnaire d’événements du MainPage
fichier code-behind, ajoutez un troisième paramètre à la Navigate
méthode qui définit le infoOverride
paramètre sur un SlideNavigationTransitionInfo avec sa propriété Effect définie sur FromRight.
// MainPage.xaml.cs
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(Page2),
name.Text,
new SlideNavigationTransitionInfo()
{ Effect = SlideNavigationTransitionEffect.FromRight});
}
// pch.h
#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>
////////////////////
// MainPage.xaml.cpp
using namespace winrt::Microsoft::UI::Xaml::Media::Animation;
// ...
void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
// Create the slide transition and set the transition effect to FromRight.
SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromRight));
Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>(),
winrt::box_value(name().Text()),
slideEffect);
}
Dans le HyperlinkButton_Click
gestionnaire d’événements du Page2
fichier code-behind, définissez le infoOverride
paramètre sur un SlideNavigationTransitionInfo avec sa propriété Effect définie sur FromLeft.
// Page2.xaml.cs
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(MainPage),
null,
new SlideNavigationTransitionInfo()
{ Effect = SlideNavigationTransitionEffect.FromLeft});
}
// Page2.xaml.cpp
using namespace winrt::Microsoft::UI::Xaml::Media::Animation;
// ...
void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
// Create the slide transition and set the transition effect to FromLeft.
SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromLeft));
Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>(),
nullptr,
slideEffect);
}
Maintenant, lorsque vous naviguez entre les pages, les pages diapositivent de gauche et de droite, ce qui procure un sentiment plus naturel pour cette transition et renforce la connexion entre les pages.
Commentaires sur Windows developer
Windows developer est un projet open source. Sélectionnez un lien pour fournir des commentaires :
Entrainement
Module
Navigation dans une application canevas dans Power Apps - Training
Dans ce module, les apprenants vont étudier plus en détail la navigation dans Power Apps.