Skip to content

Commit 96a6fe0

Browse files
michael-hawkermichael-hawker
authored
Merge pull request #354 from michael-hawker/llama/transitionhelper
🧪 [Experiment] TransitionHelper
2 parents 7a660f9 + 91f2580 commit 96a6fe0

32 files changed

+2644
-2
lines changed

‎Windows.Toolkit.Common.props‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<Copyright>(c) .NET Foundation and Contributors. All rights reserved.</Copyright>
1010
<PackageProjectUrl>https://github.com/CommunityToolkit/Labs-Windows</PackageProjectUrl>
1111
<PackageReleaseNotes>https://github.com/CommunityToolkit/Labs-Windows/releases</PackageReleaseNotes>
12-
<PackageIcon>Icon.png</PackageIcon>
12+
<!--<PackageIcon>Icon.png</PackageIcon>-->
1313
<PackageIconUrl>https://raw.githubusercontent.com/CommunityToolkit/Labs-Windows/main/nuget.png</PackageIconUrl>
1414
<!-- TODO: Remove when closing https://github.com/CommunityToolkit/Labs-Windows/issues/256 -->
1515
<NoWarn>$(NoWarn);NU1505;NU1504</NoWarn>

‎components/TransitionHelper/OpenSolution.bat‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/TransitionHelper/samples/Assets/Owl2.jpg‎

60.2 KB
Loading

‎components/TransitionHelper/samples/CustomTextScalingCalculator.cs‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
using System.Numerics;
6+
using CommunityToolkit.Labs.WinUI;
7+
8+
#if WINAPPSDK
9+
using CommunityToolkit.WinUI.UI;
10+
#else
11+
using Microsoft.Toolkit.Uwp.UI;
12+
#endif
13+
14+
namespace TransitionHelperExperiment.Samples;
15+
16+
public sealed class CustomTextScalingCalculator : IScalingCalculator
17+
{
18+
/// <inheritdoc/>
19+
public Vector2 GetScaling(UIElement source, UIElement target)
20+
{
21+
var sourceTextElement = source?.FindDescendantOrSelf<TextBlock>();
22+
var targetTextElement = target?.FindDescendantOrSelf<TextBlock>();
23+
if (sourceTextElement is not null && targetTextElement is not null)
24+
{
25+
var scale = targetTextElement.FontSize / sourceTextElement.FontSize;
26+
return new Vector2((float)scale);
27+
}
28+
29+
return new Vector2(1);
30+
}
31+
}

‎components/TransitionHelper/samples/Dependencies.props‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<PackageReference Include="Microsoft.Toolkit.Uwp.UI.Behaviors" Version="7.1.2"/>
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Behaviors" Version="7.1.11"/>
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<PackageReference Include="CommunityToolkit.WinUI.UI.Behaviors" Version="7.1.2"/>
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Behaviors" Version="7.1.100-dev.15.g12261e2626"/>
30+
</ItemGroup>
31+
</Project>

‎components/TransitionHelper/samples/MultiTarget.props‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Project>
2+
<PropertyGroup>
3+
<!--
4+
MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
5+
Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
6+
-->
7+
<MultiTarget>uwp;wasdk</MultiTarget>
8+
</PropertyGroup>
9+
</Project>

‎components/TransitionHelper/samples/TransitionHelper.Samples.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>TransitionHelper</ToolkitComponentName>
4+
</PropertyGroup>
5+
6+
<ItemGroup>
7+
<Content Include="Assets\Owl2.jpg">
8+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
9+
</Content>
10+
</ItemGroup>
11+
12+
<!-- Sets this up as a toolkit component's sample project -->
13+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
14+
</Project>

‎components/TransitionHelper/samples/TransitionHelper.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: TransitionHelper
3+
author: githubaccount
4+
description: An animation helper that morphs between two controls.
5+
keywords: TransitionHelper, Control, Layout
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
discussion-id: 353
11+
issue-id: 0
12+
---
13+
14+
# TransitionHelper
15+
16+
An animation helper that morphs between two controls.
17+
18+
### Example
19+
20+
> [!SAMPLE TransitionHelperFullExample]
21+

‎components/TransitionHelper/samples/TransitionHelperFullExample.xaml‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<Page x:Class="TransitionHelperExperiment.Samples.TransitionHelperFullExample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:i="using:Microsoft.Xaml.Interactivity"
6+
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
7+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
8+
xmlns:local="using:TransitionHelperExperiment.Samples"
9+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10+
mc:Ignorable="d">
11+
12+
<Page.Resources>
13+
<labs:TransitionHelper x:Key="MyTransitionHelper">
14+
<labs:TransitionConfig Id="background"
15+
ScaleMode="Scale" />
16+
<labs:TransitionConfig Id="image"
17+
ScaleMode="Scale" />
18+
<labs:TransitionConfig Id="name"
19+
ScaleMode="Custom">
20+
<labs:TransitionConfig.CustomScalingCalculator>
21+
<local:CustomTextScalingCalculator />
22+
</labs:TransitionConfig.CustomScalingCalculator>
23+
</labs:TransitionConfig>
24+
<labs:TransitionConfig EnableClipAnimation="true"
25+
Id="desc" />
26+
</labs:TransitionHelper>
27+
28+
<ImageBrush x:Key="ImageBackgroundBrush"
29+
ImageSource="ms-appx:///Assets/Owl2.jpg" />
30+
</Page.Resources>
31+
<Grid>
32+
<StackPanel x:Name="FirstControl"
33+
Margin="100,50"
34+
HorizontalAlignment="Left"
35+
VerticalAlignment="Top"
36+
Orientation="Horizontal"
37+
Spacing="10">
38+
<Grid Width="50"
39+
Height="50">
40+
<Border labs:TransitionHelper.Id="background"
41+
Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
42+
CornerRadius="4" />
43+
<Border Width="36"
44+
Height="36"
45+
labs:TransitionHelper.Id="image"
46+
Background="{StaticResource ImageBackgroundBrush}"
47+
CornerRadius="18" />
48+
</Grid>
49+
<StackPanel labs:TransitionHelper.Id="guide"
50+
Spacing="2">
51+
<Button x:Name="MinToMidButton"
52+
Content="&#xE0AB;"
53+
Style="{StaticResource NavigationBackButtonNormalStyle}">
54+
<i:Interaction.Behaviors>
55+
<ic:EventTriggerBehavior EventName="Click">
56+
<labs:StartTransitionAction Source="{Binding ElementName=FirstControl}"
57+
Target="{Binding ElementName=SecondControl}"
58+
Transition="{StaticResource MyTransitionHelper}" />
59+
</ic:EventTriggerBehavior>
60+
</i:Interaction.Behaviors>
61+
</Button>
62+
<Button x:Name="MinToMaxButton"
63+
Content="&#xE741;"
64+
Style="{StaticResource NavigationBackButtonNormalStyle}">
65+
<i:Interaction.Behaviors>
66+
<ic:EventTriggerBehavior EventName="Click">
67+
<labs:StartTransitionAction Source="{Binding ElementName=FirstControl}"
68+
Target="{Binding ElementName=ThirdControl}"
69+
Transition="{StaticResource MyTransitionHelper}" />
70+
</ic:EventTriggerBehavior>
71+
</i:Interaction.Behaviors>
72+
</Button>
73+
</StackPanel>
74+
</StackPanel>
75+
<Grid x:Name="SecondControl"
76+
Margin="0,100"
77+
HorizontalAlignment="Center"
78+
VerticalAlignment="Top"
79+
Visibility="Collapsed">
80+
<Border labs:TransitionHelper.Id="background"
81+
Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
82+
CornerRadius="8" />
83+
<StackPanel Padding="20"
84+
Orientation="Horizontal"
85+
Spacing="20">
86+
<Border Width="50"
87+
Height="50"
88+
labs:TransitionHelper.Id="image"
89+
Background="{StaticResource ImageBackgroundBrush}"
90+
CornerRadius="25" />
91+
<StackPanel Width="400"
92+
VerticalAlignment="Center"
93+
Spacing="5">
94+
<TextBlock labs:TransitionHelper.Id="name">Magic</TextBlock>
95+
<TextBlock labs:TransitionHelper.Id="desc">Magic is a cute 😺.</TextBlock>
96+
</StackPanel>
97+
<StackPanel labs:TransitionHelper.Id="guide"
98+
Orientation="Horizontal"
99+
Spacing="2">
100+
<Button Content="&#xE845;"
101+
Style="{StaticResource NavigationBackButtonNormalStyle}">
102+
<i:Interaction.Behaviors>
103+
<ic:EventTriggerBehavior EventName="Click">
104+
<labs:ReverseTransitionAction Transition="{StaticResource MyTransitionHelper}" />
105+
</ic:EventTriggerBehavior>
106+
</i:Interaction.Behaviors>
107+
</Button>
108+
<Button x:Name="MidToMinButton"
109+
Content="&#xE72B;"
110+
Style="{StaticResource NavigationBackButtonNormalStyle}">
111+
<i:Interaction.Behaviors>
112+
<ic:EventTriggerBehavior EventName="Click">
113+
<labs:StartTransitionAction Source="{Binding ElementName=SecondControl}"
114+
Target="{Binding ElementName=FirstControl}"
115+
Transition="{StaticResource MyTransitionHelper}" />
116+
</ic:EventTriggerBehavior>
117+
</i:Interaction.Behaviors>
118+
</Button>
119+
<Button x:Name="MidToMaxButton"
120+
Content="&#xE74B;"
121+
Style="{StaticResource NavigationBackButtonNormalStyle}">
122+
<i:Interaction.Behaviors>
123+
<ic:EventTriggerBehavior EventName="Click">
124+
<labs:StartTransitionAction Source="{Binding ElementName=SecondControl}"
125+
Target="{Binding ElementName=ThirdControl}"
126+
Transition="{StaticResource MyTransitionHelper}" />
127+
</ic:EventTriggerBehavior>
128+
</i:Interaction.Behaviors>
129+
</Button>
130+
</StackPanel>
131+
</StackPanel>
132+
</Grid>
133+
<Grid x:Name="ThirdControl"
134+
HorizontalAlignment="Center"
135+
VerticalAlignment="Center"
136+
Visibility="Collapsed">
137+
<Border labs:TransitionHelper.Id="background"
138+
Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
139+
CornerRadius="8" />
140+
<StackPanel Padding="20"
141+
HorizontalAlignment="Center"
142+
Spacing="20">
143+
<Border Width="80"
144+
Height="80"
145+
labs:TransitionHelper.Id="image"
146+
Background="{StaticResource ImageBackgroundBrush}"
147+
CornerRadius="40" />
148+
<StackPanel Spacing="5">
149+
<TextBlock MaxWidth="200"
150+
HorizontalAlignment="Center"
151+
labs:TransitionHelper.Id="name"
152+
FontSize="24"
153+
TextAlignment="Center"
154+
TextWrapping="Wrap">
155+
Magic is my cat's name
156+
</TextBlock>
157+
<TextBlock HorizontalAlignment="Center"
158+
labs:TransitionHelper.Id="desc">
159+
Magic is a cute 😺, but sometimes very naughty.
160+
</TextBlock>
161+
</StackPanel>
162+
<StackPanel Padding="50,100"
163+
labs:TransitionHelper.IsIndependent="True">
164+
<Rectangle Width="200"
165+
Height="20"
166+
Margin="10"
167+
HorizontalAlignment="Left"
168+
Fill="Silver"
169+
Opacity="0.6"
170+
RadiusX="5"
171+
RadiusY="5" />
172+
<Rectangle Width="300"
173+
Height="20"
174+
Margin="10"
175+
HorizontalAlignment="Left"
176+
Fill="Silver"
177+
Opacity="0.6"
178+
RadiusX="5"
179+
RadiusY="5" />
180+
<Rectangle Width="200"
181+
Height="20"
182+
Margin="10"
183+
HorizontalAlignment="Left"
184+
Fill="Silver"
185+
Opacity="0.6"
186+
RadiusX="5"
187+
RadiusY="5" />
188+
<Rectangle Width="400"
189+
Height="20"
190+
Margin="10"
191+
HorizontalAlignment="Left"
192+
Fill="Silver"
193+
Opacity="0.6"
194+
RadiusX="5"
195+
RadiusY="5" />
196+
</StackPanel>
197+
</StackPanel>
198+
<StackPanel Margin="10"
199+
HorizontalAlignment="Right"
200+
VerticalAlignment="Top"
201+
labs:TransitionHelper.Id="guide"
202+
Orientation="Horizontal"
203+
Spacing="2">
204+
<Button Content="&#xE845;"
205+
Style="{StaticResource NavigationBackButtonNormalStyle}">
206+
<i:Interaction.Behaviors>
207+
<ic:EventTriggerBehavior EventName="Click">
208+
<labs:ReverseTransitionAction Transition="{StaticResource MyTransitionHelper}" />
209+
</ic:EventTriggerBehavior>
210+
</i:Interaction.Behaviors>
211+
</Button>
212+
<Button x:Name="MaxToMinButton"
213+
Content="&#xE742;"
214+
Style="{StaticResource NavigationBackButtonNormalStyle}">
215+
<i:Interaction.Behaviors>
216+
<ic:EventTriggerBehavior EventName="Click">
217+
<labs:StartTransitionAction Source="{Binding ElementName=ThirdControl}"
218+
Target="{Binding ElementName=FirstControl}"
219+
Transition="{StaticResource MyTransitionHelper}" />
220+
</ic:EventTriggerBehavior>
221+
</i:Interaction.Behaviors>
222+
</Button>
223+
<Button x:Name="MaxToMidButton"
224+
Content="&#xE74A;"
225+
Style="{StaticResource NavigationBackButtonNormalStyle}">
226+
<i:Interaction.Behaviors>
227+
<ic:EventTriggerBehavior EventName="Click">
228+
<labs:StartTransitionAction Source="{Binding ElementName=ThirdControl}"
229+
Target="{Binding ElementName=SecondControl}"
230+
Transition="{StaticResource MyTransitionHelper}" />
231+
</ic:EventTriggerBehavior>
232+
</i:Interaction.Behaviors>
233+
</Button>
234+
</StackPanel>
235+
</Grid>
236+
</Grid>
237+
</Page>

‎components/TransitionHelper/samples/TransitionHelperFullExample.xaml.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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 TransitionHelperExperiment.Samples;
6+
7+
/// <summary>
8+
/// An empty page that can be used on its own or navigated to within a Frame.
9+
/// </summary>
10+
[ToolkitSample(id: nameof(TransitionHelperFullExample), "TransitionHelper Detailed Example", description: "A detailed example of how to use the TransitionHelper with multiple elements to transition between.")]
11+
public sealed partial class TransitionHelperFullExample : Page
12+
{
13+
public TransitionHelperFullExample()
14+
{
15+
this.InitializeComponent();
16+
}
17+
}

0 commit comments

Comments
 (0)