NavigationPageModalTransitionsPage.xaml.cs 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. using System;
  2. using Avalonia.Animation;
  3. using Avalonia.Controls;
  4. using Avalonia.Interactivity;
  5. using Avalonia.Layout;
  6. using Avalonia.Media;
  7. namespace ControlCatalog.Pages
  8. {
  9. public partial class NavigationPageModalTransitionsPage : UserControl
  10. {
  11. private static readonly SolidColorBrush[] ModalColors =
  12. [
  13. new SolidColorBrush(Color.FromRgb(237, 231, 246)),
  14. new SolidColorBrush(Color.FromRgb(255, 243, 224)),
  15. new SolidColorBrush(Color.FromRgb(224, 247, 250)),
  16. new SolidColorBrush(Color.FromRgb(232, 245, 233)),
  17. new SolidColorBrush(Color.FromRgb(255, 235, 238)),
  18. new SolidColorBrush(Color.FromRgb(227, 242, 253)),
  19. ];
  20. private int _modalCount;
  21. private bool _initialized;
  22. public NavigationPageModalTransitionsPage()
  23. {
  24. InitializeComponent();
  25. Loaded += OnLoaded;
  26. }
  27. private async void OnLoaded(object? sender, RoutedEventArgs e)
  28. {
  29. if (_initialized)
  30. {
  31. UpdateTransition();
  32. return;
  33. }
  34. _initialized = true;
  35. await DemoNav.PushAsync(new ContentPage
  36. {
  37. Header = "Modal Transitions",
  38. Content = new TextBlock
  39. {
  40. Text = "Select a modal transition type and tap 'Open Modal'.",
  41. FontSize = 13,
  42. Opacity = 0.7,
  43. TextWrapping = TextWrapping.Wrap,
  44. TextAlignment = TextAlignment.Center,
  45. MaxWidth = 260,
  46. HorizontalAlignment = HorizontalAlignment.Center,
  47. VerticalAlignment = VerticalAlignment.Center
  48. },
  49. HorizontalContentAlignment = HorizontalAlignment.Stretch,
  50. VerticalContentAlignment = VerticalAlignment.Stretch
  51. }, null);
  52. UpdateTransition();
  53. }
  54. private void OnTransitionChanged(object? sender, SelectionChangedEventArgs e) => UpdateTransition();
  55. private void OnDurationChanged(object? sender, Avalonia.Controls.Primitives.RangeBaseValueChangedEventArgs e)
  56. {
  57. if (DurationLabel == null)
  58. return;
  59. DurationLabel.Text = $"{(int)DurationSlider.Value} ms";
  60. UpdateTransition();
  61. }
  62. private async void OnOpenModal(object? sender, RoutedEventArgs e)
  63. {
  64. _modalCount++;
  65. var modal = new ContentPage
  66. {
  67. Header = $"Modal {_modalCount}",
  68. Background = ModalColors[_modalCount % ModalColors.Length],
  69. Content = new StackPanel
  70. {
  71. HorizontalAlignment = HorizontalAlignment.Center,
  72. VerticalAlignment = VerticalAlignment.Center,
  73. Spacing = 8,
  74. Children =
  75. {
  76. new TextBlock
  77. {
  78. Text = $"Modal {_modalCount}",
  79. FontSize = 18,
  80. FontWeight = FontWeight.SemiBold,
  81. HorizontalAlignment = HorizontalAlignment.Center
  82. },
  83. new TextBlock
  84. {
  85. Text = $"Presented with {GetTransitionName()}.",
  86. FontSize = 13,
  87. Opacity = 0.7,
  88. TextWrapping = TextWrapping.Wrap,
  89. TextAlignment = TextAlignment.Center,
  90. MaxWidth = 240
  91. }
  92. }
  93. },
  94. HorizontalContentAlignment = HorizontalAlignment.Stretch,
  95. VerticalContentAlignment = VerticalAlignment.Stretch
  96. };
  97. await DemoNav.PushModalAsync(modal);
  98. StatusText.Text = $"Modals: {DemoNav.ModalStack.Count}";
  99. }
  100. private async void OnPopModal(object? sender, RoutedEventArgs e)
  101. {
  102. await DemoNav.PopModalAsync();
  103. StatusText.Text = $"Modals: {DemoNav.ModalStack.Count}";
  104. }
  105. private void UpdateTransition()
  106. {
  107. if (DemoNav == null)
  108. return;
  109. var duration = TimeSpan.FromMilliseconds(DurationSlider.Value);
  110. DemoNav.ModalTransition = TransitionCombo.SelectedIndex switch
  111. {
  112. 1 => new CrossFade(duration),
  113. 2 => null,
  114. _ => new PageSlide(duration, PageSlide.SlideAxis.Vertical)
  115. };
  116. }
  117. private string GetTransitionName() => TransitionCombo.SelectedIndex switch
  118. {
  119. 1 => "CrossFade",
  120. 2 => "no transition",
  121. _ => "PageSlide (from Bottom)"
  122. };
  123. }
  124. }