Browse Source
* Added CarouselPage * Renamed DrawerBreakpointWidth to DrawerBreakpointLength * More unit tests * More tests * Improve Carousel gestures * Make SelectionChanged a RoutedEvent * Change TabbedPage IsGestureEnabled to true for consistency * Allow to clear CurrentPage * Reuse Tab Icon Path (perf) * Avoid duplicated ResolvePageAtIndex * More tests * A new showcase * Improve CarouselPage Transitions sample * More changes * Expose IsNavigating * A11y improvements * Updated showcase samples * More changes * Fix vertical carousel page gestures * More tests * More changes in showcases * More changes * Refactor SwipeGestureRecognizer * More changes * More changes * Added new CommandBar Events sample * Avoid duplicated subscriptions in CommandBar * Avoid invalid SelectedIndex values * Avoid duplicated subscription * Fix SwipeGestureRecognizer non needed allocation * Added Easing to stack and modal navigation default transitions * Preserve NavigationPage modal stack across visual tree detach/reattach * More fixes and tests * More changes * Simplify icon logic * More fixes, samples and tests * Fixed tests * Changes based on feedback * Updated test * Fixed tests * Update API suppressions --------- Co-authored-by: Julien Lebosquain <julien@lebosquain.net>pull/20939/head
Javier Suárez
5 months ago
committed by
GitHub
GitHub
120 changed files with 10310 additions and 889 deletions
|
After Width: | Height: | Size: 406 KiB |
|
After Width: | Height: | Size: 450 KiB |
|
After Width: | Height: | Size: 457 KiB |
|
After Width: | Height: | Size: 525 KiB |
|
After Width: | Height: | Size: 324 KiB |
|
After Width: | Height: | Size: 455 KiB |
|
After Width: | Height: | Size: 407 KiB |
@ -0,0 +1,98 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CareCompanionAppPage"> |
|||
<UserControl.Styles> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem"> |
|||
<Setter Property="Width" Value="24" /> |
|||
<Setter Property="Height" Value="24" /> |
|||
<Setter Property="Padding" Value="0" /> |
|||
<Setter Property="Margin" Value="2,0" /> |
|||
<Setter Property="MinWidth" Value="0" /> |
|||
<Setter Property="MinHeight" Value="0" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="VerticalAlignment" Value="Center" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Grid Background="Transparent"> |
|||
<Border Name="Pip" |
|||
Width="6" Height="6" CornerRadius="3" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
Background="#d1d5db"> |
|||
<Border.Transitions> |
|||
<Transitions> |
|||
<DoubleTransition Property="Width" Duration="0:0:0.2" Easing="CubicEaseOut" /> |
|||
<DoubleTransition Property="Height" Duration="0:0:0.2" Easing="CubicEaseOut" /> |
|||
<CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.2" Easing="CubicEaseOut" /> |
|||
<BrushTransition Property="Background" Duration="0:0:0.2" /> |
|||
</Transitions> |
|||
</Border.Transitions> |
|||
</Border> |
|||
</Grid> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:pointerover /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="8" /> |
|||
<Setter Property="Height" Value="8" /> |
|||
<Setter Property="CornerRadius" Value="4" /> |
|||
<Setter Property="Background" Value="#b0b0b0" /> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:selected /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="20" /> |
|||
<Setter Property="Height" Value="6" /> |
|||
<Setter Property="CornerRadius" Value="3" /> |
|||
<Setter Property="Background" Value="#137fec" /> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:selected:pointerover /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="20" /> |
|||
<Setter Property="Height" Value="6" /> |
|||
<Setter Property="CornerRadius" Value="3" /> |
|||
<Setter Property="Background" Value="#0a5bb5" /> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:pressed /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="6" /> |
|||
<Setter Property="Height" Value="6" /> |
|||
<Setter Property="Background" Value="#909090" /> |
|||
</Style> |
|||
</UserControl.Styles> |
|||
<DockPanel> |
|||
<ScrollViewer x:Name="InfoPanel" DockPanel.Dock="Right" Width="300"> |
|||
<StackPanel Margin="16" Spacing="16"> |
|||
|
|||
<TextBlock Text="Care Companion" FontSize="16" FontWeight="SemiBold" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7" |
|||
Text="A patient-focused healthcare companion app. CarouselPage handles onboarding (swipe or tap Next) with PipsPager as custom pill-shaped page indicators. Tapping Skip or Get Started pushes the TabbedPage dashboard and removes the onboarding from the navigation stack." /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Navigation Flow" FontSize="13" FontWeight="SemiBold" /> |
|||
<StackPanel Spacing="4"> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="1. CarouselPage is the NavigationPage root" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="2. Swipe or tap Next to advance pages" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="3. Skip jumps to Get Started page" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="4. Get Started pushes TabbedPage dashboard" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="5. RemovePage(carousel) cleans the stack" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Design" FontSize="13" FontWeight="SemiBold" /> |
|||
<StackPanel Spacing="4"> |
|||
<TextBlock FontSize="12" Text="Primary: #137fec (healthcare blue)" /> |
|||
<TextBlock FontSize="12" Text="Background: #f6f7f8 (off-white)" /> |
|||
<TextBlock FontSize="12" Text="Cards: #ffffff with border" /> |
|||
<TextBlock FontSize="12" Text="Success: #10b981 (streak/done)" /> |
|||
<TextBlock FontSize="12" Text="Roundness: 12-16px corners" /> |
|||
</StackPanel> |
|||
|
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="8" ClipToBounds="True"> |
|||
<NavigationPage x:Name="NavPage" /> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
File diff suppressed because it is too large
@ -0,0 +1,115 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageCustomizationPage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="Slide Direction" FontWeight="SemiBold" FontSize="13" /> |
|||
<ComboBox x:Name="OrientationCombo" SelectedIndex="0" |
|||
SelectionChanged="OnOrientationChanged" |
|||
HorizontalAlignment="Stretch"> |
|||
<ComboBoxItem Content="Horizontal" /> |
|||
<ComboBoxItem Content="Vertical" /> |
|||
</ComboBox> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Navigate" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock x:Name="StatusText" Text="—" Opacity="0.7" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="6" |
|||
ClipToBounds="True"> |
|||
<Panel> |
|||
<CarouselPage x:Name="DemoCarousel"> |
|||
<ContentPage Header="Sunrise" |
|||
Background="#FFFDE68A" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8"> |
|||
<Border Width="64" Height="64" CornerRadius="32" |
|||
Background="#F59E0B" /> |
|||
<TextBlock Text="Sunrise" FontSize="28" FontWeight="Bold" |
|||
Foreground="#92400E" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="A new day begins. Warm golden hues fill the horizon." |
|||
FontSize="13" Foreground="#92400E" Opacity="0.8" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="240" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Ocean" |
|||
Background="#FFBFDBFE" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8"> |
|||
<Border Width="64" Height="64" CornerRadius="32" |
|||
Background="#3B82F6" /> |
|||
<TextBlock Text="Ocean" FontSize="28" FontWeight="Bold" |
|||
Foreground="#1E3A5F" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Vast blue waters stretch beyond what the eye can see." |
|||
FontSize="13" Foreground="#1E3A5F" Opacity="0.8" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="240" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Forest" |
|||
Background="#FFBBF7D0" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8"> |
|||
<Border Width="64" Height="64" CornerRadius="32" |
|||
Background="#22C55E" /> |
|||
<TextBlock Text="Forest" FontSize="28" FontWeight="Bold" |
|||
Foreground="#14532D" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Ancient trees whisper in the quiet woodland breeze." |
|||
FontSize="13" Foreground="#14532D" Opacity="0.8" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="240" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Night" |
|||
Background="#1E1B4B" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8"> |
|||
<Border Width="64" Height="64" CornerRadius="32" |
|||
Background="#6366F1" /> |
|||
<TextBlock Text="Night" FontSize="28" FontWeight="Bold" |
|||
Foreground="#C7D2FE" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Stars emerge as the world quiets into peaceful darkness." |
|||
FontSize="13" Foreground="#C7D2FE" Opacity="0.8" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="240" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
|
|||
<!-- Page indicator dots --> |
|||
<Border VerticalAlignment="Bottom" HorizontalAlignment="Center" |
|||
Margin="0,0,0,12" CornerRadius="8" Background="#44000000" |
|||
Padding="10,4"> |
|||
<StackPanel Orientation="Horizontal" Spacing="6"> |
|||
<Ellipse x:Name="Dot0" Width="8" Height="8" Fill="White" /> |
|||
<Ellipse x:Name="Dot1" Width="8" Height="8" Fill="White" Opacity="0.4" /> |
|||
<Ellipse x:Name="Dot2" Width="8" Height="8" Fill="White" Opacity="0.4" /> |
|||
<Ellipse x:Name="Dot3" Width="8" Height="8" Fill="White" Opacity="0.4" /> |
|||
</StackPanel> |
|||
</Border> |
|||
</Panel> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,79 @@ |
|||
using System; |
|||
using System.Collections; |
|||
using Avalonia.Animation; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageCustomizationPage : UserControl |
|||
{ |
|||
public CarouselPageCustomizationPage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += OnLoaded; |
|||
Unloaded += OnUnloaded; |
|||
} |
|||
|
|||
private void OnLoaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoCarousel.PageTransition = new PageSlide(TimeSpan.FromMilliseconds(300), PageSlide.SlideAxis.Horizontal); |
|||
DemoCarousel.SelectionChanged += OnSelectionChanged; |
|||
UpdateDots(DemoCarousel.SelectedIndex); |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnUnloaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoCarousel.SelectionChanged -= OnSelectionChanged; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) |
|||
{ |
|||
UpdateDots(DemoCarousel.SelectedIndex); |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnOrientationChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (DemoCarousel == null) |
|||
return; |
|||
|
|||
var axis = OrientationCombo.SelectedIndex == 1 |
|||
? PageSlide.SlideAxis.Vertical |
|||
: PageSlide.SlideAxis.Horizontal; |
|||
|
|||
DemoCarousel.PageTransition = new PageSlide(TimeSpan.FromMilliseconds(300), axis); |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnPrevious(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel.SelectedIndex > 0) |
|||
DemoCarousel.SelectedIndex--; |
|||
} |
|||
|
|||
private void OnNext(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
if (DemoCarousel.SelectedIndex < pageCount - 1) |
|||
DemoCarousel.SelectedIndex++; |
|||
} |
|||
|
|||
private void UpdateDots(int selectedIndex) |
|||
{ |
|||
Dot0.Opacity = selectedIndex == 0 ? 1.0 : 0.4; |
|||
Dot1.Opacity = selectedIndex == 1 ? 1.0 : 0.4; |
|||
Dot2.Opacity = selectedIndex == 2 ? 1.0 : 0.4; |
|||
Dot3.Opacity = selectedIndex == 3 ? 1.0 : 0.4; |
|||
} |
|||
|
|||
private void UpdateStatus() |
|||
{ |
|||
if (StatusText == null) return; |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
var axis = OrientationCombo?.SelectedIndex == 1 ? "Vertical" : "Horizontal"; |
|||
StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount} | {axis}"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageDataTemplatePage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="240"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Data Templates" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock FontSize="12" Opacity="0.7" TextWrapping="Wrap" |
|||
Text="Bind a CarouselPage to a view-model collection, render each item with PageTemplate, and switch templates at runtime." /> |
|||
|
|||
<Separator /> |
|||
|
|||
<Button Content="Add Page" Click="OnAddPage" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Remove Last" Click="OnRemovePage" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Switch Template" Click="OnSwitchTemplate" HorizontalAlignment="Stretch" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Navigate" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock x:Name="StatusText" Text="4 pages" Opacity="0.7" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="6" |
|||
ClipToBounds="True"> |
|||
<Panel x:Name="CarouselHost" /> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,209 @@ |
|||
using System.Collections.ObjectModel; |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Templates; |
|||
using Avalonia.Interactivity; |
|||
using Avalonia.Layout; |
|||
using Avalonia.Media; |
|||
using AvaCarouselPage = Avalonia.Controls.CarouselPage; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageDataTemplatePage : UserControl |
|||
{ |
|||
private sealed class CityViewModel |
|||
{ |
|||
public string Name { get; } |
|||
public string Color { get; } |
|||
public string Description { get; } |
|||
|
|||
public CityViewModel(string name, string color, string description) |
|||
{ |
|||
Name = name; |
|||
Color = color; |
|||
Description = description; |
|||
} |
|||
} |
|||
|
|||
private static readonly CityViewModel[] InitialData = |
|||
{ |
|||
new("Tokyo", "#1565C0", |
|||
"The neon-lit capital of Japan, where ancient temples meet futuristic skylines."), |
|||
new("Amsterdam", "#2E7D32", "A city of canals, bicycles, and world-class museums."), |
|||
new("New York", "#6A1B9A", "The city that never sleeps — a cultural and financial powerhouse."), |
|||
new("Sydney", "#B71C1C", "Iconic harbour, golden beaches and the world-famous Opera House."), |
|||
}; |
|||
|
|||
private static readonly CityViewModel[] AddData = |
|||
{ |
|||
new("Paris", "#E65100", "The city of light, love, and the Eiffel Tower."), |
|||
new("Barcelona", "#00695C", "Art, architecture, and vibrant street life on the Mediterranean coast."), |
|||
new("Kyoto", "#880E4F", "Japan's ancient capital, a living museum of traditional culture."), |
|||
}; |
|||
|
|||
private readonly ObservableCollection<CityViewModel> _items = new(); |
|||
private int _addCounter; |
|||
private bool _useCardTemplate = true; |
|||
private AvaCarouselPage? _carouselPage; |
|||
|
|||
public CarouselPageDataTemplatePage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += OnLoaded; |
|||
} |
|||
|
|||
private void OnLoaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (_carouselPage != null) |
|||
return; |
|||
|
|||
foreach (var vm in InitialData) |
|||
_items.Add(vm); |
|||
_addCounter = InitialData.Length; |
|||
_useCardTemplate = true; |
|||
|
|||
_carouselPage = new AvaCarouselPage { ItemsSource = _items, PageTemplate = CreatePageTemplate() }; |
|||
|
|||
_carouselPage.SelectionChanged += OnSelectionChanged; |
|||
CarouselHost.Children.Add(_carouselPage); |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) => UpdateStatus(); |
|||
|
|||
private void OnAddPage(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var idx = _addCounter % AddData.Length; |
|||
var vm = AddData[idx]; |
|||
var suffix = _addCounter >= AddData.Length ? $" {_addCounter / AddData.Length + 1}" : ""; |
|||
_items.Add(new CityViewModel(vm.Name + suffix, vm.Color, vm.Description)); |
|||
_addCounter++; |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnRemovePage(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (_items.Count > 0) |
|||
{ |
|||
_items.RemoveAt(_items.Count - 1); |
|||
UpdateStatus(); |
|||
} |
|||
} |
|||
|
|||
private void OnSwitchTemplate(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (_carouselPage == null) |
|||
return; |
|||
|
|||
_useCardTemplate = !_useCardTemplate; |
|||
_carouselPage.PageTemplate = CreatePageTemplate(); |
|||
} |
|||
|
|||
private void OnPrevious(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (_carouselPage == null) |
|||
return; |
|||
if (_carouselPage.SelectedIndex > 0) |
|||
_carouselPage.SelectedIndex--; |
|||
} |
|||
|
|||
private void OnNext(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (_carouselPage == null) |
|||
return; |
|||
if (_carouselPage.SelectedIndex < _items.Count - 1) |
|||
_carouselPage.SelectedIndex++; |
|||
} |
|||
|
|||
private void UpdateStatus() |
|||
{ |
|||
var count = _items.Count; |
|||
var index = _carouselPage?.SelectedIndex ?? -1; |
|||
StatusText.Text = count == 0 ? "No pages" : $"Page {index + 1} of {count} (index {index})"; |
|||
} |
|||
|
|||
private IDataTemplate CreatePageTemplate() |
|||
{ |
|||
return new FuncDataTemplate<CityViewModel>((vm, _) => CreatePage(vm, _useCardTemplate)); |
|||
} |
|||
|
|||
private static ContentPage CreatePage(CityViewModel? vm, bool useCardTemplate) |
|||
{ |
|||
if (vm is null) |
|||
return new ContentPage(); |
|||
|
|||
return new ContentPage |
|||
{ |
|||
Header = vm.Name, Content = useCardTemplate ? CreateCardContent(vm) : CreateFeatureContent(vm) |
|||
}; |
|||
} |
|||
|
|||
private static Control CreateCardContent(CityViewModel vm) |
|||
{ |
|||
return new StackPanel |
|||
{ |
|||
HorizontalAlignment = HorizontalAlignment.Center, |
|||
VerticalAlignment = VerticalAlignment.Center, |
|||
Spacing = 8, |
|||
Children = |
|||
{ |
|||
new TextBlock |
|||
{ |
|||
Text = vm.Name, |
|||
FontSize = 28, |
|||
FontWeight = FontWeight.Bold, |
|||
Foreground = new SolidColorBrush(Color.Parse(vm.Color)), |
|||
HorizontalAlignment = HorizontalAlignment.Center |
|||
}, |
|||
new TextBlock |
|||
{ |
|||
Text = vm.Description, |
|||
FontSize = 13, |
|||
Opacity = 0.7, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
TextAlignment = TextAlignment.Center, |
|||
MaxWidth = 280 |
|||
} |
|||
} |
|||
}; |
|||
} |
|||
|
|||
private static Control CreateFeatureContent(CityViewModel vm) |
|||
{ |
|||
var accent = Color.Parse(vm.Color); |
|||
|
|||
return new Border |
|||
{ |
|||
Background = new SolidColorBrush(accent), |
|||
Padding = new Thickness(32), |
|||
Child = new StackPanel |
|||
{ |
|||
HorizontalAlignment = HorizontalAlignment.Center, |
|||
VerticalAlignment = VerticalAlignment.Center, |
|||
Spacing = 12, |
|||
Children = |
|||
{ |
|||
new TextBlock |
|||
{ |
|||
Text = vm.Name.ToUpperInvariant(), |
|||
FontSize = 34, |
|||
FontWeight = FontWeight.Bold, |
|||
Foreground = Brushes.White, |
|||
HorizontalAlignment = HorizontalAlignment.Center |
|||
}, |
|||
new TextBlock |
|||
{ |
|||
Text = vm.Description, |
|||
FontSize = 15, |
|||
Foreground = Brushes.White, |
|||
Opacity = 0.88, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
TextAlignment = TextAlignment.Center, |
|||
MaxWidth = 320 |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageEventsPage"> |
|||
<DockPanel> |
|||
<StackPanel DockPanel.Dock="Right" Width="240" Margin="0,0,0,0"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Event Log" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="Navigate" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<Button Content="Clear Log" Click="OnClearLog" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
<Border Height="1" Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
<ScrollViewer x:Name="LogScrollViewer" VerticalScrollBarVisibility="Auto"> |
|||
<TextBlock x:Name="EventLog" Margin="12" FontSize="11" |
|||
FontFamily="Courier New, Consolas, monospace" |
|||
TextWrapping="Wrap" Opacity="0.85" /> |
|||
</ScrollViewer> |
|||
</StackPanel> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="6" ClipToBounds="True"> |
|||
<CarouselPage x:Name="DemoCarousel" /> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,92 @@ |
|||
using System; |
|||
using System.Collections.Generic; |
|||
using Avalonia.Collections; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageEventsPage : UserControl |
|||
{ |
|||
private readonly List<string> _log = new(); |
|||
|
|||
public CarouselPageEventsPage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += OnLoaded; |
|||
Unloaded += OnUnloaded; |
|||
} |
|||
|
|||
private void OnLoaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageNames = new[] { "Home", "Explore", "Library", "Profile" }; |
|||
for (int i = 0; i < pageNames.Length; i++) |
|||
{ |
|||
var name = pageNames[i]; |
|||
var page = new ContentPage |
|||
{ |
|||
Header = name, |
|||
Background = NavigationDemoHelper.GetPageBrush(i), |
|||
Content = new TextBlock |
|||
{ |
|||
Text = $"{name}", |
|||
FontSize = 28, |
|||
FontWeight = Avalonia.Media.FontWeight.Bold, |
|||
HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center, |
|||
VerticalAlignment = Avalonia.Layout.VerticalAlignment.Center |
|||
}, |
|||
HorizontalContentAlignment = Avalonia.Layout.HorizontalAlignment.Stretch, |
|||
VerticalContentAlignment = Avalonia.Layout.VerticalAlignment.Stretch |
|||
}; |
|||
|
|||
page.NavigatedTo += (_, args) => |
|||
AppendLog($"NavigatedTo: {name} (from {(args.PreviousPage as ContentPage)?.Header ?? "—"})"); |
|||
page.NavigatedFrom += (_, args) => |
|||
AppendLog($"NavigatedFrom: {name} (to {(args.DestinationPage as ContentPage)?.Header ?? "—"})"); |
|||
|
|||
((Avalonia.Collections.AvaloniaList<Page>)DemoCarousel.Pages!).Add(page); |
|||
} |
|||
|
|||
DemoCarousel.SelectionChanged += OnSelectionChanged; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) |
|||
{ |
|||
AppendLog($"SelectionChanged: {(e.PreviousPage as ContentPage)?.Header ?? "—"} → {(e.CurrentPage as ContentPage)?.Header ?? "—"}"); |
|||
} |
|||
|
|||
private void OnPrevious(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel.SelectedIndex > 0) |
|||
DemoCarousel.SelectedIndex--; |
|||
} |
|||
|
|||
private void OnNext(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageCount = ((AvaloniaList<Page>)DemoCarousel.Pages!).Count; |
|||
if (DemoCarousel.SelectedIndex < pageCount - 1) |
|||
DemoCarousel.SelectedIndex++; |
|||
} |
|||
|
|||
private void OnUnloaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoCarousel.SelectionChanged -= OnSelectionChanged; |
|||
} |
|||
|
|||
private void OnClearLog(object? sender, RoutedEventArgs e) |
|||
{ |
|||
_log.Clear(); |
|||
EventLog.Text = string.Empty; |
|||
} |
|||
|
|||
private void AppendLog(string message) |
|||
{ |
|||
var timestamp = DateTime.Now.ToString("HH:mm:ss.fff"); |
|||
_log.Add($"[{timestamp}] {message}"); |
|||
if (_log.Count > 50) |
|||
_log.RemoveAt(0); |
|||
EventLog.Text = string.Join(Environment.NewLine, _log); |
|||
LogScrollViewer.ScrollToEnd(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageFirstLookPage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock x:Name="StatusText" Text="Page 1 of 3" Opacity="0.7" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="6" ClipToBounds="True"> |
|||
<CarouselPage x:Name="DemoCarousel" |
|||
SelectionChanged="OnSelectionChanged"> |
|||
<ContentPage Header="Welcome"> |
|||
<StackPanel Margin="24" Spacing="12" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Welcome" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Swipe left or use the buttons to navigate." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Explore"> |
|||
<StackPanel Margin="24" Spacing="12" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Explore" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="CarouselPage supports scroll-based and transition-based navigation modes." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Get Started"> |
|||
<StackPanel Margin="24" Spacing="12" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Get Started" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Use SelectedIndex to jump to any page, or assign a PageTransition for animated switching." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,35 @@ |
|||
using System.Collections; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageFirstLookPage : UserControl |
|||
{ |
|||
public CarouselPageFirstLookPage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
|
|||
private void OnPrevious(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel.SelectedIndex > 0) |
|||
DemoCarousel.SelectedIndex--; |
|||
} |
|||
|
|||
private void OnNext(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
if (DemoCarousel.SelectedIndex < pageCount - 1) |
|||
DemoCarousel.SelectedIndex++; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) |
|||
{ |
|||
if (StatusText == null) |
|||
return; |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageGesturePage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="Gesture Navigation" FontWeight="SemiBold" FontSize="13" /> |
|||
<CheckBox x:Name="GestureCheck" Content="IsGestureEnabled" |
|||
IsChecked="True" IsCheckedChanged="OnGestureChanged" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Keyboard Navigation" FontWeight="SemiBold" FontSize="13" /> |
|||
<CheckBox x:Name="KeyboardCheck" Content="IsKeyboardNavigationEnabled" |
|||
IsChecked="True" IsCheckedChanged="OnKeyboardChanged" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Hints" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock Text="• Swipe left/right to navigate (touch)" FontSize="11" Opacity="0.7" TextWrapping="Wrap" /> |
|||
<TextBlock Text="• Mouse drag (left button) to navigate" FontSize="11" Opacity="0.7" TextWrapping="Wrap" /> |
|||
<TextBlock Text="• Arrow keys / Home / End when focused" FontSize="11" Opacity="0.7" TextWrapping="Wrap" /> |
|||
<TextBlock Text="• Mouse wheel scrolls pages" FontSize="11" Opacity="0.7" TextWrapping="Wrap" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock x:Name="StatusText" Text="—" Opacity="0.7" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="6" ClipToBounds="True"> |
|||
<CarouselPage x:Name="DemoCarousel" |
|||
SelectionChanged="OnSelectionChanged"> |
|||
<CarouselPage.PageTransition> |
|||
<PageSlide Duration="0:0:0.3" Orientation="Horizontal" /> |
|||
</CarouselPage.PageTransition> |
|||
<ContentPage Header="Page 1" Background="#BBDEFB"> |
|||
<TextBlock Text="Page 1 — Swipe or drag to navigate" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="200" FontSize="16" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 2" Background="#C8E6C9"> |
|||
<TextBlock Text="Page 2 — Arrow keys also work when focused" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="200" FontSize="16" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 3" Background="#FFE0B2"> |
|||
<TextBlock Text="Page 3 — Disable gestures using the panel" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="200" FontSize="16" /> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,44 @@ |
|||
using System.Collections; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageGesturePage : UserControl |
|||
{ |
|||
public CarouselPageGesturePage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += OnLoaded; |
|||
} |
|||
|
|||
private void OnLoaded(object? sender, RoutedEventArgs e) => UpdateStatus(); |
|||
|
|||
private void OnGestureChanged(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel == null) |
|||
return; |
|||
DemoCarousel.IsGestureEnabled = GestureCheck.IsChecked == true; |
|||
} |
|||
|
|||
private void OnKeyboardChanged(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel == null) |
|||
return; |
|||
DemoCarousel.IsKeyboardNavigationEnabled = KeyboardCheck.IsChecked == true; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) |
|||
{ |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void UpdateStatus() |
|||
{ |
|||
if (StatusText == null) |
|||
return; |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPagePerformancePage"> |
|||
<Grid ColumnDefinitions="*,240"> |
|||
|
|||
<Border Grid.Column="0" Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="6" |
|||
ClipToBounds="True"> |
|||
<CarouselPage x:Name="DemoCarousel" /> |
|||
</Border> |
|||
|
|||
<Border Grid.Column="1" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1,0,0,0" Padding="12"> |
|||
<ScrollViewer> |
|||
<StackPanel Spacing="8"> |
|||
|
|||
<TextBlock Text="Actions" FontWeight="SemiBold" /> |
|||
<Button Content="Add 5 Pages" HorizontalAlignment="Stretch" Click="OnAdd5" /> |
|||
<Button Content="Add 20 Pages" HorizontalAlignment="Stretch" Click="OnAdd20" /> |
|||
<Button Content="Remove Last 5" HorizontalAlignment="Stretch" Click="OnRemove5" /> |
|||
<Button Content="Clear All" HorizontalAlignment="Stretch" Click="OnClearAll" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<Button Content="Force GC" HorizontalAlignment="Stretch" Click="OnForceGC" /> |
|||
<Button Content="Refresh Stats" HorizontalAlignment="Stretch" Click="OnRefresh" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Statistics" FontWeight="SemiBold" /> |
|||
<TextBlock x:Name="PageCountText" Text="Page count: 0" FontSize="12" /> |
|||
<TextBlock x:Name="LiveCountText" Text="Live instances: 0" FontSize="12" /> |
|||
<TextBlock x:Name="HeapText" Text="Heap: 0 KB" FontSize="12" /> |
|||
<TextBlock x:Name="AllocText" Text="Total allocated: 0 KB" FontSize="12" /> |
|||
<TextBlock x:Name="LastOpTimeText" Text="Last Op: " FontSize="12" /> |
|||
|
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
</Border> |
|||
|
|||
</Grid> |
|||
</UserControl> |
|||
@ -0,0 +1,103 @@ |
|||
using System; |
|||
using System.Collections; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
using Avalonia.Layout; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPagePerformancePage : UserControl |
|||
{ |
|||
private readonly NavigationPerformanceMonitorHelper _perf = new(); |
|||
private int _counter; |
|||
|
|||
public CarouselPagePerformancePage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += OnLoaded; |
|||
Unloaded += OnUnloaded; |
|||
} |
|||
|
|||
private void OnLoaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
AddPages(5); |
|||
DemoCarousel.SelectionChanged += OnSelectionChanged; |
|||
} |
|||
|
|||
private void OnUnloaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoCarousel.SelectionChanged -= OnSelectionChanged; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) => RefreshStats(); |
|||
|
|||
private void AddPages(int count) |
|||
{ |
|||
var pages = (IList)DemoCarousel.Pages!; |
|||
_perf.OpStopwatch.Restart(); |
|||
for (int i = 0; i < count; i++) |
|||
{ |
|||
var idx = ++_counter; |
|||
var page = new ContentPage |
|||
{ |
|||
Header = $"P{idx}", |
|||
Content = new TextBlock |
|||
{ |
|||
Text = $"Page {idx}", |
|||
HorizontalAlignment = HorizontalAlignment.Center, |
|||
VerticalAlignment = VerticalAlignment.Center, |
|||
FontSize = 18, |
|||
Opacity = 0.7 |
|||
}, |
|||
Tag = new byte[51200], |
|||
}; |
|||
_perf.TrackPage(page); |
|||
pages.Add(page); |
|||
} |
|||
|
|||
_perf.StopMetrics(LastOpTimeText); |
|||
RefreshStats(); |
|||
} |
|||
|
|||
private void RemovePages(int count) |
|||
{ |
|||
var pages = (IList)DemoCarousel.Pages!; |
|||
_perf.OpStopwatch.Restart(); |
|||
for (int i = 0; i < count && pages.Count > 0; i++) |
|||
pages.RemoveAt(pages.Count - 1); |
|||
|
|||
_perf.StopMetrics(LastOpTimeText); |
|||
RefreshStats(); |
|||
} |
|||
|
|||
private void OnAdd5(object? sender, RoutedEventArgs e) => AddPages(5); |
|||
private void OnAdd20(object? sender, RoutedEventArgs e) => AddPages(20); |
|||
private void OnRemove5(object? sender, RoutedEventArgs e) => RemovePages(5); |
|||
|
|||
private void OnClearAll(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pages = (IList)DemoCarousel.Pages!; |
|||
_perf.OpStopwatch.Restart(); |
|||
while (pages.Count > 0) |
|||
pages.RemoveAt(pages.Count - 1); |
|||
_perf.StopMetrics(LastOpTimeText); |
|||
RefreshStats(); |
|||
} |
|||
|
|||
private void OnForceGC(object? sender, RoutedEventArgs e) |
|||
{ |
|||
_perf.ForceGC(RefreshStats); |
|||
} |
|||
|
|||
private void OnRefresh(object? sender, RoutedEventArgs e) => RefreshStats(); |
|||
|
|||
private void RefreshStats() |
|||
{ |
|||
var pages = (IList)DemoCarousel.Pages!; |
|||
PageCountText.Text = $"Page count: {pages.Count}"; |
|||
LiveCountText.Text = $"Live instances: {_perf.CountLiveInstances()} / {_perf.TotalCreated} tracked"; |
|||
HeapText.Text = $"Heap: {GC.GetTotalMemory(false) / 1024:N0} KB"; |
|||
AllocText.Text = $"Total allocated: {GC.GetTotalAllocatedBytes() / 1024:N0} KB"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageSelectionPage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="Jump to Page" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="Go to Page 1" Click="OnGoTo0" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Go to Page 2" Click="OnGoTo1" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Go to Page 3" Click="OnGoTo2" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Go to Page 4" Click="OnGoTo3" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Navigate" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="First" Click="OnFirst" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Last" Click="OnLast" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock x:Name="StatusText" Text="—" Opacity="0.7" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="6" ClipToBounds="True"> |
|||
<CarouselPage x:Name="DemoCarousel" |
|||
SelectionChanged="OnSelectionChanged"> |
|||
<ContentPage Header="Onboarding" Background="#BBDEFB"> |
|||
<StackPanel Margin="24" Spacing="8" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Step 1 of 4" FontSize="14" Opacity="0.6" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Onboarding" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Set SelectedIndex to jump directly to any page." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="260" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Features" Background="#C8E6C9"> |
|||
<StackPanel Margin="24" Spacing="8" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Step 2 of 4" FontSize="14" Opacity="0.6" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Features" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Supports scroll, transition, swipe gesture and keyboard navigation." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="260" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Customize" Background="#FFE0B2"> |
|||
<StackPanel Margin="24" Spacing="8" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Step 3 of 4" FontSize="14" Opacity="0.6" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Customize" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Override the ItemsPanel, add any Avalonia Page as a child." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="260" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
<ContentPage Header="Ready" Background="#E1BEE7"> |
|||
<StackPanel Margin="24" Spacing="8" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<TextBlock Text="Step 4 of 4" FontSize="14" Opacity="0.6" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Ready!" FontSize="28" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="You are all set. Use SelectionChanged to react to navigation." |
|||
TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="260" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,56 @@ |
|||
using System.Collections; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageSelectionPage : UserControl |
|||
{ |
|||
public CarouselPageSelectionPage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += (_, _) => UpdateStatus(); |
|||
} |
|||
|
|||
private void OnGoTo0(object? sender, RoutedEventArgs e) => DemoCarousel.SelectedIndex = 0; |
|||
private void OnGoTo1(object? sender, RoutedEventArgs e) => DemoCarousel.SelectedIndex = 1; |
|||
private void OnGoTo2(object? sender, RoutedEventArgs e) => DemoCarousel.SelectedIndex = 2; |
|||
private void OnGoTo3(object? sender, RoutedEventArgs e) => DemoCarousel.SelectedIndex = 3; |
|||
|
|||
private void OnFirst(object? sender, RoutedEventArgs e) => DemoCarousel.SelectedIndex = 0; |
|||
|
|||
private void OnPrevious(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel.SelectedIndex > 0) |
|||
DemoCarousel.SelectedIndex--; |
|||
} |
|||
|
|||
private void OnNext(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
if (DemoCarousel.SelectedIndex < pageCount - 1) |
|||
DemoCarousel.SelectedIndex++; |
|||
} |
|||
|
|||
private void OnLast(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
if (pageCount > 0) |
|||
DemoCarousel.SelectedIndex = pageCount - 1; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) |
|||
{ |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void UpdateStatus() |
|||
{ |
|||
if (StatusText == null) |
|||
return; |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
var header = (DemoCarousel.SelectedPage as ContentPage)?.Header?.ToString() ?? "—"; |
|||
StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}: {header}"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CarouselPageTransitionsPage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="Page Transition" FontWeight="SemiBold" FontSize="13" /> |
|||
<ComboBox x:Name="TransitionCombo" SelectedIndex="0" |
|||
SelectionChanged="OnTransitionChanged" |
|||
HorizontalAlignment="Stretch"> |
|||
<ComboBoxItem Content="None" /> |
|||
<ComboBoxItem Content="CrossFade" /> |
|||
<ComboBoxItem Content="Slide Horizontal" /> |
|||
<ComboBoxItem Content="Slide Vertical" /> |
|||
<ComboBoxItem Content="Card Stack" /> |
|||
<ComboBoxItem Content="Wave Reveal" /> |
|||
</ComboBox> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Navigate" FontWeight="SemiBold" FontSize="13" /> |
|||
<StackPanel Spacing="6"> |
|||
<Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" /> |
|||
<Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock x:Name="StatusText" Text="Page 1 of 4 | Transition: None" |
|||
Opacity="0.7" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="6" ClipToBounds="True"> |
|||
<CarouselPage x:Name="DemoCarousel" |
|||
SelectionChanged="OnSelectionChanged"> |
|||
<ContentPage Header="Page 1" Background="#BBDEFB"> |
|||
<TextBlock Text="Page 1" FontSize="32" FontWeight="Bold" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 2" Background="#C8E6C9"> |
|||
<TextBlock Text="Page 2" FontSize="32" FontWeight="Bold" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 3" Background="#FFE0B2"> |
|||
<TextBlock Text="Page 3" FontSize="32" FontWeight="Bold" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 4" Background="#E1BEE7"> |
|||
<TextBlock Text="Page 4" FontSize="32" FontWeight="Bold" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,69 @@ |
|||
using System; |
|||
using System.Collections; |
|||
using Avalonia.Animation; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
using ControlCatalog.Pages.Transitions; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CarouselPageTransitionsPage : UserControl |
|||
{ |
|||
public CarouselPageTransitionsPage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
|
|||
private void OnTransitionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (DemoCarousel == null) |
|||
return; |
|||
|
|||
DemoCarousel.PageTransition = TransitionCombo?.SelectedIndex switch |
|||
{ |
|||
0 => null, |
|||
1 => new CrossFade(TimeSpan.FromMilliseconds(300)), |
|||
2 => new PageSlide(TimeSpan.FromMilliseconds(300), PageSlide.SlideAxis.Horizontal), |
|||
3 => new PageSlide(TimeSpan.FromMilliseconds(300), PageSlide.SlideAxis.Vertical), |
|||
4 => new CardStackPageTransition(TimeSpan.FromMilliseconds(400)), |
|||
5 => new WaveRevealPageTransition(TimeSpan.FromMilliseconds(600)), |
|||
_ => null |
|||
}; |
|||
|
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnPrevious(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (DemoCarousel.SelectedIndex > 0) |
|||
DemoCarousel.SelectedIndex--; |
|||
} |
|||
|
|||
private void OnNext(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
if (DemoCarousel.SelectedIndex < pageCount - 1) |
|||
DemoCarousel.SelectedIndex++; |
|||
} |
|||
|
|||
private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e) |
|||
{ |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void UpdateStatus() |
|||
{ |
|||
if (StatusText == null) |
|||
return; |
|||
var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0; |
|||
var modeName = DemoCarousel.PageTransition switch |
|||
{ |
|||
null => "None", |
|||
CardStackPageTransition => "Card Stack", |
|||
WaveRevealPageTransition => "Wave Reveal", |
|||
{ } t => t.GetType().Name |
|||
}; |
|||
StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount} | Transition: {modeName}"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,298 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.SanctuaryMainPage"> |
|||
<UserControl.Styles> |
|||
<Style Selector="Button.primary /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#f47b25" /> |
|||
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" /> |
|||
</Style> |
|||
<Style Selector="Button.primary:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#e0701f" /> |
|||
</Style> |
|||
<Style Selector="Button.primary:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#c9611a" /> |
|||
</Style> |
|||
<Style Selector="Button.glass /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#18FFFFFF" /> |
|||
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" /> |
|||
</Style> |
|||
<Style Selector="Button.glass:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#2AFFFFFF" /> |
|||
</Style> |
|||
<Style Selector="Button.glass:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#10FFFFFF" /> |
|||
</Style> |
|||
</UserControl.Styles> |
|||
|
|||
<DockPanel> |
|||
|
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Sanctuary" FontSize="16" FontWeight="SemiBold" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7" |
|||
Text="Main landing page with a full-screen hero card, Featured Escapes section, and a bottom TabbedPage navigation. Navigated to from the onboarding carousel." /> |
|||
<Separator /> |
|||
<TextBlock Text="Design" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock FontSize="12" Text="Theme: Dark (#221710)" /> |
|||
<TextBlock FontSize="12" Text="Primary: #f47b25 (warm orange)" /> |
|||
<Separator /> |
|||
<TextBlock Text="Tabs" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="Home — hero + Featured Escapes cards" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="Explore — destination discovery" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="Saved — bookmarked destinations" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="Profile — account and settings" /> |
|||
<Separator /> |
|||
<TextBlock Text="Navigation" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="Reached via 'Get Started' on the Urban Adventures carousel page. Back stack is cleared on arrival." /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Grid RowDefinitions="Auto,*" Background="#221710"> |
|||
|
|||
<!-- Top Nav Bar --> |
|||
<Border Grid.Row="0" Background="#DD221710" Padding="16,10,16,10"> |
|||
<Grid ColumnDefinitions="*,Auto"> |
|||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center"> |
|||
<Panel Width="30" Height="30"> |
|||
<Ellipse Fill="#f47b25" /> |
|||
<TextBlock Text="▲" Foreground="White" FontSize="13" FontWeight="Bold" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</Panel> |
|||
<TextBlock Text="Sanctuary" FontSize="18" FontWeight="Bold" |
|||
Foreground="White" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="6" VerticalAlignment="Center"> |
|||
<Border Width="48" Height="48" CornerRadius="24" Background="#18FFFFFF"> |
|||
<TextBlock Text="⌕" FontSize="20" Foreground="#80FFFFFF" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</Border> |
|||
<Border Width="48" Height="48" CornerRadius="24" Background="#33f47b25"> |
|||
<TextBlock Text="◉" FontSize="19" Foreground="#f47b25" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</Border> |
|||
</StackPanel> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<!-- Tabbed content --> |
|||
<TabbedPage Grid.Row="1" |
|||
TabPlacement="Bottom" |
|||
SelectedIndex="0"> |
|||
<TabbedPage.Resources> |
|||
<SolidColorBrush x:Key="TabbedPageTabStripBackground">#221710</SolidColorBrush> |
|||
<SolidColorBrush x:Key="TabbedPageTabItemHeaderForegroundSelected">#f47b25</SolidColorBrush> |
|||
<SolidColorBrush x:Key="TabbedPageTabItemHeaderForegroundUnselected">#50FFFFFF</SolidColorBrush> |
|||
<Thickness x:Key="TabbedPageTabItemHeaderPadding">8,10,8,4</Thickness> |
|||
</TabbedPage.Resources> |
|||
|
|||
<!-- Home Tab --> |
|||
<ContentPage Header="Home" |
|||
Background="#221710"> |
|||
<ContentPage.Icon> |
|||
<StreamGeometry>M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z</StreamGeometry> |
|||
</ContentPage.Icon> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" |
|||
VerticalScrollBarVisibility="Hidden"> |
|||
<StackPanel> |
|||
|
|||
<!-- Hero Card --> |
|||
<Border Margin="12,12,12,8" CornerRadius="16" ClipToBounds="True" Height="380"> |
|||
<Border.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/main_hero.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</Border.Background> |
|||
<Grid> |
|||
<Border ClipToBounds="True" Margin="-1"> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> |
|||
<GradientStop Offset="0" Color="Transparent" /> |
|||
<GradientStop Offset="0.45" Color="#55221710" /> |
|||
<GradientStop Offset="1" Color="#EE221710" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" |
|||
Margin="28,0,28,32" Spacing="14"> |
|||
<StackPanel HorizontalAlignment="Center" Spacing="2"> |
|||
<TextBlock Text="Find Your" FontSize="40" FontWeight="ExtraBold" |
|||
Foreground="White" TextAlignment="Center" /> |
|||
<TextBlock Text="Sanctuary" FontSize="40" FontWeight="ExtraBold" |
|||
Foreground="#f47b25" TextAlignment="Center" /> |
|||
</StackPanel> |
|||
<TextBlock Text="Embark on a curated journey through the world's most serene and breathtaking natural wonders. Escape the noise and rediscover peace." |
|||
FontSize="13" Foreground="#CAffffff" |
|||
TextAlignment="Center" TextWrapping="Wrap" MaxWidth="280" /> |
|||
<StackPanel Spacing="10" HorizontalAlignment="Center"> |
|||
<Button Classes="primary" |
|||
Foreground="#221710" FontWeight="Bold" FontSize="14" |
|||
CornerRadius="24" Padding="28,14" |
|||
HorizontalAlignment="Stretch" |
|||
HorizontalContentAlignment="Center"> |
|||
<TextBlock Text="Explore the Collection" Foreground="#221710" FontWeight="Bold" /> |
|||
</Button> |
|||
<Button Classes="glass" |
|||
Foreground="White" FontWeight="Bold" FontSize="14" |
|||
CornerRadius="24" Padding="28,14" |
|||
HorizontalAlignment="Stretch" |
|||
HorizontalContentAlignment="Center"> |
|||
<StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Center"> |
|||
<TextBlock Text="⊕" Foreground="White" VerticalAlignment="Center" /> |
|||
<TextBlock Text="View Map" Foreground="White" FontWeight="Bold" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
</StackPanel> |
|||
</StackPanel> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<!-- Featured Escapes Header --> |
|||
<Grid Margin="16,8,16,12" ColumnDefinitions="*,Auto"> |
|||
<StackPanel Grid.Column="0" Spacing="3"> |
|||
<TextBlock Text="Featured Escapes" FontSize="20" FontWeight="Bold" Foreground="White" /> |
|||
<TextBlock Text="Hand-picked destinations for your next retreat" |
|||
FontSize="12" Foreground="#80FFFFFF" /> |
|||
</StackPanel> |
|||
<TextBlock Grid.Column="1" Text="See All" FontSize="12" FontWeight="Bold" |
|||
Foreground="#f47b25" VerticalAlignment="Bottom" /> |
|||
</Grid> |
|||
|
|||
<!-- Card 1: Deep Forest --> |
|||
<Border Margin="16,0,16,12" CornerRadius="16" ClipToBounds="True" Height="240"> |
|||
<Border.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/main_deep_forest.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</Border.Background> |
|||
<Grid> |
|||
<Border ClipToBounds="True" Margin="-1"> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0"> |
|||
<GradientStop Offset="0" Color="#66000000" /> |
|||
<GradientStop Offset="0.5" Color="Transparent" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
<StackPanel VerticalAlignment="Bottom" Margin="16,0,16,16" Spacing="4"> |
|||
<Border CornerRadius="12" Background="#33f47b25" Padding="8,4" HorizontalAlignment="Left"> |
|||
<TextBlock Text="FOREST" FontSize="10" FontWeight="Bold" Foreground="#f47b25" /> |
|||
</Border> |
|||
<TextBlock Text="Deep Forest" FontSize="22" FontWeight="Bold" Foreground="White" /> |
|||
<TextBlock Text="Quiet trails in Oregon, USA" FontSize="12" Foreground="#CCffffff" /> |
|||
</StackPanel> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<!-- Card 2: Arctic Silence --> |
|||
<Border Margin="16,0,16,12" CornerRadius="16" ClipToBounds="True" Height="240"> |
|||
<Border.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/main_arctic_silence.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</Border.Background> |
|||
<Grid> |
|||
<Border ClipToBounds="True" Margin="-1"> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0"> |
|||
<GradientStop Offset="0" Color="#66000000" /> |
|||
<GradientStop Offset="0.5" Color="Transparent" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
<StackPanel VerticalAlignment="Bottom" Margin="16,0,16,16" Spacing="4"> |
|||
<Border CornerRadius="12" Background="#33f47b25" Padding="8,4" HorizontalAlignment="Left"> |
|||
<TextBlock Text="ALPINE" FontSize="10" FontWeight="Bold" Foreground="#f47b25" /> |
|||
</Border> |
|||
<TextBlock Text="Arctic Silence" FontSize="22" FontWeight="Bold" Foreground="White" /> |
|||
<TextBlock Text="Remote retreats in Svalbard" FontSize="12" Foreground="#CCffffff" /> |
|||
</StackPanel> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<!-- Card 3: Desert Sands --> |
|||
<Border Margin="16,0,16,20" CornerRadius="16" ClipToBounds="True" Height="240"> |
|||
<Border.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/main_desert_sands.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</Border.Background> |
|||
<Grid> |
|||
<Border ClipToBounds="True" Margin="-1"> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0"> |
|||
<GradientStop Offset="0" Color="#66000000" /> |
|||
<GradientStop Offset="0.5" Color="Transparent" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
<StackPanel VerticalAlignment="Bottom" Margin="16,0,16,16" Spacing="4"> |
|||
<Border CornerRadius="12" Background="#33f47b25" Padding="8,4" HorizontalAlignment="Left"> |
|||
<TextBlock Text="DESERT" FontSize="10" FontWeight="Bold" Foreground="#f47b25" /> |
|||
</Border> |
|||
<TextBlock Text="Desert Sands" FontSize="22" FontWeight="Bold" Foreground="White" /> |
|||
<TextBlock Text="Star gazing in Wadi Rum" FontSize="12" Foreground="#CCffffff" /> |
|||
</StackPanel> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
</ContentPage> |
|||
|
|||
<!-- Explore Tab --> |
|||
<ContentPage Header="Explore" |
|||
Background="#221710"> |
|||
<ContentPage.Icon> |
|||
<StreamGeometry>M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z</StreamGeometry> |
|||
</ContentPage.Icon> |
|||
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" |
|||
Spacing="12" Margin="32"> |
|||
<TextBlock Text="✦" FontSize="48" Foreground="#33FFFFFF" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Explore" FontSize="20" FontWeight="Bold" Foreground="White" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Discover new destinations around the world." |
|||
FontSize="13" Foreground="#80FFFFFF" |
|||
TextAlignment="Center" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
|
|||
<!-- Saved Tab --> |
|||
<ContentPage Header="Saved" |
|||
Background="#221710"> |
|||
<ContentPage.Icon> |
|||
<StreamGeometry>M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z</StreamGeometry> |
|||
</ContentPage.Icon> |
|||
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" |
|||
Spacing="12" Margin="32"> |
|||
<TextBlock Text="♡" FontSize="48" Foreground="#33FFFFFF" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Saved" FontSize="20" FontWeight="Bold" Foreground="White" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Your saved destinations will appear here." |
|||
FontSize="13" Foreground="#80FFFFFF" |
|||
TextAlignment="Center" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
|
|||
<!-- Profile Tab --> |
|||
<ContentPage Header="Profile" |
|||
Background="#221710"> |
|||
<ContentPage.Icon> |
|||
<StreamGeometry>M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z</StreamGeometry> |
|||
</ContentPage.Icon> |
|||
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" |
|||
Spacing="12" Margin="32"> |
|||
<TextBlock Text="◉" FontSize="48" Foreground="#33FFFFFF" HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Profile" FontSize="20" FontWeight="Bold" Foreground="White" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Your profile and settings will appear here." |
|||
FontSize="13" Foreground="#80FFFFFF" |
|||
TextAlignment="Center" TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
|
|||
</TabbedPage> |
|||
|
|||
</Grid> |
|||
|
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,11 @@ |
|||
using Avalonia.Controls; |
|||
|
|||
namespace ControlCatalog.Pages; |
|||
|
|||
public partial class SanctuaryMainPage : UserControl |
|||
{ |
|||
public SanctuaryMainPage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
} |
|||
@ -0,0 +1,335 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.SanctuaryShowcasePage"> |
|||
<UserControl.Styles> |
|||
<!-- Orange primary button --> |
|||
<Style Selector="Button.primary /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#f47b25" /> |
|||
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" /> |
|||
</Style> |
|||
<Style Selector="Button.primary:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#e0701f" /> |
|||
</Style> |
|||
<Style Selector="Button.primary:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#c9611a" /> |
|||
</Style> |
|||
|
|||
<!-- Glass button (semi-transparent white) --> |
|||
<Style Selector="Button.glass /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#18FFFFFF" /> |
|||
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" /> |
|||
</Style> |
|||
<Style Selector="Button.glass:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#2AFFFFFF" /> |
|||
</Style> |
|||
<Style Selector="Button.glass:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="#10FFFFFF" /> |
|||
</Style> |
|||
|
|||
</UserControl.Styles> |
|||
|
|||
<DockPanel> |
|||
|
|||
<ScrollViewer DockPanel.Dock="Right" Width="220"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Sanctuary" FontSize="16" FontWeight="SemiBold" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7" |
|||
Text="A travel discovery app with 3 full-screen immersive pages. Uses PipsPager with custom pill-shaped indicators. Swipe, use arrow keys, tap the CTA buttons, or click the pip indicators to navigate." /> |
|||
<Separator /> |
|||
<TextBlock Text="Design" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock FontSize="12" Text="Theme: Dark (#221710)" /> |
|||
<TextBlock FontSize="12" Text="Primary: #f47b25 (warm orange)" /> |
|||
<Separator /> |
|||
<TextBlock Text="Pages" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="1. Explore the Unknown — mountain backdrop" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="2. Hidden Sanctuaries — forest scene" /> |
|||
<TextBlock FontSize="12" TextWrapping="Wrap" Text="3. Urban Adventures — neon city" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" CornerRadius="8" ClipToBounds="True" Margin="12"> |
|||
<Grid> |
|||
<CarouselPage x:Name="DemoCarousel" IsGestureEnabled="True"> |
|||
|
|||
<!-- Page 1: Explore the Unknown --> |
|||
<ContentPage HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<ContentPage.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/mountain_bg.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</ContentPage.Background> |
|||
<Grid> |
|||
<Border> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> |
|||
<GradientStop Offset="0" Color="Transparent" /> |
|||
<GradientStop Offset="0.35" Color="#55221710" /> |
|||
<GradientStop Offset="1" Color="#EE221710" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
<Grid RowDefinitions="*,Auto"> |
|||
<StackPanel Grid.Row="1" Margin="28,0,28,44" Spacing="0" |
|||
HorizontalAlignment="Center"> |
|||
|
|||
<TextBlock Text="Explore the Unknown" |
|||
FontSize="36" FontWeight="Bold" Foreground="White" |
|||
TextAlignment="Center" TextWrapping="Wrap" |
|||
MaxWidth="300" Margin="0,0,0,14" /> |
|||
|
|||
<TextBlock Text="Embark on an unforgettable adventure through pristine wilderness and discover the hidden wonders of the world's most majestic peaks." |
|||
FontSize="14" Foreground="#CAffffff" |
|||
TextAlignment="Center" TextWrapping="Wrap" |
|||
MaxWidth="300" Margin="0,0,0,24" /> |
|||
|
|||
<Button Classes="primary" |
|||
Foreground="White" FontWeight="Bold" FontSize="16" |
|||
CornerRadius="24" Padding="24,16" |
|||
HorizontalAlignment="Stretch" |
|||
HorizontalContentAlignment="Center" |
|||
Click="OnPage1CTA" Margin="0,0,0,48"> |
|||
<StackPanel Orientation="Horizontal" Spacing="10" HorizontalAlignment="Center"> |
|||
<TextBlock Text="Start Journey" Foreground="White" |
|||
FontWeight="Bold" VerticalAlignment="Center" /> |
|||
<TextBlock Text="→" Foreground="White" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
|
|||
</StackPanel> |
|||
</Grid> |
|||
</Grid> |
|||
</ContentPage> |
|||
|
|||
<!-- Page 2: Hidden Sanctuaries --> |
|||
<ContentPage HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<ContentPage.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/forest_bg.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</ContentPage.Background> |
|||
<Grid> |
|||
<Border> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> |
|||
<GradientStop Offset="0" Color="#88221710" /> |
|||
<GradientStop Offset="0.3" Color="Transparent" /> |
|||
<GradientStop Offset="0.75" Color="#55221710" /> |
|||
<GradientStop Offset="1" Color="#CC221710" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
|
|||
<Grid RowDefinitions="Auto,*,Auto"> |
|||
|
|||
<!-- Logo bar --> |
|||
<StackPanel Grid.Row="0" Orientation="Horizontal" Spacing="8" |
|||
Margin="20,22,20,0"> |
|||
<Panel Width="28" Height="28"> |
|||
<Ellipse Fill="#f47b25" /> |
|||
<TextBlock Text="▲" Foreground="White" FontSize="12" FontWeight="Bold" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</Panel> |
|||
<TextBlock Text="SANCTUARY" Foreground="White" FontWeight="Bold" |
|||
FontSize="15" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
|
|||
<!-- Center content --> |
|||
<StackPanel Grid.Row="1" Margin="24,0,24,0" Spacing="18" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
|
|||
<Border CornerRadius="20" BorderBrush="#50f47b25" BorderThickness="1" |
|||
Background="#1Af47b25" HorizontalAlignment="Center" Padding="14,6"> |
|||
<StackPanel Orientation="Horizontal" Spacing="6"> |
|||
<TextBlock Text="◎" Foreground="#f47b25" FontSize="11" VerticalAlignment="Center" /> |
|||
<TextBlock Text="VOLUME II: SECLUSION" Foreground="#f47b25" |
|||
FontSize="11" FontWeight="Bold" /> |
|||
</StackPanel> |
|||
</Border> |
|||
|
|||
<StackPanel Spacing="0" HorizontalAlignment="Center"> |
|||
<TextBlock Text="Hidden" Foreground="White" |
|||
FontSize="54" FontWeight="Bold" TextAlignment="Center" /> |
|||
<TextBlock Text="Sanctuaries" Foreground="White" |
|||
FontSize="54" FontStyle="Italic" FontWeight="Light" |
|||
TextAlignment="Center" /> |
|||
</StackPanel> |
|||
|
|||
<TextBlock Text="Find your peace in the world's most secluded natural wonders. From misty forest groves to still mountain lakes, discover the quiet beauty of nature's best-kept secrets." |
|||
Foreground="#CCffffff" FontSize="14" |
|||
TextAlignment="Center" TextWrapping="Wrap" MaxWidth="310" /> |
|||
|
|||
<StackPanel Spacing="10" HorizontalAlignment="Center"> |
|||
<Button Classes="primary" |
|||
Foreground="#221710" FontWeight="Bold" FontSize="15" |
|||
CornerRadius="24" Padding="32,16" |
|||
HorizontalContentAlignment="Center" MinWidth="220" |
|||
Click="OnPage2CTA"> |
|||
<StackPanel Orientation="Horizontal" Spacing="8"> |
|||
<TextBlock Text="Discover More" Foreground="#221710" |
|||
FontWeight="Bold" VerticalAlignment="Center" /> |
|||
<TextBlock Text="→" Foreground="#221710" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
<Button Classes="glass" |
|||
Foreground="White" FontWeight="Bold" FontSize="15" |
|||
CornerRadius="24" Padding="32,16" |
|||
HorizontalContentAlignment="Center" MinWidth="220" |
|||
Click="OnPage2CTA"> |
|||
<StackPanel Orientation="Horizontal" Spacing="8"> |
|||
<TextBlock Text="▷" Foreground="White" VerticalAlignment="Center" /> |
|||
<TextBlock Text="Experience" Foreground="White" |
|||
FontWeight="Bold" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
</StackPanel> |
|||
|
|||
</StackPanel> |
|||
|
|||
<!-- Footer: location + social --> |
|||
<StackPanel Grid.Row="2" Spacing="14" Margin="0,0,0,44"> |
|||
|
|||
<Grid ColumnDefinitions="*,Auto" Margin="20,0,20,0"> |
|||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="5" |
|||
VerticalAlignment="Center"> |
|||
<TextBlock Text="⊙" Foreground="#80FFFFFF" FontSize="11" |
|||
VerticalAlignment="Center" /> |
|||
<TextBlock Text="NORDIC HIGHLANDS" Foreground="#80FFFFFF" |
|||
FontSize="10" FontWeight="SemiBold" /> |
|||
</StackPanel> |
|||
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="14"> |
|||
<TextBlock Text="Instagram" Foreground="#80FFFFFF" |
|||
FontSize="10" FontWeight="SemiBold" /> |
|||
<TextBlock Text="Pinterest" Foreground="#80FFFFFF" |
|||
FontSize="10" FontWeight="SemiBold" /> |
|||
</StackPanel> |
|||
</Grid> |
|||
|
|||
</StackPanel> |
|||
</Grid> |
|||
</Grid> |
|||
</ContentPage> |
|||
|
|||
<!-- Page 3: Urban Adventures --> |
|||
<ContentPage HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch"> |
|||
<ContentPage.Background> |
|||
<ImageBrush Source="avares://ControlCatalog/Assets/Sanctuary/city_bg.jpg" |
|||
Stretch="UniformToFill" /> |
|||
</ContentPage.Background> |
|||
<Grid> |
|||
<Border> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> |
|||
<GradientStop Offset="0" Color="Transparent" /> |
|||
<GradientStop Offset="0.35" Color="#55221710" /> |
|||
<GradientStop Offset="0.6" Color="#99221710" /> |
|||
<GradientStop Offset="1" Color="#EE221710" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
</Border> |
|||
|
|||
<Grid RowDefinitions="*,Auto"> |
|||
<StackPanel Grid.Row="1" Margin="28,0,28,44" Spacing="0" |
|||
HorizontalAlignment="Center"> |
|||
|
|||
<TextBlock Text="Urban Adventures" |
|||
FontSize="44" FontWeight="Bold" Foreground="White" |
|||
TextAlignment="Center" TextWrapping="Wrap" |
|||
MaxWidth="320" Margin="0,0,0,14" /> |
|||
|
|||
<Border Height="5" Width="88" CornerRadius="3" |
|||
Background="#f47b25" HorizontalAlignment="Center" |
|||
Margin="0,0,0,18" /> |
|||
|
|||
<TextBlock Text="Experience the electric pulse of the city that never sleeps. Explore hidden gems and neon-lit wonders around every corner." |
|||
FontSize="14" Foreground="#CAffffff" |
|||
TextAlignment="Center" TextWrapping="Wrap" |
|||
MaxWidth="300" Margin="0,0,0,24" /> |
|||
|
|||
<Button Classes="primary" |
|||
Foreground="White" FontWeight="Bold" FontSize="16" |
|||
CornerRadius="24" Padding="24,16" |
|||
HorizontalAlignment="Stretch" |
|||
HorizontalContentAlignment="Center" |
|||
Click="OnPage3CTA" Margin="0,0,0,48"> |
|||
<TextBlock Text="Get Started" Foreground="White" FontWeight="Bold" /> |
|||
</Button> |
|||
|
|||
</StackPanel> |
|||
</Grid> |
|||
</Grid> |
|||
</ContentPage> |
|||
|
|||
</CarouselPage> |
|||
|
|||
<PipsPager HorizontalAlignment="Center" |
|||
VerticalAlignment="Bottom" Margin="0,0,0,20" |
|||
NumberOfPages="3" |
|||
SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" |
|||
IsPreviousButtonVisible="False" |
|||
IsNextButtonVisible="False"> |
|||
<PipsPager.Styles> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem"> |
|||
<Setter Property="Width" Value="38" /> |
|||
<Setter Property="Height" Value="24" /> |
|||
<Setter Property="Padding" Value="0" /> |
|||
<Setter Property="Margin" Value="2,0" /> |
|||
<Setter Property="MinWidth" Value="0" /> |
|||
<Setter Property="MinHeight" Value="0" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="VerticalAlignment" Value="Center" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Grid Background="Transparent"> |
|||
<Border Name="Pip" |
|||
Width="8" Height="8" CornerRadius="4" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
Background="#4DFFFFFF"> |
|||
<Border.Transitions> |
|||
<Transitions> |
|||
<DoubleTransition Property="Width" Duration="0:0:0.25" Easing="CubicEaseOut" /> |
|||
<DoubleTransition Property="Height" Duration="0:0:0.25" Easing="CubicEaseOut" /> |
|||
<CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.25" Easing="CubicEaseOut" /> |
|||
<BrushTransition Property="Background" Duration="0:0:0.25" /> |
|||
</Transitions> |
|||
</Border.Transitions> |
|||
</Border> |
|||
</Grid> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:pointerover /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="10" /> |
|||
<Setter Property="Height" Value="10" /> |
|||
<Setter Property="CornerRadius" Value="5" /> |
|||
<Setter Property="Background" Value="#80FFFFFF" /> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:selected /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="32" /> |
|||
<Setter Property="Height" Value="8" /> |
|||
<Setter Property="CornerRadius" Value="4" /> |
|||
<Setter Property="Background" Value="#f47b25" /> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:selected:pointerover /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="32" /> |
|||
<Setter Property="Height" Value="8" /> |
|||
<Setter Property="CornerRadius" Value="4" /> |
|||
<Setter Property="Background" Value="#e0701f" /> |
|||
</Style> |
|||
<Style Selector="PipsPager /template/ ListBox ListBoxItem:pressed /template/ Border#Pip"> |
|||
<Setter Property="Width" Value="8" /> |
|||
<Setter Property="Height" Value="8" /> |
|||
<Setter Property="Background" Value="#f47b25" /> |
|||
</Style> |
|||
</PipsPager.Styles> |
|||
</PipsPager> |
|||
|
|||
</Grid> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,70 @@ |
|||
using System.Linq; |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
using Avalonia.Layout; |
|||
using Avalonia.Media; |
|||
using Avalonia.VisualTree; |
|||
|
|||
namespace ControlCatalog.Pages; |
|||
|
|||
public partial class SanctuaryShowcasePage : UserControl |
|||
{ |
|||
public SanctuaryShowcasePage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
|
|||
private void OnPage1CTA(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoCarousel.SelectedIndex = 1; |
|||
} |
|||
|
|||
private void OnPage2CTA(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoCarousel.SelectedIndex = 2; |
|||
} |
|||
|
|||
private async void OnPage3CTA(object? sender, RoutedEventArgs e) |
|||
{ |
|||
var nav = this.FindAncestorOfType<NavigationPage>(); |
|||
if (nav == null) |
|||
return; |
|||
|
|||
var carouselWrapper = nav.NavigationStack.LastOrDefault(); |
|||
|
|||
var headerGrid = new Grid { ColumnDefinitions = new ColumnDefinitions("*, Auto") }; |
|||
headerGrid.Children.Add(new TextBlock |
|||
{ |
|||
Text = "Sanctuary", |
|||
VerticalAlignment = VerticalAlignment.Center |
|||
}); |
|||
var closeIcon = Geometry.Parse( |
|||
"M4.397 4.397a1 1 0 0 1 1.414 0L12 10.585l6.19-6.188a1 1 0 0 1 1.414 1.414L13.413 12l6.19 6.189a1 1 0 0 1-1.414 1.414L12 13.413l-6.189 6.19a1 1 0 0 1-1.414-1.414L10.585 12 4.397 5.811a1 1 0 0 1 0-1.414z"); |
|||
var closeBtn = new Button |
|||
{ |
|||
Content = new PathIcon { Data = closeIcon }, |
|||
Background = Brushes.Transparent, |
|||
BorderThickness = new Thickness(0), |
|||
Padding = new Thickness(8, 4), |
|||
VerticalAlignment = VerticalAlignment.Center |
|||
}; |
|||
Grid.SetColumn(closeBtn, 1); |
|||
headerGrid.Children.Add(closeBtn); |
|||
closeBtn.Click += async (_, _) => await nav.PopAsync(null); |
|||
|
|||
var mainPage = new ContentPage |
|||
{ |
|||
Header = headerGrid, |
|||
Content = new SanctuaryMainPage() |
|||
}; |
|||
NavigationPage.SetHasBackButton(mainPage, false); |
|||
|
|||
await nav.PushAsync(mainPage); |
|||
|
|||
if (carouselWrapper != null) |
|||
{ |
|||
nav.RemovePage(carouselWrapper); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.CommandBarEventsPage"> |
|||
<UserControl.Resources> |
|||
<StreamGeometry x:Key="AddIcon">M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z</StreamGeometry> |
|||
<StreamGeometry x:Key="SaveIcon">M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z</StreamGeometry> |
|||
<StreamGeometry x:Key="ShareIcon">M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19C20.92,17.39 19.61,16.08 18,16.08Z</StreamGeometry> |
|||
<StreamGeometry x:Key="ExportIcon">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M16,11V18.1L13.9,16L11.1,18.8L8.3,16L11.1,13.2L9,11.1L16,11Z</StreamGeometry> |
|||
<StreamGeometry x:Key="DeleteIcon">M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z</StreamGeometry> |
|||
</UserControl.Resources> |
|||
|
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="280"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Actions" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<CheckBox x:Name="IsOpenCheck" |
|||
Content="IsOpen" |
|||
IsCheckedChanged="OnIsOpenChanged" /> |
|||
|
|||
<Button Content="+ Add Primary" |
|||
HorizontalAlignment="Stretch" |
|||
Click="OnAddPrimary" /> |
|||
|
|||
<Button Content="- Remove Primary" |
|||
HorizontalAlignment="Stretch" |
|||
Click="OnRemovePrimary" /> |
|||
|
|||
<Button Content="+ Add Secondary" |
|||
HorizontalAlignment="Stretch" |
|||
Click="OnAddSecondary" /> |
|||
|
|||
<Button Content="- Remove Secondary" |
|||
HorizontalAlignment="Stretch" |
|||
Click="OnRemoveSecondary" /> |
|||
|
|||
<Button Content="Clear Log" |
|||
HorizontalAlignment="Stretch" |
|||
Click="OnClearLog" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="State" FontWeight="SemiBold" /> |
|||
<TextBlock x:Name="StateText" |
|||
FontSize="12" |
|||
Opacity="0.7" |
|||
TextWrapping="Wrap" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="About" FontWeight="SemiBold" /> |
|||
<TextBlock FontSize="12" Opacity="0.7" TextWrapping="Wrap" |
|||
Text="Opening/Opened fire when the overflow opens. Closing/Closed fire when it closes. The log also records item clicks and command execution while the state panel reflects IsOpen, HasSecondaryCommands, and IsOverflowButtonVisible in real time." /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<ScrollViewer> |
|||
<StackPanel Spacing="12" Margin="12,12,12,0"> |
|||
<TextBlock Classes="h2">Observe CommandBar overflow events, item invocation, and state changes while opening, closing, and editing the primary and secondary command sets.</TextBlock> |
|||
|
|||
<CommandBar x:Name="DemoBar" |
|||
OverflowButtonVisibility="Auto"> |
|||
<CommandBar.PrimaryCommands> |
|||
<AppBarButton Label="New"><AppBarButton.Icon><PathIcon Data="{StaticResource AddIcon}" /></AppBarButton.Icon></AppBarButton> |
|||
<AppBarButton Label="Save"><AppBarButton.Icon><PathIcon Data="{StaticResource SaveIcon}" /></AppBarButton.Icon></AppBarButton> |
|||
<AppBarButton Label="Share"><AppBarButton.Icon><PathIcon Data="{StaticResource ShareIcon}" /></AppBarButton.Icon></AppBarButton> |
|||
</CommandBar.PrimaryCommands> |
|||
<CommandBar.SecondaryCommands> |
|||
<AppBarButton Label="Export"><AppBarButton.Icon><PathIcon Data="{StaticResource ExportIcon}" /></AppBarButton.Icon></AppBarButton> |
|||
<AppBarButton Label="Delete"><AppBarButton.Icon><PathIcon Data="{StaticResource DeleteIcon}" /></AppBarButton.Icon></AppBarButton> |
|||
</CommandBar.SecondaryCommands> |
|||
</CommandBar> |
|||
|
|||
<Border BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="6" |
|||
Padding="10"> |
|||
<StackPanel Spacing="6"> |
|||
<TextBlock Text="Event Log" FontWeight="SemiBold" /> |
|||
<TextBlock x:Name="EventLogText" |
|||
FontFamily="Consolas, Menlo, monospace" |
|||
FontSize="12" |
|||
TextWrapping="Wrap" |
|||
MinHeight="140" |
|||
Opacity="0.8" |
|||
Text="Ready" /> |
|||
</StackPanel> |
|||
</Border> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,220 @@ |
|||
using System.Collections.Generic; |
|||
using System.Linq; |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
using Avalonia.Media; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class CommandBarEventsPage : UserControl |
|||
{ |
|||
private readonly List<string> _log = new(); |
|||
private int _primaryCount = 3; |
|||
private int _secondaryCount = 2; |
|||
|
|||
public CommandBarEventsPage() |
|||
{ |
|||
InitializeComponent(); |
|||
Loaded += OnLoaded; |
|||
Unloaded += OnUnloaded; |
|||
} |
|||
|
|||
private void OnLoaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoBar.Opening += OnOpening; |
|||
DemoBar.Opened += OnOpened; |
|||
DemoBar.Closing += OnClosing; |
|||
DemoBar.Closed += OnClosed; |
|||
DemoBar.PropertyChanged += OnBarPropertyChanged; |
|||
|
|||
AttachItemHandlers(DemoBar.PrimaryCommands); |
|||
AttachItemHandlers(DemoBar.SecondaryCommands); |
|||
|
|||
AppendLog("Ready"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnUnloaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoBar.Opening -= OnOpening; |
|||
DemoBar.Opened -= OnOpened; |
|||
DemoBar.Closing -= OnClosing; |
|||
DemoBar.Closed -= OnClosed; |
|||
DemoBar.PropertyChanged -= OnBarPropertyChanged; |
|||
|
|||
DetachItemHandlers(DemoBar.PrimaryCommands); |
|||
DetachItemHandlers(DemoBar.SecondaryCommands); |
|||
} |
|||
|
|||
private void OnIsOpenChanged(object? sender, RoutedEventArgs e) |
|||
{ |
|||
DemoBar.IsOpen = IsOpenCheck.IsChecked == true; |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnAddPrimary(object? sender, RoutedEventArgs e) |
|||
{ |
|||
_primaryCount++; |
|||
|
|||
var button = CreateButton($"Primary {_primaryCount}"); |
|||
DemoBar.PrimaryCommands.Add(button); |
|||
|
|||
AppendLog($"Primary +, {DemoBar.PrimaryCommands.Count}"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnRemovePrimary(object? sender, RoutedEventArgs e) |
|||
{ |
|||
RemoveLastCommand(DemoBar.PrimaryCommands, "Primary"); |
|||
} |
|||
|
|||
private void OnAddSecondary(object? sender, RoutedEventArgs e) |
|||
{ |
|||
_secondaryCount++; |
|||
|
|||
var button = CreateButton($"Secondary {_secondaryCount}"); |
|||
DemoBar.SecondaryCommands.Add(button); |
|||
|
|||
AppendLog($"Secondary +, {DemoBar.SecondaryCommands.Count}"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnRemoveSecondary(object? sender, RoutedEventArgs e) |
|||
{ |
|||
RemoveLastCommand(DemoBar.SecondaryCommands, "Secondary"); |
|||
} |
|||
|
|||
private void OnClearLog(object? sender, RoutedEventArgs e) |
|||
{ |
|||
_log.Clear(); |
|||
EventLogText.Text = "Log cleared"; |
|||
} |
|||
|
|||
private void OnOpening(object? sender, RoutedEventArgs e) |
|||
{ |
|||
AppendLog("Opening"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnOpened(object? sender, RoutedEventArgs e) |
|||
{ |
|||
AppendLog("Opened"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnClosing(object? sender, RoutedEventArgs e) |
|||
{ |
|||
AppendLog("Closing"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnClosed(object? sender, RoutedEventArgs e) |
|||
{ |
|||
AppendLog("Closed"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private void OnBarPropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e) |
|||
{ |
|||
if (e.Property == CommandBar.IsOpenProperty |
|||
|| e.Property == CommandBar.HasSecondaryCommandsProperty |
|||
|| e.Property == CommandBar.IsOverflowButtonVisibleProperty) |
|||
{ |
|||
RefreshState(); |
|||
} |
|||
} |
|||
|
|||
private void RefreshState() |
|||
{ |
|||
StateText.Text = |
|||
$"IsOpen: {DemoBar.IsOpen}\n" + |
|||
$"HasSecondaryCommands: {DemoBar.HasSecondaryCommands}\n" + |
|||
$"IsOverflowButtonVisible: {DemoBar.IsOverflowButtonVisible}\n" + |
|||
$"Primary: {DemoBar.PrimaryCommands.Count}\n" + |
|||
$"Secondary: {DemoBar.SecondaryCommands.Count}\n" + |
|||
$"OverflowItems: {DemoBar.OverflowItems.Count}"; |
|||
|
|||
IsOpenCheck.IsChecked = DemoBar.IsOpen; |
|||
} |
|||
|
|||
private void OnCommandItemClick(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (sender is AppBarButton button) |
|||
AppendLog($"Click, {button.Label}, {DescribePlacement(button)}"); |
|||
} |
|||
|
|||
private AppBarButton CreateButton(string label) |
|||
{ |
|||
var button = new AppBarButton |
|||
{ |
|||
Label = label, |
|||
Icon = new PathIcon |
|||
{ |
|||
Data = StreamGeometry.Parse("M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z") |
|||
} |
|||
}; |
|||
|
|||
AttachItemHandler(button); |
|||
return button; |
|||
} |
|||
|
|||
private void AttachItemHandlers(IEnumerable<ICommandBarElement> items) |
|||
{ |
|||
foreach (var item in items) |
|||
AttachItemHandler(item); |
|||
} |
|||
|
|||
private void DetachItemHandlers(IEnumerable<ICommandBarElement> items) |
|||
{ |
|||
foreach (var item in items) |
|||
{ |
|||
if (item is AppBarButton button) |
|||
button.Click -= OnCommandItemClick; |
|||
} |
|||
} |
|||
|
|||
private void AttachItemHandler(ICommandBarElement item) |
|||
{ |
|||
if (item is not AppBarButton button) |
|||
return; |
|||
|
|||
button.Click -= OnCommandItemClick; |
|||
button.Click += OnCommandItemClick; |
|||
button.Command = MiniCommand.Create(() => AppendLog($"Command, {button.Label}, {DescribePlacement(button)}")); |
|||
} |
|||
|
|||
private void RemoveLastCommand(IList<ICommandBarElement> items, string bucketName) |
|||
{ |
|||
if (items.Count == 0) |
|||
return; |
|||
|
|||
var item = items[^1]; |
|||
var label = item is AppBarButton button ? button.Label ?? "(unnamed)" : item.GetType().Name; |
|||
|
|||
if (item is AppBarButton appBarButton) |
|||
appBarButton.Click -= OnCommandItemClick; |
|||
|
|||
items.RemoveAt(items.Count - 1); |
|||
|
|||
AppendLog($"{bucketName} -, {label}, {items.Count}"); |
|||
RefreshState(); |
|||
} |
|||
|
|||
private static string DescribePlacement(AppBarButton button) |
|||
{ |
|||
return button.IsInOverflow ? "overflow" : "primary"; |
|||
} |
|||
|
|||
private void AppendLog(string message) |
|||
{ |
|||
_log.Add(message); |
|||
|
|||
if (_log.Count > 12) |
|||
_log.RemoveAt(0); |
|||
|
|||
EventLogText.Text = string.Join("\n", _log.Select((entry, index) => $"{index + 1,2}. {entry}")); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,113 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="ControlCatalog.Pages.DrawerPageBreakpointPage"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="240"> |
|||
<StackPanel Margin="12" Spacing="8"> |
|||
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock Text="DrawerBreakpointLength" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7" |
|||
Text="When set, the drawer automatically switches layout based on the available size (width for Left/Right, height for Top/Bottom)." /> |
|||
|
|||
<Border Background="{DynamicResource SystemControlBackgroundBaseLowBrush}" |
|||
CornerRadius="4" Padding="8"> |
|||
<StackPanel Spacing="4"> |
|||
<Grid ColumnDefinitions="18,*"> |
|||
<PathIcon Grid.Column="0" Width="12" Height="12" Opacity="0.7" VerticalAlignment="Top" Margin="0,1,0,0" |
|||
Data="M19,11H7.83L12.42,6.41L11,5L4,12L11,19L12.41,17.59L7.83,13H19V11Z" /> |
|||
<TextBlock Grid.Column="1" FontSize="11" TextWrapping="Wrap" |
|||
Text="Below breakpoint → Overlay (hamburger button, drawer closes)" /> |
|||
</Grid> |
|||
<Grid ColumnDefinitions="18,*"> |
|||
<PathIcon Grid.Column="0" Width="12" Height="12" Opacity="0.7" VerticalAlignment="Top" Margin="0,1,0,0" |
|||
Data="M5,13H16.17L11.58,17.59L13,19L20,12L13,5L11.59,6.41L16.17,11H5V13Z" /> |
|||
<TextBlock Grid.Column="1" FontSize="11" TextWrapping="Wrap" |
|||
Text="Above breakpoint → configured layout, drawer opens automatically" /> |
|||
</Grid> |
|||
</StackPanel> |
|||
</Border> |
|||
|
|||
<TextBlock Text="Breakpoint value" FontSize="12" Opacity="0.7" /> |
|||
<StackPanel Orientation="Horizontal" Spacing="8"> |
|||
<Slider x:Name="BreakpointSlider" Minimum="100" Maximum="900" Value="500" |
|||
Width="150" ValueChanged="OnBreakpointChanged" /> |
|||
<TextBlock x:Name="BreakpointText" Text="500" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Layout above breakpoint" FontSize="13" FontWeight="SemiBold" /> |
|||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7" |
|||
Text="The DrawerLayoutBehavior used when width exceeds the breakpoint." /> |
|||
<ComboBox x:Name="LayoutCombo" SelectedIndex="0" |
|||
SelectionChanged="OnLayoutChanged" HorizontalAlignment="Stretch"> |
|||
<ComboBoxItem Content="Split" /> |
|||
<ComboBoxItem Content="CompactInline" /> |
|||
<ComboBoxItem Content="CompactOverlay" /> |
|||
</ComboBox> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" /> |
|||
<TextBlock x:Name="WidthText" Text="Width: —" Opacity="0.7" /> |
|||
<TextBlock x:Name="ModeText" Text="Mode: Overlay" Opacity="0.7" TextWrapping="Wrap" /> |
|||
<TextBlock TextWrapping="Wrap" FontSize="11" Opacity="0.6" |
|||
Text="Resize the window to see the layout switch automatically." /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="6" |
|||
ClipToBounds="True"> |
|||
<DrawerPage x:Name="DemoDrawer" |
|||
DrawerLayoutBehavior="Split" |
|||
DrawerBreakpointLength="500" |
|||
DrawerLength="200"> |
|||
<DrawerPage.Drawer> |
|||
<StackPanel Margin="8" Spacing="4"> |
|||
<Button HorizontalAlignment="Stretch" Background="Transparent" |
|||
Click="OnMenuItemClick" Tag="Home"> |
|||
<StackPanel Orientation="Horizontal" Spacing="8"> |
|||
<PathIcon Width="16" Height="16" |
|||
Data="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /> |
|||
<TextBlock Text="Home" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
<Button HorizontalAlignment="Stretch" Background="Transparent" |
|||
Click="OnMenuItemClick" Tag="Profile"> |
|||
<StackPanel Orientation="Horizontal" Spacing="8"> |
|||
<PathIcon Width="16" Height="16" |
|||
Data="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> |
|||
<TextBlock Text="Profile" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
<Button HorizontalAlignment="Stretch" Background="Transparent" |
|||
Click="OnMenuItemClick" Tag="Settings"> |
|||
<StackPanel Orientation="Horizontal" Spacing="8"> |
|||
<PathIcon Width="16" Height="16" |
|||
Data="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.04 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.04 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /> |
|||
<TextBlock Text="Settings" VerticalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Button> |
|||
</StackPanel> |
|||
</DrawerPage.Drawer> |
|||
<DrawerPage.Content> |
|||
<ContentPage x:Name="DetailPage" Header="Home"> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8"> |
|||
<TextBlock x:Name="DetailTitleText" Text="Home" FontSize="24" FontWeight="Bold" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Select an item from the drawer." FontSize="13" Opacity="0.7" |
|||
TextWrapping="Wrap" TextAlignment="Center" MaxWidth="260" /> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
</DrawerPage.Content> |
|||
</DrawerPage> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,84 @@ |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Primitives; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class DrawerPageBreakpointPage : UserControl |
|||
{ |
|||
private bool _isLoaded; |
|||
|
|||
public DrawerPageBreakpointPage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
|
|||
protected override void OnLoaded(RoutedEventArgs e) |
|||
{ |
|||
base.OnLoaded(e); |
|||
_isLoaded = true; |
|||
DemoDrawer.PropertyChanged += OnDrawerPropertyChanged; |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
protected override void OnUnloaded(RoutedEventArgs e) |
|||
{ |
|||
base.OnUnloaded(e); |
|||
DemoDrawer.PropertyChanged -= OnDrawerPropertyChanged; |
|||
} |
|||
|
|||
private void OnDrawerPropertyChanged(object? sender, Avalonia.AvaloniaPropertyChangedEventArgs e) |
|||
{ |
|||
if (e.Property == DrawerPage.BoundsProperty) |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnBreakpointChanged(object? sender, RangeBaseValueChangedEventArgs e) |
|||
{ |
|||
if (!_isLoaded) |
|||
return; |
|||
var value = (int)e.NewValue; |
|||
DemoDrawer.DrawerBreakpointLength = value; |
|||
BreakpointText.Text = value.ToString(); |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (!_isLoaded) |
|||
return; |
|||
DemoDrawer.DrawerLayoutBehavior = LayoutCombo.SelectedIndex switch |
|||
{ |
|||
0 => DrawerLayoutBehavior.Split, |
|||
1 => DrawerLayoutBehavior.CompactInline, |
|||
2 => DrawerLayoutBehavior.CompactOverlay, |
|||
_ => DrawerLayoutBehavior.Split |
|||
}; |
|||
UpdateStatus(); |
|||
} |
|||
|
|||
private void OnMenuItemClick(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (!_isLoaded || sender is not Button button) |
|||
return; |
|||
var item = button.Tag?.ToString() ?? "Home"; |
|||
DetailTitleText.Text = item; |
|||
DetailPage.Header = item; |
|||
if (DemoDrawer.DrawerLayoutBehavior != DrawerLayoutBehavior.Split) |
|||
DemoDrawer.IsOpen = false; |
|||
} |
|||
|
|||
private void UpdateStatus() |
|||
{ |
|||
var isVertical = DemoDrawer.DrawerPlacement == DrawerPlacement.Top || |
|||
DemoDrawer.DrawerPlacement == DrawerPlacement.Bottom; |
|||
var length = isVertical ? DemoDrawer.Bounds.Height : DemoDrawer.Bounds.Width; |
|||
var breakpoint = DemoDrawer.DrawerBreakpointLength; |
|||
WidthText.Text = $"{(isVertical ? "Height" : "Width")}: {(int)length} px"; |
|||
var isOverlay = breakpoint > 0 && length > 0 && length < breakpoint; |
|||
ModeText.Text = isOverlay ? |
|||
"Mode: Overlay (below breakpoint)" : |
|||
$"Mode: {DemoDrawer.DrawerLayoutBehavior} (above breakpoint)"; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
using System; |
|||
using System.Threading.Tasks; |
|||
using Avalonia.Controls; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
internal interface ISampleNavigationService |
|||
{ |
|||
event EventHandler<NavigationStateChangedEventArgs>? StateChanged; |
|||
|
|||
Task NavigateToAsync(ViewModelBase viewModel); |
|||
|
|||
Task GoBackAsync(); |
|||
|
|||
Task PopToRootAsync(); |
|||
} |
|||
|
|||
internal interface ISamplePageFactory |
|||
{ |
|||
ContentPage CreatePage(ViewModelBase viewModel); |
|||
} |
|||
|
|||
internal sealed class NavigationStateChangedEventArgs : EventArgs |
|||
{ |
|||
public NavigationStateChangedEventArgs(string currentPageHeader, int navigationDepth, string lastAction) |
|||
{ |
|||
CurrentPageHeader = currentPageHeader; |
|||
NavigationDepth = navigationDepth; |
|||
LastAction = lastAction; |
|||
} |
|||
|
|||
public string CurrentPageHeader { get; } |
|||
|
|||
public int NavigationDepth { get; } |
|||
|
|||
public string LastAction { get; } |
|||
} |
|||
|
|||
internal sealed class SampleNavigationService : ISampleNavigationService |
|||
{ |
|||
private readonly NavigationPage _navigationPage; |
|||
private readonly ISamplePageFactory _pageFactory; |
|||
|
|||
public SampleNavigationService(NavigationPage navigationPage, ISamplePageFactory pageFactory) |
|||
{ |
|||
_navigationPage = navigationPage; |
|||
_pageFactory = pageFactory; |
|||
|
|||
_navigationPage.Pushed += (_, e) => PublishState($"Pushed {e.Page?.Header}"); |
|||
_navigationPage.Popped += (_, e) => PublishState($"Popped {e.Page?.Header}"); |
|||
_navigationPage.PoppedToRoot += (_, _) => PublishState("Popped to root"); |
|||
} |
|||
|
|||
public event EventHandler<NavigationStateChangedEventArgs>? StateChanged; |
|||
|
|||
public async Task NavigateToAsync(ViewModelBase viewModel) |
|||
{ |
|||
var page = _pageFactory.CreatePage(viewModel); |
|||
await _navigationPage.PushAsync(page); |
|||
} |
|||
|
|||
public async Task GoBackAsync() |
|||
{ |
|||
if (_navigationPage.NavigationStack.Count <= 1) |
|||
{ |
|||
PublishState("Already at the root page"); |
|||
return; |
|||
} |
|||
|
|||
await _navigationPage.PopAsync(); |
|||
} |
|||
|
|||
public async Task PopToRootAsync() |
|||
{ |
|||
if (_navigationPage.NavigationStack.Count <= 1) |
|||
{ |
|||
PublishState("Already at the root page"); |
|||
return; |
|||
} |
|||
|
|||
await _navigationPage.PopToRootAsync(); |
|||
} |
|||
|
|||
private void PublishState(string lastAction) |
|||
{ |
|||
var header = _navigationPage.CurrentPage?.Header?.ToString() ?? "None"; |
|||
|
|||
StateChanged?.Invoke(this, new NavigationStateChangedEventArgs( |
|||
header, |
|||
_navigationPage.NavigationStack.Count, |
|||
lastAction)); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:pages="using:ControlCatalog.Pages" |
|||
x:Class="ControlCatalog.Pages.NavigationPageMvvmPage" |
|||
x:DataType="pages:NavigationPageMvvmShellViewModel"> |
|||
<DockPanel> |
|||
<ScrollViewer DockPanel.Dock="Right" Width="300"> |
|||
<StackPanel Margin="12" Spacing="12"> |
|||
<TextBlock Text="MVVM Pattern" |
|||
FontSize="16" |
|||
FontWeight="SemiBold" |
|||
Foreground="{DynamicResource SystemControlHighlightAccentBrush}" /> |
|||
|
|||
<TextBlock TextWrapping="Wrap" |
|||
FontSize="12" |
|||
Opacity="0.75" |
|||
Text="This sample keeps NavigationPage in the view, sends commands from view models, routes push or pop operations through ISampleNavigationService, and resolves pages in a separate SamplePageFactory." /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Selected Project" |
|||
FontSize="13" |
|||
FontWeight="SemiBold" /> |
|||
|
|||
<ListBox ItemsSource="{Binding Projects}" |
|||
SelectedItem="{Binding SelectedProject, Mode=TwoWay}" |
|||
MaxHeight="180"> |
|||
<ListBox.ItemTemplate> |
|||
<DataTemplate x:DataType="pages:ProjectCardViewModel"> |
|||
<StackPanel Margin="0,2" Spacing="2"> |
|||
<TextBlock Text="{Binding Name}" |
|||
FontWeight="SemiBold" /> |
|||
<TextBlock Text="{Binding Owner}" |
|||
FontSize="11" |
|||
Opacity="0.65" /> |
|||
</StackPanel> |
|||
</DataTemplate> |
|||
</ListBox.ItemTemplate> |
|||
</ListBox> |
|||
|
|||
<Button Content="Open Selected Project" |
|||
Command="{Binding OpenSelectedProjectCommand}" /> |
|||
<Button Content="Back" |
|||
Command="{Binding GoBackCommand}" /> |
|||
<Button Content="Pop To Root" |
|||
Command="{Binding PopToRootCommand}" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Navigation State" |
|||
FontSize="13" |
|||
FontWeight="SemiBold" /> |
|||
<TextBlock Text="{Binding CurrentPageHeader, StringFormat=Current page: {0}}" |
|||
Opacity="0.75" /> |
|||
<TextBlock Text="{Binding NavigationDepth, StringFormat=Stack depth: {0}}" |
|||
Opacity="0.75" /> |
|||
<TextBlock Text="{Binding LastAction, StringFormat=Last action: {0}}" |
|||
Opacity="0.75" |
|||
TextWrapping="Wrap" /> |
|||
|
|||
<Separator /> |
|||
|
|||
<TextBlock Text="Selected Details" |
|||
FontSize="13" |
|||
FontWeight="SemiBold" /> |
|||
<TextBlock Text="{Binding SelectedProject.Status, StringFormat=Status: {0}}" |
|||
Opacity="0.75" /> |
|||
<TextBlock Text="{Binding SelectedProject.NextMilestone, StringFormat=Next milestone: {0}}" |
|||
Opacity="0.75" |
|||
TextWrapping="Wrap" /> |
|||
</StackPanel> |
|||
</ScrollViewer> |
|||
|
|||
<Border DockPanel.Dock="Right" |
|||
Width="1" |
|||
Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" /> |
|||
|
|||
<Border Margin="12" |
|||
BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="6" |
|||
ClipToBounds="True"> |
|||
<NavigationPage x:Name="DemoNav" /> |
|||
</Border> |
|||
</DockPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,32 @@ |
|||
using Avalonia.Controls; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class NavigationPageMvvmPage : UserControl |
|||
{ |
|||
private readonly NavigationPageMvvmShellViewModel _viewModel; |
|||
private bool _initialized; |
|||
|
|||
public NavigationPageMvvmPage() |
|||
{ |
|||
InitializeComponent(); |
|||
|
|||
ISamplePageFactory pageFactory = new SamplePageFactory(); |
|||
ISampleNavigationService navigationService = new SampleNavigationService(DemoNav, pageFactory); |
|||
_viewModel = new NavigationPageMvvmShellViewModel(navigationService); |
|||
DataContext = _viewModel; |
|||
|
|||
Loaded += OnLoaded; |
|||
} |
|||
|
|||
private async void OnLoaded(object? sender, RoutedEventArgs e) |
|||
{ |
|||
if (_initialized) |
|||
return; |
|||
|
|||
_initialized = true; |
|||
await _viewModel.InitializeAsync(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,252 @@ |
|||
using System; |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Templates; |
|||
using Avalonia.Layout; |
|||
using Avalonia.Media; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
internal sealed class SamplePageFactory : ISamplePageFactory |
|||
{ |
|||
public ContentPage CreatePage(ViewModelBase viewModel) => |
|||
viewModel switch |
|||
{ |
|||
WorkspaceViewModel workspace => CreateWorkspacePage(workspace), |
|||
ProjectDetailViewModel detail => CreateProjectDetailPage(detail), |
|||
ProjectActivityViewModel activity => CreateProjectActivityPage(activity), |
|||
_ => throw new InvalidOperationException($"Unsupported view model: {viewModel.GetType().Name}") |
|||
}; |
|||
|
|||
private static ContentPage CreateWorkspacePage(WorkspaceViewModel viewModel) |
|||
{ |
|||
var stack = new StackPanel |
|||
{ |
|||
Margin = new Thickness(20), |
|||
Spacing = 14, |
|||
}; |
|||
|
|||
stack.Children.Add(new TextBlock |
|||
{ |
|||
Text = viewModel.Title, |
|||
FontSize = 24, |
|||
FontWeight = FontWeight.Bold, |
|||
}); |
|||
stack.Children.Add(new TextBlock |
|||
{ |
|||
Text = viewModel.Description, |
|||
FontSize = 13, |
|||
Opacity = 0.75, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}); |
|||
|
|||
stack.Children.Add(new ItemsControl |
|||
{ |
|||
ItemsSource = viewModel.Projects, |
|||
ItemTemplate = new FuncDataTemplate<ProjectCardViewModel>((item, _) => |
|||
{ |
|||
if (item == null) |
|||
return new TextBlock(); |
|||
|
|||
var accentBrush = new SolidColorBrush(item.AccentColor); |
|||
var statusBadge = new Border |
|||
{ |
|||
Background = accentBrush, |
|||
CornerRadius = new CornerRadius(999), |
|||
Padding = new Thickness(10, 4), |
|||
Child = new TextBlock |
|||
{ |
|||
Text = item.Status, |
|||
Foreground = Brushes.White, |
|||
FontSize = 11, |
|||
FontWeight = FontWeight.SemiBold, |
|||
} |
|||
}; |
|||
DockPanel.SetDock(statusBadge, Dock.Right); |
|||
|
|||
var header = new DockPanel(); |
|||
header.Children.Add(statusBadge); |
|||
header.Children.Add(new TextBlock |
|||
{ |
|||
Text = item.Name, |
|||
FontSize = 17, |
|||
FontWeight = FontWeight.SemiBold, |
|||
}); |
|||
|
|||
return new Border |
|||
{ |
|||
Background = new SolidColorBrush(Color.FromArgb(20, item.AccentColor.R, item.AccentColor.G, item.AccentColor.B)), |
|||
BorderBrush = accentBrush, |
|||
BorderThickness = new Thickness(1), |
|||
CornerRadius = new CornerRadius(8), |
|||
Padding = new Thickness(14), |
|||
Margin = new Thickness(0, 0, 0, 8), |
|||
Child = new StackPanel |
|||
{ |
|||
Spacing = 8, |
|||
Children = |
|||
{ |
|||
header, |
|||
new TextBlock |
|||
{ |
|||
Text = item.Summary, |
|||
FontSize = 13, |
|||
Opacity = 0.72, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}, |
|||
new TextBlock |
|||
{ |
|||
Text = $"Owner: {item.Owner} • Next: {item.NextMilestone}", |
|||
FontSize = 12, |
|||
Opacity = 0.6, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}, |
|||
new Button |
|||
{ |
|||
Content = "Open Project", |
|||
HorizontalAlignment = HorizontalAlignment.Left, |
|||
Command = item.OpenCommand, |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
}) |
|||
}); |
|||
|
|||
var page = new ContentPage |
|||
{ |
|||
Header = "Workspace", |
|||
Content = new ScrollViewer { Content = stack }, |
|||
HorizontalContentAlignment = HorizontalAlignment.Stretch, |
|||
VerticalContentAlignment = VerticalAlignment.Stretch, |
|||
}; |
|||
|
|||
NavigationPage.SetHasBackButton(page, false); |
|||
return page; |
|||
} |
|||
|
|||
private static ContentPage CreateProjectDetailPage(ProjectDetailViewModel viewModel) |
|||
{ |
|||
var accentBrush = new SolidColorBrush(viewModel.AccentColor); |
|||
var panel = new StackPanel |
|||
{ |
|||
Margin = new Thickness(24, 20), |
|||
Spacing = 12, |
|||
}; |
|||
|
|||
panel.Children.Add(new Border |
|||
{ |
|||
Background = accentBrush, |
|||
CornerRadius = new CornerRadius(999), |
|||
Padding = new Thickness(12, 5), |
|||
HorizontalAlignment = HorizontalAlignment.Left, |
|||
Child = new TextBlock |
|||
{ |
|||
Text = viewModel.Status, |
|||
Foreground = Brushes.White, |
|||
FontSize = 11, |
|||
FontWeight = FontWeight.SemiBold, |
|||
} |
|||
}); |
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = viewModel.Name, |
|||
FontSize = 26, |
|||
FontWeight = FontWeight.Bold, |
|||
}); |
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = viewModel.Summary, |
|||
FontSize = 14, |
|||
Opacity = 0.78, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}); |
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = $"Owner: {viewModel.Owner}", |
|||
FontSize = 13, |
|||
Opacity = 0.68, |
|||
}); |
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = $"Next milestone: {viewModel.NextMilestone}", |
|||
FontSize = 13, |
|||
Opacity = 0.68, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}); |
|||
panel.Children.Add(new Separator { Margin = new Thickness(0, 4) }); |
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = "This page is resolved by SamplePageFactory from a ProjectDetailViewModel. The view model only requests navigation through ISampleNavigationService.", |
|||
FontSize = 12, |
|||
Opacity = 0.7, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}); |
|||
panel.Children.Add(new Button |
|||
{ |
|||
Content = "Open Activity", |
|||
HorizontalAlignment = HorizontalAlignment.Left, |
|||
Command = viewModel.OpenActivityCommand, |
|||
}); |
|||
|
|||
return new ContentPage |
|||
{ |
|||
Header = viewModel.Name, |
|||
Background = new SolidColorBrush(Color.FromArgb(18, viewModel.AccentColor.R, viewModel.AccentColor.G, viewModel.AccentColor.B)), |
|||
Content = new ScrollViewer { Content = panel }, |
|||
HorizontalContentAlignment = HorizontalAlignment.Stretch, |
|||
VerticalContentAlignment = VerticalAlignment.Stretch, |
|||
}; |
|||
} |
|||
|
|||
private static ContentPage CreateProjectActivityPage(ProjectActivityViewModel viewModel) |
|||
{ |
|||
var panel = new StackPanel |
|||
{ |
|||
Margin = new Thickness(24, 20), |
|||
Spacing = 10, |
|||
}; |
|||
|
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = "Activity Timeline", |
|||
FontSize = 24, |
|||
FontWeight = FontWeight.Bold, |
|||
}); |
|||
panel.Children.Add(new TextBlock |
|||
{ |
|||
Text = $"Recent updates for {viewModel.Name}. This page was opened from a command on the detail view model.", |
|||
FontSize = 13, |
|||
Opacity = 0.74, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
}); |
|||
|
|||
foreach (var item in viewModel.Items) |
|||
{ |
|||
panel.Children.Add(new Border |
|||
{ |
|||
Background = new SolidColorBrush(Color.FromArgb(14, viewModel.AccentColor.R, viewModel.AccentColor.G, viewModel.AccentColor.B)), |
|||
BorderBrush = new SolidColorBrush(Color.FromArgb(80, viewModel.AccentColor.R, viewModel.AccentColor.G, viewModel.AccentColor.B)), |
|||
BorderThickness = new Thickness(1), |
|||
CornerRadius = new CornerRadius(6), |
|||
Padding = new Thickness(12, 10), |
|||
Child = new TextBlock |
|||
{ |
|||
Text = item, |
|||
FontSize = 13, |
|||
TextWrapping = TextWrapping.Wrap, |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return new ContentPage |
|||
{ |
|||
Header = "Activity", |
|||
Content = new ScrollViewer { Content = panel }, |
|||
HorizontalContentAlignment = HorizontalAlignment.Stretch, |
|||
VerticalContentAlignment = VerticalAlignment.Stretch, |
|||
}; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,238 @@ |
|||
using System.Collections.Generic; |
|||
using System.Threading.Tasks; |
|||
using Avalonia.Media; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public sealed class NavigationPageMvvmShellViewModel : ViewModelBase |
|||
{ |
|||
private readonly ISampleNavigationService _navigationService; |
|||
private string _currentPageHeader = "Not initialized"; |
|||
private string _lastAction = "Waiting for first load"; |
|||
private int _navigationDepth; |
|||
private ProjectCardViewModel? _selectedProject; |
|||
|
|||
internal NavigationPageMvvmShellViewModel(ISampleNavigationService navigationService) |
|||
{ |
|||
_navigationService = navigationService; |
|||
_navigationService.StateChanged += OnStateChanged; |
|||
|
|||
Workspace = new WorkspaceViewModel(CreateProjects(navigationService)); |
|||
SelectedProject = Workspace.Projects[0]; |
|||
|
|||
OpenSelectedProjectCommand = MiniCommand.CreateFromTask(OpenSelectedProjectAsync); |
|||
GoBackCommand = MiniCommand.CreateFromTask(_navigationService.GoBackAsync); |
|||
PopToRootCommand = MiniCommand.CreateFromTask(_navigationService.PopToRootAsync); |
|||
} |
|||
|
|||
internal WorkspaceViewModel Workspace { get; } |
|||
|
|||
public IReadOnlyList<ProjectCardViewModel> Projects => Workspace.Projects; |
|||
|
|||
public MiniCommand OpenSelectedProjectCommand { get; } |
|||
|
|||
public MiniCommand GoBackCommand { get; } |
|||
|
|||
public MiniCommand PopToRootCommand { get; } |
|||
|
|||
public string CurrentPageHeader |
|||
{ |
|||
get => _currentPageHeader; |
|||
set => this.RaiseAndSetIfChanged(ref _currentPageHeader, value); |
|||
} |
|||
|
|||
public int NavigationDepth |
|||
{ |
|||
get => _navigationDepth; |
|||
set => this.RaiseAndSetIfChanged(ref _navigationDepth, value); |
|||
} |
|||
|
|||
public string LastAction |
|||
{ |
|||
get => _lastAction; |
|||
set => this.RaiseAndSetIfChanged(ref _lastAction, value); |
|||
} |
|||
|
|||
public ProjectCardViewModel? SelectedProject |
|||
{ |
|||
get => _selectedProject; |
|||
set => this.RaiseAndSetIfChanged(ref _selectedProject, value); |
|||
} |
|||
|
|||
public Task InitializeAsync() => _navigationService.NavigateToAsync(Workspace); |
|||
|
|||
private async Task OpenSelectedProjectAsync() |
|||
{ |
|||
if (SelectedProject == null) |
|||
return; |
|||
|
|||
await SelectedProject.OpenCommandAsync(); |
|||
} |
|||
|
|||
private void OnStateChanged(object? sender, NavigationStateChangedEventArgs e) |
|||
{ |
|||
CurrentPageHeader = e.CurrentPageHeader; |
|||
NavigationDepth = e.NavigationDepth; |
|||
LastAction = e.LastAction; |
|||
} |
|||
|
|||
private static IReadOnlyList<ProjectCardViewModel> CreateProjects(ISampleNavigationService navigationService) => |
|||
new[] |
|||
{ |
|||
new ProjectCardViewModel( |
|||
"Release Radar", |
|||
"Marta Collins", |
|||
"Ready for QA", |
|||
"Coordinate the 11.0 release checklist and lock down the final regression window.", |
|||
"Freeze build on Friday", |
|||
Color.Parse("#0063B1"), |
|||
navigationService, |
|||
new[] |
|||
{ |
|||
"Release notes draft updated with accessibility fixes.", |
|||
"Package validation finished for desktop artifacts.", |
|||
"Remaining task, confirm browser smoke test coverage." |
|||
}), |
|||
new ProjectCardViewModel( |
|||
"Support Console", |
|||
"Jae Kim", |
|||
"Active Sprint", |
|||
"Consolidate customer incidents into a triage board and route them to platform owners.", |
|||
"Triage review in 2 hours", |
|||
Color.Parse("#0F7B0F"), |
|||
navigationService, |
|||
new[] |
|||
{ |
|||
"Five customer reports grouped under input routing.", |
|||
"Hotfix candidate approved for preview branch.", |
|||
"Awaiting macOS verification on native embed scenarios." |
|||
}), |
|||
new ProjectCardViewModel( |
|||
"Docs Refresh", |
|||
"Anika Patel", |
|||
"Needs Review", |
|||
"Refresh navigation samples and walkthrough docs so the gallery matches the current API.", |
|||
"Sample review tomorrow", |
|||
Color.Parse("#8E562E"), |
|||
navigationService, |
|||
new[] |
|||
{ |
|||
"NavigationPage sample matrix reviewed with design.", |
|||
"MVVM walkthrough draft linked from the docs backlog.", |
|||
"Outstanding task, capture one more screenshot for drawer navigation." |
|||
}), |
|||
}; |
|||
} |
|||
|
|||
internal sealed class WorkspaceViewModel : ViewModelBase |
|||
{ |
|||
public WorkspaceViewModel(IReadOnlyList<ProjectCardViewModel> projects) |
|||
{ |
|||
Projects = projects; |
|||
} |
|||
|
|||
public string Title => "Team Workspace"; |
|||
|
|||
public string Description => |
|||
"Each card is a project view model with its own command. The command asks ISampleNavigationService to navigate with the next view model, and SamplePageFactory resolves the matching ContentPage."; |
|||
|
|||
public IReadOnlyList<ProjectCardViewModel> Projects { get; } |
|||
} |
|||
|
|||
public sealed class ProjectCardViewModel : ViewModelBase |
|||
{ |
|||
private readonly ISampleNavigationService _navigationService; |
|||
|
|||
internal ProjectCardViewModel( |
|||
string name, |
|||
string owner, |
|||
string status, |
|||
string summary, |
|||
string nextMilestone, |
|||
Color accentColor, |
|||
ISampleNavigationService navigationService, |
|||
IReadOnlyList<string> activityItems) |
|||
{ |
|||
Name = name; |
|||
Owner = owner; |
|||
Status = status; |
|||
Summary = summary; |
|||
NextMilestone = nextMilestone; |
|||
AccentColor = accentColor; |
|||
ActivityItems = activityItems; |
|||
_navigationService = navigationService; |
|||
|
|||
OpenCommand = MiniCommand.CreateFromTask(OpenCommandAsync); |
|||
} |
|||
|
|||
public string Name { get; } |
|||
|
|||
public string Owner { get; } |
|||
|
|||
public string Status { get; } |
|||
|
|||
public string Summary { get; } |
|||
|
|||
public string NextMilestone { get; } |
|||
|
|||
public Color AccentColor { get; } |
|||
|
|||
public IReadOnlyList<string> ActivityItems { get; } |
|||
|
|||
public MiniCommand OpenCommand { get; } |
|||
|
|||
public Task OpenCommandAsync() |
|||
{ |
|||
return _navigationService.NavigateToAsync(new ProjectDetailViewModel(this, _navigationService)); |
|||
} |
|||
} |
|||
|
|||
internal sealed class ProjectDetailViewModel : ViewModelBase |
|||
{ |
|||
private readonly ProjectCardViewModel _project; |
|||
private readonly ISampleNavigationService _navigationService; |
|||
|
|||
public ProjectDetailViewModel(ProjectCardViewModel project, ISampleNavigationService navigationService) |
|||
{ |
|||
_project = project; |
|||
_navigationService = navigationService; |
|||
OpenActivityCommand = MiniCommand.CreateFromTask(OpenActivityAsync); |
|||
} |
|||
|
|||
public string Name => _project.Name; |
|||
|
|||
public string Owner => _project.Owner; |
|||
|
|||
public string Status => _project.Status; |
|||
|
|||
public string Summary => _project.Summary; |
|||
|
|||
public string NextMilestone => _project.NextMilestone; |
|||
|
|||
public Color AccentColor => _project.AccentColor; |
|||
|
|||
public MiniCommand OpenActivityCommand { get; } |
|||
|
|||
private Task OpenActivityAsync() |
|||
{ |
|||
return _navigationService.NavigateToAsync(new ProjectActivityViewModel(_project)); |
|||
} |
|||
} |
|||
|
|||
internal sealed class ProjectActivityViewModel : ViewModelBase |
|||
{ |
|||
public ProjectActivityViewModel(ProjectCardViewModel project) |
|||
{ |
|||
Name = project.Name; |
|||
AccentColor = project.AccentColor; |
|||
Items = project.ActivityItems; |
|||
} |
|||
|
|||
public string Name { get; } |
|||
|
|||
public Color AccentColor { get; } |
|||
|
|||
public IReadOnlyList<string> Items { get; } |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
using Avalonia.Controls; |
|||
|
|||
namespace Avalonia.Automation.Peers; |
|||
|
|||
public class CarouselPageAutomationPeer : ControlAutomationPeer |
|||
{ |
|||
public CarouselPageAutomationPeer(CarouselPage owner) |
|||
: base(owner) |
|||
{ |
|||
} |
|||
|
|||
public new CarouselPage Owner => (CarouselPage)base.Owner; |
|||
|
|||
protected override AutomationControlType GetAutomationControlTypeCore() |
|||
=> AutomationControlType.Pane; |
|||
|
|||
protected override string? GetNameCore() |
|||
{ |
|||
var result = base.GetNameCore(); |
|||
|
|||
if (string.IsNullOrEmpty(result)) |
|||
result = Owner.Header?.ToString(); |
|||
|
|||
return result; |
|||
} |
|||
} |
|||
@ -0,0 +1,418 @@ |
|||
using System.Collections; |
|||
using System.Collections.Generic; |
|||
using System.Linq; |
|||
using Avalonia.Animation; |
|||
using Avalonia.Automation; |
|||
using Avalonia.Automation.Peers; |
|||
using Avalonia.Collections; |
|||
using Avalonia.Controls.Metadata; |
|||
using Avalonia.Controls.Presenters; |
|||
using Avalonia.Controls.Primitives; |
|||
using Avalonia.Controls.Templates; |
|||
using Avalonia.Input; |
|||
using Avalonia.Interactivity; |
|||
using Avalonia.Media; |
|||
using Avalonia.Threading; |
|||
|
|||
namespace Avalonia.Controls |
|||
{ |
|||
/// <summary>
|
|||
/// A page that displays its child pages in a horizontally scrollable carousel,
|
|||
/// with optional animated page transitions.
|
|||
/// </summary>
|
|||
[TemplatePart("PART_Carousel", typeof(Carousel))] |
|||
public class CarouselPage : SelectingMultiPage |
|||
{ |
|||
private Carousel? _carousel; |
|||
|
|||
private static readonly FuncTemplate<Panel?> DefaultPanel = |
|||
new FuncTemplate<Panel?>(() => new VirtualizingCarouselPanel()); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="ItemsPanel"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<ITemplate<Panel?>> ItemsPanelProperty = |
|||
ItemsControl.ItemsPanelProperty.AddOwner<CarouselPage>(); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="PageTransition"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<IPageTransition?> PageTransitionProperty = |
|||
AvaloniaProperty.Register<CarouselPage, IPageTransition?>(nameof(PageTransition)); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="IsGestureEnabled"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<bool> IsGestureEnabledProperty = |
|||
AvaloniaProperty.Register<CarouselPage, bool>(nameof(IsGestureEnabled), true); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="IsKeyboardNavigationEnabled"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<bool> IsKeyboardNavigationEnabledProperty = |
|||
AvaloniaProperty.Register<CarouselPage, bool>(nameof(IsKeyboardNavigationEnabled), true); |
|||
|
|||
static CarouselPage() |
|||
{ |
|||
ItemsPanelProperty.OverrideDefaultValue<CarouselPage>(DefaultPanel); |
|||
FocusableProperty.OverrideDefaultValue<CarouselPage>(true); |
|||
} |
|||
|
|||
public CarouselPage() |
|||
{ |
|||
SetCurrentValue(PagesProperty, new AvaloniaList<Page>()); |
|||
} |
|||
|
|||
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e) |
|||
{ |
|||
base.OnAttachedToVisualTree(e); |
|||
AddHandler(PointerWheelChangedEvent, OnPointerWheelChanged, RoutingStrategies.Bubble); |
|||
} |
|||
|
|||
protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e) |
|||
{ |
|||
base.OnDetachedFromVisualTree(e); |
|||
RemoveHandler(PointerWheelChangedEvent, OnPointerWheelChanged); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets the items panel template used to arrange page items.
|
|||
/// </summary>
|
|||
public ITemplate<Panel?> ItemsPanel |
|||
{ |
|||
get => GetValue(ItemsPanelProperty); |
|||
set => SetValue(ItemsPanelProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets the animated page transition used when the selected page changes.
|
|||
/// </summary>
|
|||
public IPageTransition? PageTransition |
|||
{ |
|||
get => GetValue(PageTransitionProperty); |
|||
set => SetValue(PageTransitionProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets whether swipe and scroll gestures can be used to navigate between pages.
|
|||
/// </summary>
|
|||
public bool IsGestureEnabled |
|||
{ |
|||
get => GetValue(IsGestureEnabledProperty); |
|||
set => SetValue(IsGestureEnabledProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets whether keyboard shortcuts (arrow keys, Home/End) can be used to navigate between pages.
|
|||
/// </summary>
|
|||
public bool IsKeyboardNavigationEnabled |
|||
{ |
|||
get => GetValue(IsKeyboardNavigationEnabledProperty); |
|||
set => SetValue(IsKeyboardNavigationEnabledProperty, value); |
|||
} |
|||
|
|||
protected override void OnApplyTemplate(TemplateAppliedEventArgs e) |
|||
{ |
|||
base.OnApplyTemplate(e); |
|||
|
|||
if (_carousel != null) |
|||
{ |
|||
_carousel.SelectionChanged -= OnCarouselSelectionChanged; |
|||
_carousel.ContainerPrepared -= OnCarouselContainerPrepared; |
|||
} |
|||
|
|||
_carousel = e.NameScope.Find<Carousel>("PART_Carousel"); |
|||
|
|||
if (_carousel != null) |
|||
{ |
|||
_carousel.SelectionChanged += OnCarouselSelectionChanged; |
|||
_carousel.ContainerPrepared += OnCarouselContainerPrepared; |
|||
_carousel.PageTransition = PageTransition; |
|||
_carousel.ItemsPanel = ItemsPanel; |
|||
_carousel.ItemTemplate = PageTemplate; |
|||
_carousel.IsSwipeEnabled = IsGestureEnabled; |
|||
_carousel.ItemsSource = (IEnumerable?)ItemsSource ?? Pages; |
|||
|
|||
if (SelectedIndex >= 0) |
|||
{ |
|||
_carousel.SelectedIndex = SelectedIndex; |
|||
} |
|||
|
|||
UpdateActivePage(); |
|||
} |
|||
} |
|||
|
|||
protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change) |
|||
{ |
|||
base.OnPropertyChanged(change); |
|||
|
|||
if (change.Property == PageTransitionProperty && _carousel != null) |
|||
_carousel.PageTransition = change.GetNewValue<IPageTransition?>(); |
|||
else if (change.Property == ItemsPanelProperty && _carousel != null) |
|||
_carousel.ItemsPanel = change.GetNewValue<ITemplate<Panel?>>(); |
|||
else if (change.Property == PageTemplateProperty && _carousel != null) |
|||
{ |
|||
_carousel.ItemTemplate = change.GetNewValue<IDataTemplate?>(); |
|||
if (ItemsSource != null) |
|||
UpdateActivePage(); |
|||
} |
|||
else if (change.Property == IsGestureEnabledProperty && _carousel != null) |
|||
_carousel.IsSwipeEnabled = change.GetNewValue<bool>(); |
|||
else if (change.Property == ItemsSourceProperty && _carousel != null) |
|||
{ |
|||
_carousel.ItemsSource = change.GetNewValue<IEnumerable?>() ?? Pages; |
|||
UpdateActivePage(); |
|||
} |
|||
else if (change.Property == PagesProperty && ItemsSource == null && _carousel != null) |
|||
_carousel.ItemsSource = change.GetNewValue<IEnumerable<Page>?>(); |
|||
} |
|||
|
|||
protected override void UpdateActivePage(NavigationType navigationType) |
|||
{ |
|||
if (_carousel != null) |
|||
{ |
|||
var index = _carousel.SelectedIndex; |
|||
if (index >= 0) |
|||
{ |
|||
UpdateSelection(index, navigationType); |
|||
} |
|||
else if (GetPageCount() > 0) |
|||
{ |
|||
ApplySelectedIndex(0); |
|||
} |
|||
} |
|||
else if (GetPageCount() > 0) |
|||
{ |
|||
var index = CoercePreTemplateSelectedIndex(SelectedIndex); |
|||
if (ItemsSource != null) |
|||
{ |
|||
StoreSelectedIndex(index); |
|||
} |
|||
else |
|||
{ |
|||
var page = ResolvePageAtIndex(index); |
|||
|
|||
if (index != SelectedIndex || !ReferenceEquals(SelectedPage, page)) |
|||
CommitSelection(index, page, navigationType); |
|||
} |
|||
} |
|||
} |
|||
|
|||
protected override void ApplySelectedIndex(int index) |
|||
{ |
|||
if (_carousel != null) |
|||
{ |
|||
_carousel.SelectedIndex = index; |
|||
} |
|||
else |
|||
{ |
|||
var pageCount = GetPageCount(); |
|||
|
|||
if (pageCount > 0) |
|||
{ |
|||
var coercedIndex = CoercePreTemplateSelectedIndex(index); |
|||
if (ItemsSource != null) |
|||
{ |
|||
StoreSelectedIndex(coercedIndex); |
|||
} |
|||
else |
|||
{ |
|||
var newPage = ResolvePageAtIndex(coercedIndex); |
|||
CommitSelection(coercedIndex, newPage); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
// Preserve preselection until pages exist.
|
|||
StoreSelectedIndex(index); |
|||
} |
|||
} |
|||
} |
|||
|
|||
protected override void OnKeyDown(KeyEventArgs e) |
|||
{ |
|||
base.OnKeyDown(e); |
|||
if (e.Handled || !IsKeyboardNavigationEnabled) |
|||
return; |
|||
|
|||
bool isRtl = IsRightToLeft; |
|||
bool next = isRtl ? e.Key == Key.Left : e.Key == Key.Right; |
|||
bool prev = isRtl ? e.Key == Key.Right : e.Key == Key.Left; |
|||
|
|||
var pageCount = GetPageCount(); |
|||
if (next || e.Key == Key.Down) |
|||
{ |
|||
if (SelectedIndex < pageCount - 1) |
|||
{ |
|||
ApplySelectedIndex(SelectedIndex + 1); |
|||
e.Handled = true; |
|||
} |
|||
} |
|||
else if (prev || e.Key == Key.Up) |
|||
{ |
|||
if (SelectedIndex > 0) |
|||
{ |
|||
ApplySelectedIndex(SelectedIndex - 1); |
|||
e.Handled = true; |
|||
} |
|||
} |
|||
else if (e.Key == Key.Home) |
|||
{ |
|||
if (pageCount > 0 && SelectedIndex != 0) |
|||
{ |
|||
ApplySelectedIndex(0); |
|||
e.Handled = true; |
|||
} |
|||
} |
|||
else if (e.Key == Key.End) |
|||
{ |
|||
if (pageCount > 0 && SelectedIndex != pageCount - 1) |
|||
{ |
|||
ApplySelectedIndex(pageCount - 1); |
|||
e.Handled = true; |
|||
} |
|||
} |
|||
} |
|||
|
|||
private void OnCarouselSelectionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (_carousel == null) |
|||
return; |
|||
|
|||
var newIndex = _carousel.SelectedIndex; |
|||
var newPage = ResolveDisplayedPageAtIndex(newIndex); |
|||
if (newIndex == SelectedIndex && ReferenceEquals(newPage, SelectedPage)) |
|||
return; |
|||
|
|||
UpdateSelection(newIndex, NavigationType.Replace); |
|||
} |
|||
|
|||
private void OnCarouselContainerPrepared(object? sender, ContainerPreparedEventArgs e) |
|||
{ |
|||
if (_carousel == null || e.Index != _carousel.SelectedIndex) |
|||
return; |
|||
|
|||
Dispatcher.UIThread.Post( |
|||
() => |
|||
{ |
|||
if (_carousel != null && _carousel.SelectedIndex == e.Index) |
|||
UpdateSelection(e.Index, NavigationType.Replace); |
|||
}, |
|||
DispatcherPriority.Loaded); |
|||
} |
|||
|
|||
private void OnPointerWheelChanged(object? sender, PointerWheelEventArgs e) |
|||
{ |
|||
if (!IsGestureEnabled) |
|||
return; |
|||
|
|||
bool isRtl = IsRightToLeft; |
|||
var pageCount = GetPageCount(); |
|||
bool goNext = e.Delta.Y < 0 || (isRtl ? e.Delta.X < 0 : e.Delta.X > 0); |
|||
bool goPrev = e.Delta.Y > 0 || (isRtl ? e.Delta.X > 0 : e.Delta.X < 0); |
|||
|
|||
if (goNext && SelectedIndex < pageCount - 1) |
|||
{ |
|||
ApplySelectedIndex(SelectedIndex + 1); |
|||
e.Handled = true; |
|||
} |
|||
else if (goPrev && SelectedIndex > 0) |
|||
{ |
|||
ApplySelectedIndex(SelectedIndex - 1); |
|||
e.Handled = true; |
|||
} |
|||
} |
|||
|
|||
protected override AutomationPeer OnCreateAutomationPeer() => new CarouselPageAutomationPeer(this); |
|||
|
|||
private void UpdateAccessibilityName(int index, int pageCount, Page? page) |
|||
{ |
|||
var header = page?.Header?.ToString(); |
|||
var position = pageCount > 0 ? $"Page {index + 1} of {pageCount}" : string.Empty; |
|||
var name = string.IsNullOrEmpty(header) ? position : string.IsNullOrEmpty(position) ? header : $"{position}: {header}"; |
|||
// CarouselPageAutomationPeer.GetNameCore reads this via base.GetNameCore(), which returns
|
|||
// AutomationProperties.Name when set. Position and header are encoded here rather than in the
|
|||
// peer so that the name stays current without requiring the peer to re-query the carousel state.
|
|||
AutomationProperties.SetName(this, name); |
|||
} |
|||
|
|||
private bool IsRightToLeft => FlowDirection == Media.FlowDirection.RightToLeft; |
|||
|
|||
private int GetPageCount() |
|||
{ |
|||
if (_carousel != null) |
|||
return _carousel.ItemCount; |
|||
|
|||
var source = (IEnumerable?)ItemsSource ?? Pages; |
|||
|
|||
if (source is ICollection nonGenericCol) |
|||
return nonGenericCol.Count; |
|||
if (source is ICollection<Page> col) |
|||
return col.Count; |
|||
if (source != null) |
|||
{ |
|||
int count = 0; |
|||
foreach (var _ in source) |
|||
count++; |
|||
return count; |
|||
} |
|||
return 0; |
|||
} |
|||
|
|||
private int CoercePreTemplateSelectedIndex(int index) |
|||
{ |
|||
var pageCount = GetPageCount(); |
|||
if (pageCount <= 0) |
|||
return index; |
|||
|
|||
return (uint)index < (uint)pageCount ? index : 0; |
|||
} |
|||
|
|||
private void UpdateSelection(int index, NavigationType navigationType) |
|||
{ |
|||
var page = ResolveDisplayedPageAtIndex(index); |
|||
var pageCount = GetPageCount(); |
|||
|
|||
if (page == null && ItemsSource != null) |
|||
{ |
|||
StoreSelectedIndex(index); |
|||
UpdateAccessibilityName(index, pageCount, null); |
|||
return; |
|||
} |
|||
|
|||
CommitSelection(index, page, navigationType); |
|||
UpdateAccessibilityName(index, pageCount, page); |
|||
} |
|||
|
|||
private Page? ResolveDisplayedPageAtIndex(int index) |
|||
{ |
|||
if (index < 0) |
|||
return null; |
|||
|
|||
if (_carousel?.ContainerFromIndex(index) is { } container) |
|||
return TryGetPageFromContainer(container); |
|||
|
|||
return ItemsSource == null ? ResolvePageAtIndex(index) : null; |
|||
} |
|||
|
|||
private static Page? TryGetPageFromContainer(Control container) |
|||
{ |
|||
if (container is Page page) |
|||
return page; |
|||
|
|||
if (container is ContentPresenter presenter) |
|||
{ |
|||
if (presenter.Child == null) |
|||
presenter.UpdateChild(); |
|||
|
|||
return presenter.Child as Page; |
|||
} |
|||
|
|||
if (container is ContentControl contentControl) |
|||
return contentControl.Content as Page; |
|||
|
|||
return null; |
|||
} |
|||
|
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,30 @@ |
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> |
|||
<Design.PreviewWith> |
|||
<Border Width="400" Height="300"> |
|||
<CarouselPage> |
|||
<ContentPage Header="Page 1"> |
|||
<TextBlock Text="First page" HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 2"> |
|||
<TextBlock Text="Second page" HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
|
|||
<ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage"> |
|||
<Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBaseBrush}" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Carousel Name="PART_Carousel" |
|||
Background="{TemplateBinding Background}" |
|||
ItemTemplate="{TemplateBinding PageTemplate}" |
|||
PageTransition="{TemplateBinding PageTransition}" |
|||
ItemsPanel="{TemplateBinding ItemsPanel}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch" /> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</ControlTheme> |
|||
</ResourceDictionary> |
|||
@ -0,0 +1,30 @@ |
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> |
|||
<Design.PreviewWith> |
|||
<Border Width="400" Height="300"> |
|||
<CarouselPage> |
|||
<ContentPage Header="Page 1"> |
|||
<TextBlock Text="First page" HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
<ContentPage Header="Page 2"> |
|||
<TextBlock Text="Second page" HorizontalAlignment="Center" VerticalAlignment="Center" /> |
|||
</ContentPage> |
|||
</CarouselPage> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
|
|||
<ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Carousel Name="PART_Carousel" |
|||
Background="{TemplateBinding Background}" |
|||
ItemTemplate="{TemplateBinding PageTemplate}" |
|||
PageTransition="{TemplateBinding PageTransition}" |
|||
ItemsPanel="{TemplateBinding ItemsPanel}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch" /> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</ControlTheme> |
|||
</ResourceDictionary> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue