Skip to content

Commit 5ec6a87

Browse files
niels9001Arlodotexe
niels9001
and
Arlodotexe
authored
Porting the Connected Animations sample (#180)
* Minor implicit sample tweak * Adding Connected Animations sample * XAML styler * Changes * Renamed duplicate files --------- Co-authored-by: Arlo Godfrey <[email protected]>
1 parent 0a354dc commit 5ec6a87

20 files changed

+564
-5
lines changed

‎components/Animations/samples/Animations.Samples.csproj

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,36 @@
55

66
<!-- Sets this up as a toolkit component's sample project -->
77
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
8+
<ItemGroup>
9+
<None Remove="Assets\BigFourSummerHeat2.jpg" />
10+
<None Remove="Assets\BisonBadlandsChillin2.jpg" />
11+
<None Remove="Assets\ColumbiaRiverGorge.jpg" />
12+
<None Remove="Assets\GrandTetons.jpg" />
13+
<None Remove="Assets\MitchellButtes.jpg" />
14+
<None Remove="Assets\OregonWineryNamaste.jpg" />
15+
<None Remove="Assets\RunningDogPacificCity.jpg" />
16+
</ItemGroup>
17+
<ItemGroup>
18+
<Content Include="Assets\BigFourSummerHeat2.jpg">
19+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
20+
</Content>
21+
<Content Include="Assets\BisonBadlandsChillin2.jpg">
22+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
23+
</Content>
24+
<Content Include="Assets\ColumbiaRiverGorge.jpg">
25+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
26+
</Content>
27+
<Content Include="Assets\GrandTetons.jpg">
28+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
29+
</Content>
30+
<Content Include="Assets\MitchellButtes.jpg">
31+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
32+
</Content>
33+
<Content Include="Assets\OregonWineryNamaste.jpg">
34+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
35+
</Content>
36+
<Content Include="Assets\RunningDogPacificCity.jpg">
37+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
38+
</Content>
39+
</ItemGroup>
840
</Project>

‎components/Animations/samples/AnimationsImplicitSample.xaml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- 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. -->
1+
<!-- 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. -->
22
<Page x:Class="AnimationsExperiment.Samples.AnimationsImplicitSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -8,10 +8,9 @@
88
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
99
xmlns:ui="CommunityToolkit.WinUI"
1010
mc:Ignorable="d">
11-
<Grid>
11+
<Grid Height="480">
1212
<Grid.RowDefinitions>
13-
<RowDefinition Height="*"
14-
MinHeight="420" />
13+
<RowDefinition Height="*" />
1514
<RowDefinition Height="Auto" />
1615
</Grid.RowDefinitions>
1716
<Canvas>
@@ -20,7 +19,8 @@
2019
Canvas.Top="100"
2120
Width="100"
2221
Height="100"
23-
Background="{ThemeResource AccentFillColorDefaultBrush}">
22+
Background="{ThemeResource AccentFillColorDefaultBrush}"
23+
CornerRadius="{StaticResource ControlCornerRadius}">
2424

2525
<animations:Implicit.ShowAnimations>
2626
<animations:TranslationAnimation From="0, -200, 0"

‎components/Animations/samples/AnimationsImplicitSample.cs renamed to ‎components/Animations/samples/AnimationsImplicitSample.xaml.cs

File renamed without changes.

‎components/Animations/samples/Assets/BigFourSummerHeat2.jpg

164 KB
Loading

‎components/Animations/samples/Assets/BisonBadlandsChillin2.jpg

82.3 KB
Loading

‎components/Animations/samples/Assets/ColumbiaRiverGorge.jpg

70.2 KB
Loading

‎components/Animations/samples/Assets/ConnectedAnimations.png

3.17 KB
Loading

‎components/Animations/samples/Assets/GrandTetons.jpg

97.8 KB
Loading

‎components/Animations/samples/Assets/MitchellButtes.jpg

148 KB
Loading

‎components/Animations/samples/Assets/OregonWineryNamaste.jpg

161 KB
Loading

‎components/Animations/samples/Assets/RunningDogPacificCity.jpg

70.4 KB
Loading

‎components/Animations/samples/ConnectedAnimations.md

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: Connected Animations
3+
author: nmetulev
4+
description: The Connected Animation XAML Attached Properties enable connected animations to be defined in your XAML code
5+
keywords: Animations, Effects, Layout, Composition, animationset, animation, coordinated animations
6+
dev_langs:
7+
- csharp
8+
category: Animations
9+
subcategory: Layout
10+
discussion-id: 0
11+
issue-id: 0
12+
icon: Assets/ConnectedAnimations.png
13+
---
14+
15+
16+
# Connected Animations XAML Attached Properties
17+
18+
[Connected animations](/windows/uwp/style/connected-animation) let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.
19+
20+
The Connected Animations XAML Attached Properties enable connected animations to be defined directly in your XAML code by simply adding a Key to the element that should animate. There are also attached properties to enable coordinated animations and animations in lists and grids.
21+
22+
> [!Sample ConnectedAnimationsSample]
23+
24+
## Syntax
25+
26+
```xaml
27+
<Page ...
28+
xmlns:animations="using:CommunityToolkit.WinUI.Animations">
29+
30+
<Border x:Name="Element" animations:Connected.Key="item"></Border>
31+
32+
<TextBlock animations:Connected.AnchorElement="{x:Bind Element}" Text="Hello World"/>
33+
34+
<GridView animations:Connected.ListItemElementName="ItemThumbnail"
35+
animations:Connected.ListItemKey="listItem">
36+
<GridView.ItemTemplate>
37+
<DataTemplate>
38+
<Image x:Name="ItemThumbnail" Height="200" Width="200"></Image>
39+
</DataTemplate>
40+
</GridView.ItemTemplate>
41+
</GridView>
42+
</Page>
43+
```
44+
45+
## XAML Attached Properties
46+
47+
### Connected.Key
48+
49+
Registers element with the [ConnectedAnimationsService](/uwp/api/Windows.UI.Xaml.Media.Animation.ConnectedAnimation). For the animation to work, the same key must be registered on two different pages when navigating
50+
51+
### Connected.AnchorElement
52+
53+
To enable [coordinated animations](/windows/uwp/style/connected-animation#coordinated-animation), use the AnchorElement attached property on the element that should appear alongside the connected animation element by specifying the connected animation element
54+
55+
### Connected.ListItemKey
56+
57+
Registers a ListView/GridView for connected animations. When navigating from/to a page that is using this property, the connected animation will use the item passed as a **parameter** in the page navigation to select the item in the list that should animated. See *Select List Item to be animated* section below for more details. The *Connected.ListItemElementName* attached property must also be set for the animation to be registered
58+
59+
### Connected.ListItemElementName
60+
61+
Specifies what named element in the DataTemplate of an item should animate. The Connected.ListItemKey attached property must also be set for the animation to be registered.
62+
63+
## Registering elements in code behind
64+
65+
In cases where an element has not loaded before the navigation completes, the attached properties are not able to access the element properties to register it for the connected animation. In those case, you can register the element through code behind inside the OnNavigatedTo method. The following extension methods are available:
66+
67+
### RegisterElementForConnectedAnimation(this Page page, string key, UIElement element, IEnumerable\<UIElement> anchors = null)
68+
69+
Registers a UIElement with the ConnectedAnimations service to run automatically on page navigation
70+
71+
### UnregisterElementForConnectedAnimation(this Page page, string key)
72+
73+
Unregisters a UIElement from the ConnectedAnimations service
74+
75+
### AttachAnchorElementForConnectedAnimation(this Page page, UIElement element, UIElement anchor)
76+
77+
Add an anchor element to animate alongside the main element
78+
79+
### RemoveAnchoredElementForConnectedAnimation(this Page page, UIElement element, UIElement anchor)
80+
81+
Remove an anchor element from animating alongside the main element
82+
83+
### RegisterListItemForConnectedAnimation(this Page page, ListViewBase listViewBase, string key, string elementName)
84+
85+
Registers an element (part of a DataTemplate in a list control) with the ConnectedAnimations service to run automatically on page navigation
86+
87+
### UnregisterListItemForConnectedAnimation(this Page page, ListViewBase listViewBase, string key)
88+
89+
Unregisters an element (part of a DataTemplate in a list control) from the ConnectedAnimations service
90+
91+
## Select List Item to be animated
92+
93+
The helper uses the page navigation parameter to decide which list item will be animated during the page navigation. However, in some cases the parameter passed during page navigation is not part of the list. For example, you might be only passing the id of an item as a navigation parameter and not the item itself.
94+
95+
In those cases, you can use the **SetListDataItemForNextConnectedAnnimation** extension method before page navigation to specify which item should be animated.
96+
97+
```csharp
98+
// dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
99+
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
100+
Frame.Navigate(typeof(DetailsPage), dataItemToAnimate.Id);
101+
```
102+
103+
```vb
104+
' dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
105+
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
106+
Frame.Navigate(GetType(DetailsPage), dataItemToAnimate.Id)
107+
```
108+
109+
This method is also helpful when navigating back to an item different from the item it was navigated from.
110+
111+
```csharp
112+
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
113+
Frame.GoBack();
114+
```
115+
116+
```vb
117+
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
118+
Frame.GoBack()
119+
```
120+
121+
## Examples
122+
123+
We can create the above connected animations.
124+
125+
### In first page
126+
127+
We need a set a key for the element to be connected with another element in a different page.
128+
129+
```xaml
130+
<Grid>
131+
<Border Height="100" Width="100" Background="Purple"
132+
VerticalAlignment="Center" HorizontalAlignment="Center"
133+
animations:Connected.Key="item" />
134+
</Grid>
135+
```
136+
137+
### In second page
138+
139+
We need to set the same key for the element to be connected with. Also, You can anchor another element to move along the connected animation path.
140+
141+
```xaml
142+
<StackPanel Orientation="Horizontal">
143+
<Border x:Name="HeroElement" Height="300" Width="300" Background="Purple"
144+
animations:Connected.Key="item"/>
145+
146+
<StackPanel x:Name="HeroDetailsElement" Margin="20,0"
147+
VerticalAlignment="Bottom" MaxWidth="500"
148+
animations:Connected.AnchorElement="{x:Bind HeroElement}">
149+
<TextBlock Text="Header" FontSize="50">Header</TextBlock>
150+
<TextBlock TextWrapping="WrapWholeWords">Lorem ipsum ...</TextBlock>
151+
</StackPanel>
152+
</StackPanel>
153+
```
154+
155+
In this page, we can also create a GridView which implements connected animation for its items. You need to set ListItemKey and ListItemElementName for specifying the UIElement to animate.
156+
157+
```xaml
158+
<GridView x:Name="listView" Margin="0, 40, 0, 0" SelectionMode="None"
159+
Grid.Row="1" ItemClick="ListView_ItemClick" IsItemClickEnabled="True"
160+
animations:Connected.ListItemElementName="ItemThumbnail"
161+
animations:Connected.ListItemKey="listItem">
162+
<GridView.ItemTemplate>
163+
<DataTemplate x:DataType="data:Item">
164+
<StackPanel>
165+
<Border x:Name="ItemThumbnail" Background="Purple" Height="200" Width="200"></Border>
166+
<TextBlock Text="{x:Bind Title}"></TextBlock>
167+
</StackPanel>
168+
</DataTemplate>
169+
</GridView.ItemTemplate>
170+
</GridView>
171+
```
172+
173+
### In third page
174+
175+
In this page, you just need to give the same key.
176+
177+
```xaml
178+
<StackPanel>
179+
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
180+
<StackPanel x:Name="HeroDetailsElement" Margin="20,0" VerticalAlignment="Bottom" MaxWidth="500"
181+
animations:Connected.AnchorElement="{x:Bind ItemHeroElement}">
182+
<TextBlock Text="{x:Bind item.Title}"
183+
FontSize="50"/>
184+
<TextBlock TextWrapping="WrapWholeWords">Lorem ipsum ...</TextBlock>
185+
</StackPanel>
186+
187+
<Border x:Name="ItemHeroElement" Height="300" Width="300" Background="Purple"
188+
animations:Connected.Key="listItem"/>
189+
</StackPanel>
190+
191+
<TextBlock Margin="0,40" TextWrapping="WrapWholeWords">Lorem Ipsum ...</TextBlock>
192+
</StackPanel>
193+
```
194+

‎components/Animations/samples/ConnectedAnimations/FirstPage.xaml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<Page x:Class="AnimationsExperiment.Samples.ConnectedAnimations.FirstPage"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7+
mc:Ignorable="d">
8+
9+
<StackPanel Margin="32"
10+
Orientation="Vertical"
11+
Spacing="32">
12+
13+
<TextBlock HorizontalAlignment="Center"
14+
VerticalAlignment="Top"
15+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
16+
Text="This is the first page, Click or Tap the box to navigate to the next page" />
17+
18+
<Border Width="120"
19+
Height="120"
20+
HorizontalAlignment="Center"
21+
VerticalAlignment="Center"
22+
animations:Connected.Key="item"
23+
Background="{ThemeResource AccentFillColorDefaultBrush}"
24+
CornerRadius="{StaticResource ControlCornerRadius}"
25+
Tapped="Border_Tapped" />
26+
</StackPanel>
27+
</Page>

‎components/Animations/samples/ConnectedAnimations/FirstPage.xaml.cs

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace AnimationsExperiment.Samples.ConnectedAnimations;
6+
7+
public sealed partial class FirstPage : Page
8+
{
9+
public FirstPage()
10+
{
11+
this.InitializeComponent();
12+
}
13+
14+
private void Border_Tapped(object sender, TappedRoutedEventArgs e)
15+
{
16+
Frame.Navigate(typeof(SecondPage), null, new SuppressNavigationTransitionInfo());
17+
}
18+
}

‎components/Animations/samples/ConnectedAnimations/SecondPage.xaml

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<Page x:Class="AnimationsExperiment.Samples.ConnectedAnimations.SecondPage"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:local="using:AnimationsExperiment.Samples.ConnectedAnimations"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
10+
<Grid Padding="32"
11+
RowSpacing="36">
12+
<Grid.RowDefinitions>
13+
<RowDefinition Height="Auto" />
14+
<RowDefinition Height="*" />
15+
</Grid.RowDefinitions>
16+
<StackPanel Orientation="Horizontal">
17+
18+
<Border x:Name="HeroElement"
19+
Width="120"
20+
Height="120"
21+
animations:Connected.Key="item"
22+
Background="{ThemeResource AccentFillColorDefaultBrush}"
23+
CornerRadius="{StaticResource ControlCornerRadius}" />
24+
25+
<StackPanel x:Name="HeroDetailsElement"
26+
MaxWidth="500"
27+
Margin="24,0"
28+
VerticalAlignment="Bottom"
29+
animations:Connected.AnchorElement="{x:Bind HeroElement}">
30+
<TextBlock Style="{StaticResource TitleTextBlockStyle}"
31+
Text="Header" />
32+
<TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}"
33+
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend ex sit amet blandit lobortis. Curabitur ut diam fringilla, interdum massa sit amet, facilisis erat. Donec vulputate sed ex vel pellentesque. In sodales odio non felis interdum viverra. Morbi in mi mollis, ullamcorper nibh sit amet, sagittis ex. Maecenas dapibus commodo venenatis. Donec at egestas est."
34+
TextWrapping="WrapWholeWords" />
35+
</StackPanel>
36+
</StackPanel>
37+
38+
<GridView x:Name="listView"
39+
Grid.Row="1"
40+
animations:Connected.ListItemElementName="ItemThumbnail"
41+
animations:Connected.ListItemKey="listItem"
42+
IsItemClickEnabled="True"
43+
ItemClick="ListView_ItemClick"
44+
SelectionMode="None">
45+
<GridView.ItemTemplate>
46+
<DataTemplate x:DataType="local:PhotoDataItem">
47+
<Grid Width="120"
48+
Height="120">
49+
<Image x:Name="ItemThumbnail"
50+
Source="{x:Bind Thumbnail}"
51+
Stretch="UniformToFill" />
52+
<Border Padding="8"
53+
VerticalAlignment="Bottom"
54+
Background="{ThemeResource ControlOnImageFillColorDefaultBrush}">
55+
<TextBlock FontSize="14"
56+
Text="{x:Bind Title}" />
57+
</Border>
58+
</Grid>
59+
</DataTemplate>
60+
</GridView.ItemTemplate>
61+
</GridView>
62+
</Grid>
63+
</Page>

0 commit comments

Comments
 (0)