Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🧪 [Experiment] TransitionHelper #354

Merged
merged 8 commits into from
Mar 29, 2023
Merged

🧪 [Experiment] TransitionHelper #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
710ba64
Create new TransitionHelper experiment
michael-hawker Dec 16, 2022
befa674
Initial port of code from TransitionHelper PR https://github.com/Comm…
HHChaos Dec 16, 2022
3ffa82e
TransitionHelper - Fix rest of issues with Samples/Tests to get build…
michael-hawker Jan 11, 2023
90559b8
Migrated TransitionHelper to new infrastructure
Arlodotexe Feb 24, 2023
aad5839
Use ImageBrush as resource instead of on each border to work around a…
michael-hawker Jan 12, 2023
12abffe
Update for common to tooling folder rename
michael-hawker Mar 14, 2023
9fc3ca8
Disable warning for CA1001 with disposible in TransitionHelper
michael-hawker Mar 14, 2023
91f2580
Rename Owl.jpg to Owl2.jpg to avoid conflict for now
michael-hawker Mar 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Windows.Toolkit.Common.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<Copyright>(c) .NET Foundation and Contributors. All rights reserved.</Copyright>
<PackageProjectUrl>https://github.com/CommunityToolkit/Labs-Windows</PackageProjectUrl>
<PackageReleaseNotes>https://github.com/CommunityToolkit/Labs-Windows/releases</PackageReleaseNotes>
<PackageIcon>Icon.png</PackageIcon>
<!--<PackageIcon>Icon.png</PackageIcon>-->
<PackageIconUrl>https://raw.githubusercontent.com/CommunityToolkit/Labs-Windows/main/nuget.png</PackageIconUrl>
<!-- TODO: Remove when closing https://github.com/CommunityToolkit/Labs-Windows/issues/256 -->
<NoWarn>$(NoWarn);NU1505;NU1504</NoWarn>
Expand Down
3 changes: 3 additions & 0 deletions components/TransitionHelper/OpenSolution.bat
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@ECHO OFF

powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*
Binary file added components/TransitionHelper/samples/Assets/Owl2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions components/TransitionHelper/samples/CustomTextScalingCalculator.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// 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 System.Numerics;
using CommunityToolkit.Labs.WinUI;

#if WINAPPSDK
using CommunityToolkit.WinUI.UI;
#else
using Microsoft.Toolkit.Uwp.UI;
#endif

namespace TransitionHelperExperiment.Samples;

public sealed class CustomTextScalingCalculator : IScalingCalculator
{
/// <inheritdoc/>
public Vector2 GetScaling(UIElement source, UIElement target)
{
var sourceTextElement = source?.FindDescendantOrSelf<TextBlock>();
var targetTextElement = target?.FindDescendantOrSelf<TextBlock>();
if (sourceTextElement is not null && targetTextElement is not null)
{
var scale = targetTextElement.FontSize / sourceTextElement.FontSize;
return new Vector2((float)scale);
}

return new Vector2(1);
}
}
31 changes: 31 additions & 0 deletions components/TransitionHelper/samples/Dependencies.props
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!--
WinUI 2 under UWP uses TargetFramework uap10.0.*
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.

MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.

For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
For UWP / WinAppSDK / Uno packages, place the package references here.
-->
<Project>
<!-- WinUI 2 / UWP -->
<ItemGroup Condition="'$(IsUwp)' == 'true'">
<PackageReference Include="Microsoft.Toolkit.Uwp.UI.Behaviors" Version="7.1.2"/>
</ItemGroup>

<!-- WinUI 2 / Uno -->
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
<PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Behaviors" Version="7.1.11"/>
</ItemGroup>

<!-- WinUI 3 / WinAppSdk -->
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
<PackageReference Include="CommunityToolkit.WinUI.UI.Behaviors" Version="7.1.2"/>
</ItemGroup>

<!-- WinUI 3 / Uno -->
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
<PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Behaviors" Version="7.1.100-dev.15.g12261e2626"/>
</ItemGroup>
</Project>
9 changes: 9 additions & 0 deletions components/TransitionHelper/samples/MultiTarget.props
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<Project>
<PropertyGroup>
<!--
MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
-->
<MultiTarget>uwp;wasdk</MultiTarget>
</PropertyGroup>
</Project>
14 changes: 14 additions & 0 deletions components/TransitionHelper/samples/TransitionHelper.Samples.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
<PropertyGroup>
<ToolkitComponentName>TransitionHelper</ToolkitComponentName>
</PropertyGroup>

<ItemGroup>
<Content Include="Assets\Owl2.jpg">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>

<!-- Sets this up as a toolkit component's sample project -->
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
</Project>
21 changes: 21 additions & 0 deletions components/TransitionHelper/samples/TransitionHelper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: TransitionHelper
author: githubaccount
description: An animation helper that morphs between two controls.
keywords: TransitionHelper, Control, Layout
dev_langs:
- csharp
category: Controls
subcategory: Layout
discussion-id: 353
issue-id: 0
---

# TransitionHelper

An animation helper that morphs between two controls.

### Example

> [!SAMPLE TransitionHelperFullExample]

237 changes: 237 additions & 0 deletions components/TransitionHelper/samples/TransitionHelperFullExample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
<Page x:Class="TransitionHelperExperiment.Samples.TransitionHelperFullExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
xmlns:local="using:TransitionHelperExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
<labs:TransitionHelper x:Key="MyTransitionHelper">
<labs:TransitionConfig Id="background"
ScaleMode="Scale" />
<labs:TransitionConfig Id="image"
ScaleMode="Scale" />
<labs:TransitionConfig Id="name"
ScaleMode="Custom">
<labs:TransitionConfig.CustomScalingCalculator>
<local:CustomTextScalingCalculator />
</labs:TransitionConfig.CustomScalingCalculator>
</labs:TransitionConfig>
<labs:TransitionConfig EnableClipAnimation="true"
Id="desc" />
</labs:TransitionHelper>

<ImageBrush x:Key="ImageBackgroundBrush"
ImageSource="ms-appx:///Assets/Owl2.jpg" />
</Page.Resources>
<Grid>
<StackPanel x:Name="FirstControl"
Margin="100,50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Orientation="Horizontal"
Spacing="10">
<Grid Width="50"
Height="50">
<Border labs:TransitionHelper.Id="background"
Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
CornerRadius="4" />
<Border Width="36"
Height="36"
labs:TransitionHelper.Id="image"
Background="{StaticResource ImageBackgroundBrush}"
CornerRadius="18" />
</Grid>
<StackPanel labs:TransitionHelper.Id="guide"
Spacing="2">
<Button x:Name="MinToMidButton"
Content="&#xE0AB;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:StartTransitionAction Source="{Binding ElementName=FirstControl}"
Target="{Binding ElementName=SecondControl}"
Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<Button x:Name="MinToMaxButton"
Content="&#xE741;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:StartTransitionAction Source="{Binding ElementName=FirstControl}"
Target="{Binding ElementName=ThirdControl}"
Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
</StackPanel>
</StackPanel>
<Grid x:Name="SecondControl"
Margin="0,100"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Visibility="Collapsed">
<Border labs:TransitionHelper.Id="background"
Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
CornerRadius="8" />
<StackPanel Padding="20"
Orientation="Horizontal"
Spacing="20">
<Border Width="50"
Height="50"
labs:TransitionHelper.Id="image"
Background="{StaticResource ImageBackgroundBrush}"
CornerRadius="25" />
<StackPanel Width="400"
VerticalAlignment="Center"
Spacing="5">
<TextBlock labs:TransitionHelper.Id="name">Magic</TextBlock>
<TextBlock labs:TransitionHelper.Id="desc">Magic is a cute 😺.</TextBlock>
</StackPanel>
<StackPanel labs:TransitionHelper.Id="guide"
Orientation="Horizontal"
Spacing="2">
<Button Content="&#xE845;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:ReverseTransitionAction Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<Button x:Name="MidToMinButton"
Content="&#xE72B;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:StartTransitionAction Source="{Binding ElementName=SecondControl}"
Target="{Binding ElementName=FirstControl}"
Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<Button x:Name="MidToMaxButton"
Content="&#xE74B;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:StartTransitionAction Source="{Binding ElementName=SecondControl}"
Target="{Binding ElementName=ThirdControl}"
Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Grid x:Name="ThirdControl"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed">
<Border labs:TransitionHelper.Id="background"
Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
CornerRadius="8" />
<StackPanel Padding="20"
HorizontalAlignment="Center"
Spacing="20">
<Border Width="80"
Height="80"
labs:TransitionHelper.Id="image"
Background="{StaticResource ImageBackgroundBrush}"
CornerRadius="40" />
<StackPanel Spacing="5">
<TextBlock MaxWidth="200"
HorizontalAlignment="Center"
labs:TransitionHelper.Id="name"
FontSize="24"
TextAlignment="Center"
TextWrapping="Wrap">
Magic is my cat's name
</TextBlock>
<TextBlock HorizontalAlignment="Center"
labs:TransitionHelper.Id="desc">
Magic is a cute 😺, but sometimes very naughty.
</TextBlock>
</StackPanel>
<StackPanel Padding="50,100"
labs:TransitionHelper.IsIndependent="True">
<Rectangle Width="200"
Height="20"
Margin="10"
HorizontalAlignment="Left"
Fill="Silver"
Opacity="0.6"
RadiusX="5"
RadiusY="5" />
<Rectangle Width="300"
Height="20"
Margin="10"
HorizontalAlignment="Left"
Fill="Silver"
Opacity="0.6"
RadiusX="5"
RadiusY="5" />
<Rectangle Width="200"
Height="20"
Margin="10"
HorizontalAlignment="Left"
Fill="Silver"
Opacity="0.6"
RadiusX="5"
RadiusY="5" />
<Rectangle Width="400"
Height="20"
Margin="10"
HorizontalAlignment="Left"
Fill="Silver"
Opacity="0.6"
RadiusX="5"
RadiusY="5" />
</StackPanel>
</StackPanel>
<StackPanel Margin="10"
HorizontalAlignment="Right"
VerticalAlignment="Top"
labs:TransitionHelper.Id="guide"
Orientation="Horizontal"
Spacing="2">
<Button Content="&#xE845;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:ReverseTransitionAction Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<Button x:Name="MaxToMinButton"
Content="&#xE742;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:StartTransitionAction Source="{Binding ElementName=ThirdControl}"
Target="{Binding ElementName=FirstControl}"
Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<Button x:Name="MaxToMidButton"
Content="&#xE74A;"
Style="{StaticResource NavigationBackButtonNormalStyle}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Click">
<labs:StartTransitionAction Source="{Binding ElementName=ThirdControl}"
Target="{Binding ElementName=SecondControl}"
Transition="{StaticResource MyTransitionHelper}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
</StackPanel>
</Grid>
</Grid>
</Page>
17 changes: 17 additions & 0 deletions components/TransitionHelper/samples/TransitionHelperFullExample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// 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.

namespace TransitionHelperExperiment.Samples;

/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
[ToolkitSample(id: nameof(TransitionHelperFullExample), "TransitionHelper Detailed Example", description: "A detailed example of how to use the TransitionHelper with multiple elements to transition between.")]
public sealed partial class TransitionHelperFullExample : Page
{
public TransitionHelperFullExample()
{
this.InitializeComponent();
}
}
13 changes: 13 additions & 0 deletions components/TransitionHelper/src/AdditionalAssemblyInfo.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// 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 System.Runtime.CompilerServices;

// These `InternalsVisibleTo` calls are intended to make it easier for
// for any internal code to be testable in all the different test projects
// used with the Labs infrastructure.
[assembly: InternalsVisibleTo("TransitionHelper.Tests.Uwp")]
[assembly: InternalsVisibleTo("TransitionHelper.Tests.WinAppSdk")]
[assembly: InternalsVisibleTo("CommunityToolkit.Labs.Tests.Uwp")]
[assembly: InternalsVisibleTo("CommunityToolkit.Labs.Tests.WinAppSdk")]
Loading