From 8604e02ff3cdf95c348345bde0a9f22e6776a947 Mon Sep 17 00:00:00 2001 From: Mahdi Hosseini Date: Tue, 24 Dec 2024 15:14:48 +0330 Subject: [PATCH] Add TransitioningContentControl --- README.md | 4 + .../TransitionMode.cs | 18 + .../TransitioningContentControl.cs | 125 + dev/DevWinUI.Controls/Themes/Generic.xaml | 16682 ++++++++++------ .../Controls/TransitioningContentControl.xaml | 237 + .../Assets/NavViewMenu/AppData.json | 7 + .../T4Templates/NavigationPageMappings.cs | 1 + .../TransitioningContentControlPage.xaml | 149 + .../TransitioningContentControlPage.xaml.cs | 9 + 9 files changed, 10881 insertions(+), 6351 deletions(-) create mode 100644 dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitionMode.cs create mode 100644 dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitioningContentControl.cs create mode 100644 dev/DevWinUI.Controls/Themes/Styles/Controls/TransitioningContentControl.xaml create mode 100644 dev/DevWinUI.Gallery/Views/Pages/Features/TransitioningContentControlPage.xaml create mode 100644 dev/DevWinUI.Gallery/Views/Pages/Features/TransitioningContentControlPage.xaml.cs diff --git a/README.md b/README.md index 34f64ba..504a850 100644 --- a/README.md +++ b/README.md @@ -150,6 +150,7 @@ Install-Package DevWinUI ## 🔥 DevWinUI.Controls 🔥 ### ⚡ What’s Inside? ⚡ +- ✨ TransitioningContentControl - ✨ DateTimePicker - ✨ CalendarWithClock - ✨ Clock @@ -254,6 +255,9 @@ Install-Package DevWinUI.ContextMenu ## 🕰️ History 🕰️ +### TransitioningContentControl +![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/TransitioningContentControl.gif) + ### DateTimePicker ![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/DateTimePicker.gif) diff --git a/dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitionMode.cs b/dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitionMode.cs new file mode 100644 index 0000000..d00dde4 --- /dev/null +++ b/dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitionMode.cs @@ -0,0 +1,18 @@ +namespace DevWinUI; +public enum TransitionMode +{ + Right2Left, + Left2Right, + Bottom2Top, + Top2Bottom, + Right2LeftWithFade, + Left2RightWithFade, + Bottom2TopWithFade, + Top2BottomWithFade, + Fade, + DiagonalSlideWithFade, + ZoomInWithFade, + ScaleDown, + ScaleUp, + Custom +} diff --git a/dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitioningContentControl.cs b/dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitioningContentControl.cs new file mode 100644 index 0000000..b6aff2d --- /dev/null +++ b/dev/DevWinUI.Controls/Controls/TransitioningContentControl/TransitioningContentControl.cs @@ -0,0 +1,125 @@ +namespace DevWinUI; +public partial class TransitioningContentControl : ContentControl +{ + private FrameworkElement _contentPresenter; + private Storyboard _storyboardBuildIn; + private long _visibilityToken; + + public TransitioningContentControl() + { + Loaded += TransitioningContentControl_Loaded; + Unloaded += TransitioningContentControl_Unloaded; + } + + public static readonly DependencyProperty TransitionModeProperty = DependencyProperty.Register( + nameof(TransitionMode), typeof(TransitionMode), typeof(TransitioningContentControl), + new PropertyMetadata(TransitionMode.Right2Left, OnTransitionModeChanged)); + + private static void OnTransitionModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) + { + var ctl = (TransitioningContentControl)d; + ctl.OnTransitionModeChanged((TransitionMode)e.NewValue); + } + + private void OnTransitionModeChanged(TransitionMode newValue) + { + _storyboardBuildIn = TryGetResource($"{newValue}Transition"); + StartTransition(); + } + + public TransitionMode TransitionMode + { + get => (TransitionMode)GetValue(TransitionModeProperty); + set => SetValue(TransitionModeProperty, value); + } + + public static readonly DependencyProperty TransitionStoryboardProperty = DependencyProperty.Register( + nameof(TransitionStoryboard), typeof(Storyboard), typeof(TransitioningContentControl), new PropertyMetadata(default(Storyboard))); + + public Storyboard TransitionStoryboard + { + get => (Storyboard)GetValue(TransitionStoryboardProperty); + set => SetValue(TransitionStoryboardProperty, value); + } + + private void TransitioningContentControl_Loaded(object sender, RoutedEventArgs e) + { + _visibilityToken = RegisterPropertyChangedCallback(VisibilityProperty, OnVisibilityChanged); + } + + private void TransitioningContentControl_Unloaded(object sender, RoutedEventArgs e) + { + UnregisterPropertyChangedCallback(VisibilityProperty, _visibilityToken); + } + + private void OnVisibilityChanged(DependencyObject sender, DependencyProperty dp) + { + if (dp == VisibilityProperty) + { + StartTransition(); + } + } + + private void StartTransition() + { + if (_contentPresenter == null || Visibility != Visibility.Visible) + return; + + var storyboard = TransitionStoryboard ?? _storyboardBuildIn; + + if (storyboard != null) + { + try + { + storyboard.Stop(); // Stop any active animation before starting a new one + Storyboard.SetTarget(storyboard, _contentPresenter); + storyboard.Begin(); + } + catch (Exception) + { + } + } + } + + protected override void OnApplyTemplate() + { + base.OnApplyTemplate(); + + _contentPresenter = VisualTreeHelper.GetChild(this, 0) as FrameworkElement; + if (_contentPresenter != null) + { + _contentPresenter.RenderTransformOrigin = new Windows.Foundation.Point(0.5, 0.5); + _contentPresenter.RenderTransform = new TransformGroup + { + Children = + { + new ScaleTransform(), + new SkewTransform(), + new RotateTransform(), + new TranslateTransform() + } + }; + } + + StartTransition(); + } + + protected override void OnContentChanged(object oldContent, object newContent) + { + base.OnContentChanged(oldContent, newContent); + + if (newContent != null) + { + StartTransition(); + } + } + + private TResource TryGetResource(string key) where TResource : class + { + if (Application.Current.Resources.TryGetValue(key, out var resource) && resource is TResource typedResource) + { + return typedResource; + } + return null; + } +} diff --git a/dev/DevWinUI.Controls/Themes/Generic.xaml b/dev/DevWinUI.Controls/Themes/Generic.xaml index 0752196..3edf645 100644 --- a/dev/DevWinUI.Controls/Themes/Generic.xaml +++ b/dev/DevWinUI.Controls/Themes/Generic.xaml @@ -3,6382 +3,10362 @@ Changes to this file may cause incorrect behavior and will be lost if the code is regenerated. --> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Transparent - - - - - - - - - - - - - - - - 1 - - - - - - - - - - 32 - 1 - 16,16,16,16 - 148 - 68 - 12 - 20 - 0 - 120 - 2,0,20,0 - 14,0,0,0 - 13 - 8 - 476 - 286 - Show all settings - 16,16,4,16 - 58,8,44,8 - 0,1,0,0 - 58,8,16,8 - 16 - 32 - 32 - - - - - - - - - - - - - - - - - - - - - - - 14 - 12 - 641 - 12 - 12 - - - - - - - 340 - - - - - 16 - 12 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Transparent + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 32 + 1 + 16,16,16,16 + 148 + 68 + 12 + 20 + 0 + 120 + 2,0,20,0 + 14,0,0,0 + 13 + 8 + 476 + 286 + Show all settings + 16,16,4,16 + 58,8,44,8 + 0,1,0,0 + 58,8,16,8 + 16 + 32 + 32 + + + + + + + + + + + + + + + + + + + + + + + 14 + 12 + 641 + 12 + 12 + + + + + + + 340 + + + + + 16 + 12 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 32 + 42 + + -1 + 12,5,12,2 + 12,5,12,5 + 3, 3, 1, 3 + 1, 3, 1, 3 + 1, 3, 3, 3 + 3, 1, 3, 3 + 3, 1, 3, 1 + 3, 3, 3, 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Visible - - - - - - - - - - - - - - - Visible - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Visible - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Visible + + + + + + + + + + + + + + + Visible + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Visible + + + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +