Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Les animations connectées vous permettent de créer une expérience de navigation dynamique et attrayante en animant la transition d’un élément entre deux vues.
Les propriétés jointes XAML des animations connectées permettent de définir les animations connectées directement dans votre code XAML en ajoutant simplement une clé à l’élément qui doit être animé. Des propriétés jointes permettent également d’activer des animations et des animations coordonnées dans les listes et les grilles.
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<Page x:Class="AnimationsExperiment.Samples.ConnectedAnimationsSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:AnimationsExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="using:CommunityToolkit.WinUI"
mc:Ignorable="d">
<Grid>
<Border Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource OverlayCornerRadius}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Background="{StaticResource SolidBackgroundFillColorSecondaryBrush}">
<StackPanel Height="32"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button x:Name="BackButton"
Click="BackButton_Click"
Content="{ui:FontIcon Glyph=,
FontSize=14}"
Visibility="Collapsed" />
<TextBlock Margin="12,0"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Text="My Connected Animations App">
<animations:Implicit.Animations>
<animations:OffsetAnimation Duration="0:0:0.3" />
</animations:Implicit.Animations>
</TextBlock>
</StackPanel>
</Border>
<Frame x:Name="RootFrame"
Grid.Row="1"
Navigated="Frame_Navigated"
Navigating="RootFrame_Navigating" />
</Grid>
</Border>
</Grid>
</Page>
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
using AnimationsExperiment.Samples.ConnectedAnimations;
namespace AnimationsExperiment.Samples;
[ToolkitSample(id: nameof(ConnectedAnimationsSample), "Connected Animations", description: $"A sample for showing how to create and use connected animations.")]
public sealed partial class ConnectedAnimationsSample : Page
{
public ConnectedAnimationsSample()
{
this.InitializeComponent();
RootFrame.Navigate(typeof(FirstPage));
}
private void Frame_Navigated(object sender, NavigationEventArgs e)
{
BackButton.Visibility = RootFrame.CanGoBack ? Visibility.Visible : Visibility.Collapsed;
}
private void RootFrame_Navigating(object sender, NavigatingCancelEventArgs e)
{
if (e.SourcePageType == RootFrame.SourcePageType)
{
e.Cancel = true;
}
}
private void BackButton_Click(object sender, RoutedEventArgs e)
{
RootFrame.GoBack(new SuppressNavigationTransitionInfo());
}
}
Syntaxe
<Page ...
xmlns:animations="using:CommunityToolkit.WinUI.Animations">
<Border x:Name="Element" animations:Connected.Key="item"/>
<TextBlock animations:Connected.AnchorElement="{x:Bind Element}" Text="Hello World"/>
<GridView animations:Connected.ListItemElementName="ItemThumbnail"
animations:Connected.ListItemKey="listItem">
<GridView.ItemTemplate>
<DataTemplate>
<Image x:Name="ItemThumbnail" Height="200" Width="200"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Page>
Propriétés jointes XAML
Connected.Key
Inscrit l’élément auprès du service ConnectedAnimationsService. Pour que l’animation fonctionne, la même clé doit être inscrite sur deux pages différentes lors de la navigation
Connected.AnchorElement
Pour activer les animations coordonnées, utilisez la propriété jointe AnchorElement sur l’élément qui doit apparaître en même temps que l’élément d’animation connectée en spécifiant l’élément d’animation connectée
Connected.ListItemKey
Inscrit un élément ListView/GridView pour les animations connectées. Lors de la navigation depuis/vers une page qui utilise cette propriété, l’animation connectée utilise l’élément transmis en tant que paramètre dans la navigation entre les pages pour sélectionner l’élément dans la liste qui doit être animé. Pour plus d’informations, voir Sélectionner l’élément de liste à animer ci-dessous. La propriété jointe Connected.ListItemElementName doit également être définie pour inscrire l’animation
Connected.ListItemElementName
Spécifie l’élément nommé dans le modèle DataTemplate d’un élément à animer. La propriété jointe Connected.ListItemKey doit également être définie pour inscrire l’animation.
Inscription d’éléments dans le code-behind
Dans les cas où un élément n’a pas été chargé avant la fin de la navigation, les propriétés jointes ne sont pas en mesure d’accéder aux propriétés d’élément afin de l’inscrire pour l’animation connectée. Dans ce cas, vous pouvez inscrire l’élément par le biais du code-behind dans la méthode OnNavigatedTo. Les méthodes d’extension suivantes sont disponibles :
RegisterElementForConnectedAnimation(this Page page, string key, UIElement element, IEnumerable<UIElement> anchors = null)
Inscrit un élément UIElement auprès du service ConnectedAnimations pour s’exécuter automatiquement dans la navigation entre les pages
UnregisterElementForConnectedAnimation(this Page page, string key)
Annule l’inscription d’un élément UIElement auprès du service ConnectedAnimations
AttachAnchorElementForConnectedAnimation(this Page page, UIElement element, UIElement anchor)
Ajoute un élément d’ancrage pour animation en même temps que l’élément principal
RemoveAnchoredElementForConnectedAnimation(this Page page, UIElement element, UIElement anchor)
Supprime un élément d’ancrage de l’animation en même temps que l’élément principal
RegisterListItemForConnectedAnimation(this Page page, ListViewBase listViewBase, string key, string elementName)
Inscrit un élément (partie d’un DataTemplate dans un contrôle de liste) auprès du service ConnectedAnimations pour s’exécuter automatiquement sur la navigation entre les pages
UnregisterListItemForConnectedAnimation(this Page, ListViewBase listViewBase, string key)
Annule l’inscription d’un élément (partie d’un DataTemplate dans un contrôle de liste) auprès du service ConnectedAnimations
Sélectionner l’élément de liste à animer
L’assistance utilise le paramètre de navigation entre les pages pour déterminer l’élément de liste qui sera animé pendant la navigation entre les pages. Toutefois, dans certains cas, le paramètre transmis pendant la navigation entre les pages ne figure pas dans la liste. Par exemple, vous ne transmettez peut-être que l’ID d’un élément en tant que paramètre de navigation et non l’élément lui-même.
Dans ce cas, vous pouvez utiliser la méthode d’extension SetListDataItemForNextConnectedAnimation avant la navigation entre les pages pour spécifier l’élément à animer.
// dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
Frame.SetListDataItemForNextConnectedAnimation(dataItemToAnimate);
Frame.Navigate(typeof(DetailsPage), dataItemToAnimate.Id);
Cette méthode est également utile lors de la navigation vers un élément différent de celui depuis lequel vous avez navigué.
Frame.SetListDataItemForNextConnectedAnimation(dataItemToAnimate);
Frame.GoBack();
Exemples
Nous pouvons créer les animations connectées ci-dessus.
Dans la première page
Nous avons besoin d’une clé définie pour que l’élément soit connecté à un autre élément dans une autre page.
<Grid>
<Border Height="100" Width="100" Background="Purple" VerticalAlignment="Center" HorizontalAlignment="Center"
animations:Connected.Key="item" />
</Grid>
Dans la deuxième page
Nous devons définir la même clé pour l’élément avec lequel se connecter. En outre, vous pouvez ancrer un autre élément à déplacer sur le chemin de l’animation connectée.
<StackPanel Orientation="Horizontal">
<Border x:Name="HeroElement" Height="300" Width="300" Background="Purple"
animations:Connected.Key="item"/>
<StackPanel x:Name="HeroDetailsElement" Margin="20,0" VerticalAlignment="Bottom" MaxWidth="500"
animations:Connected.AnchorElement="{x:Bind HeroElement}">
<TextBlock Text="Header" FontSize="50" Text="Header"/>
<TextBlock TextWrapping="WrapWholeWords" Text="Lorem ipsum ..."/>
</StackPanel>
</StackPanel>
Dans cette page, nous pouvons également créer un élément GridView qui implémente l’animation connectée pour ses éléments. Vous devez définir ListItemKey et ListItemElementName pour spécifier l’élément UIElement à animer.
<GridView x:Name="listView" Margin="0, 40, 0, 0" SelectionMode="None"
Grid.Row="1" ItemClick="ListView_ItemClick" IsItemClickEnabled="True"
animations:Connected.ListItemElementName="ItemThumbnail"
animations:Connected.ListItemKey="listItem">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Item">
<StackPanel>
<Border x:Name="ItemThumbnail" Background="Purple" Height="200" Width="200"/>
<TextBlock Text="{x:Bind Title}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Dans la troisième page
Dans cette page, vous devez simplement spécifier la même clé.
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel x:Name="HeroDetailsElement" Margin="20,0" VerticalAlignment="Bottom" MaxWidth="500"
animations:Connected.AnchorElement="{x:Bind ItemHeroElement}">
<TextBlock Text="{x:Bind item.Title}" FontSize="50"/>
<TextBlock TextWrapping="WrapWholeWords" Text="Lorem ipsum..."/>
</StackPanel>
<Border x:Name="ItemHeroElement" Height="300" Width="300" Background="Purple"
animations:Connected.Key="listItem"/>
</StackPanel>
<TextBlock Margin="0,40" TextWrapping="WrapWholeWords" Text="Lorem ipsum..."/>
</StackPanel>
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.
Windows Community Toolkit