Browse Source
A new Home page (first in the drawer) modeled on the Accelerate demo dashboard: a gradient hero banner with floating control glyphs animated via keyframed TranslateTransforms, followed by categorized card sections for every catalog page. Cards carry an icon badge, title and one-line description, and clicking one navigates via SelectedPageIndex so the drawer selection stays in sync. PageItem gains Description/Category and the view model exposes grouped HomeSections plus NavigateToPageCommand. Card colors are self-contained theme dictionaries so the page works across Fluent/Fluent2/Simple in both variants. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>pull/21771/head
Mike James
3 months ago
5 changed files with 373 additions and 71 deletions
@ -0,0 +1,174 @@ |
|||
<ContentPage Theme="{StaticResource ScrollPage}" |
|||
xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:local="using:ControlCatalog" |
|||
xmlns:viewModels="using:ControlCatalog.ViewModels" |
|||
x:Class="ControlCatalog.Pages.HomePage" |
|||
x:DataType="viewModels:MainWindowViewModel" |
|||
Header="Home"> |
|||
|
|||
<ContentPage.Resources> |
|||
<ResourceDictionary> |
|||
<ResourceDictionary.ThemeDictionaries> |
|||
<ResourceDictionary x:Key="Default"> |
|||
<SolidColorBrush x:Key="HomeCardBackground" Color="#FFFFFF" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrush" Color="#E5E5EA" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrushHover" Color="#3E6DF3" /> |
|||
<SolidColorBrush x:Key="HomeSubtleForeground" Color="#64646E" /> |
|||
<SolidColorBrush x:Key="HomeBadgeBackground" Color="#E8EFFD" /> |
|||
<SolidColorBrush x:Key="HomeBadgeForeground" Color="#3462D9" /> |
|||
<SolidColorBrush x:Key="HomeSectionDivider" Color="#EBEBEF" /> |
|||
</ResourceDictionary> |
|||
<ResourceDictionary x:Key="Dark"> |
|||
<SolidColorBrush x:Key="HomeCardBackground" Color="#2B2B33" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrush" Color="#3A3A45" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrushHover" Color="#8AB4FF" /> |
|||
<SolidColorBrush x:Key="HomeSubtleForeground" Color="#9C9CAB" /> |
|||
<SolidColorBrush x:Key="HomeBadgeBackground" Color="#31395A" /> |
|||
<SolidColorBrush x:Key="HomeBadgeForeground" Color="#8AB4FF" /> |
|||
<SolidColorBrush x:Key="HomeSectionDivider" Color="#3A3A45" /> |
|||
</ResourceDictionary> |
|||
</ResourceDictionary.ThemeDictionaries> |
|||
</ResourceDictionary> |
|||
</ContentPage.Resources> |
|||
|
|||
<ContentPage.Styles> |
|||
<!-- Neutralize the themed Button chrome so only the inner card Border shows. --> |
|||
<Style Selector="Button.card /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="BorderBrush" Value="Transparent" /> |
|||
</Style> |
|||
<Style Selector="Button.card:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="BorderBrush" Value="Transparent" /> |
|||
</Style> |
|||
<Style Selector="Button.card:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="BorderBrush" Value="Transparent" /> |
|||
</Style> |
|||
<Style Selector="Button.card > Border"> |
|||
<Setter Property="Transitions"> |
|||
<Transitions> |
|||
<BrushTransition Property="BorderBrush" Duration="0:0:0.1" /> |
|||
</Transitions> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Button.card:pointerover > Border"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource HomeCardBorderBrushHover}" /> |
|||
</Style> |
|||
</ContentPage.Styles> |
|||
|
|||
<StackPanel Spacing="28" Margin="0,0,15,20" HorizontalAlignment="Stretch"> |
|||
|
|||
<!-- Hero banner --> |
|||
<Border CornerRadius="16" ClipToBounds="True" Height="220" HorizontalAlignment="Stretch"> |
|||
<Border.Background> |
|||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%"> |
|||
<GradientStop Offset="0" Color="#6D28D9" /> |
|||
<GradientStop Offset="0.55" Color="#4338CA" /> |
|||
<GradientStop Offset="1" Color="#2563EB" /> |
|||
</LinearGradientBrush> |
|||
</Border.Background> |
|||
<Grid ClipToBounds="True"> |
|||
<!-- Floating control glyphs, animated from code-behind --> |
|||
<Canvas IsHitTestVisible="False"> |
|||
<PathIcon x:Name="FloatIcon1" |
|||
Data="{x:Static local:Icons.CursorClick}" |
|||
Foreground="#26FFFFFF" |
|||
Width="120" Height="120" |
|||
Canvas.Left="-30" Canvas.Bottom="-25" /> |
|||
<PathIcon x:Name="FloatIcon2" |
|||
Data="{x:Static local:Icons.Palette}" |
|||
Foreground="#21FFFFFF" |
|||
Width="96" Height="96" |
|||
Canvas.Left="200" Canvas.Top="-30" /> |
|||
<PathIcon x:Name="FloatIcon3" |
|||
Data="{x:Static local:Icons.Calendar}" |
|||
Foreground="#26FFFFFF" |
|||
Width="110" Height="110" |
|||
Canvas.Right="-25" Canvas.Top="-20" /> |
|||
<PathIcon x:Name="FloatIcon4" |
|||
Data="{x:Static local:Icons.Toggle}" |
|||
Foreground="#21FFFFFF" |
|||
Width="130" Height="130" |
|||
Canvas.Right="170" Canvas.Bottom="-40" /> |
|||
</Canvas> |
|||
<!-- Centered lockup --> |
|||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="10"> |
|||
<Image Source="/Assets/Icon.png" Height="64" /> |
|||
<TextBlock Text="Avalonia Control Catalog" |
|||
FontSize="26" FontWeight="Bold" |
|||
Foreground="White" |
|||
HorizontalAlignment="Center" /> |
|||
<TextBlock Text="Explore every control, on every platform, in every theme" |
|||
FontSize="13" |
|||
Foreground="#B3FFFFFF" |
|||
HorizontalAlignment="Center" /> |
|||
</StackPanel> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<!-- Card sections --> |
|||
<ItemsControl ItemsSource="{Binding HomeSections}"> |
|||
<ItemsControl.ItemTemplate> |
|||
<DataTemplate DataType="viewModels:HomeSection"> |
|||
<StackPanel Spacing="14" Margin="0,0,0,26"> |
|||
<TextBlock Text="{Binding Title}" |
|||
FontSize="19" FontWeight="Bold" /> |
|||
<ItemsControl ItemsSource="{Binding Items}"> |
|||
<ItemsControl.ItemsPanel> |
|||
<ItemsPanelTemplate> |
|||
<WrapPanel Orientation="Horizontal" /> |
|||
</ItemsPanelTemplate> |
|||
</ItemsControl.ItemsPanel> |
|||
<ItemsControl.ItemTemplate> |
|||
<DataTemplate DataType="viewModels:PageItem"> |
|||
<Button Classes="card" |
|||
Command="{Binding $parent[ContentPage].((viewModels:MainWindowViewModel)DataContext).NavigateToPageCommand}" |
|||
CommandParameter="{Binding}" |
|||
Margin="0,0,12,12" |
|||
Padding="0" |
|||
Background="Transparent" |
|||
BorderThickness="0" |
|||
Cursor="Hand"> |
|||
<Border Background="{DynamicResource HomeCardBackground}" |
|||
BorderBrush="{DynamicResource HomeCardBorderBrush}" |
|||
BorderThickness="1" |
|||
CornerRadius="10" |
|||
Padding="16,14" |
|||
Width="248" |
|||
MinHeight="118" |
|||
BoxShadow="0 1 3 0 #0D000000"> |
|||
<StackPanel Spacing="10"> |
|||
<Border Background="{DynamicResource HomeBadgeBackground}" |
|||
CornerRadius="8" |
|||
Width="36" Height="36" |
|||
HorizontalAlignment="Left"> |
|||
<PathIcon Data="{Binding IconData}" |
|||
Foreground="{DynamicResource HomeBadgeForeground}" |
|||
Width="18" Height="18" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center" /> |
|||
</Border> |
|||
<StackPanel Spacing="3"> |
|||
<TextBlock Text="{Binding Header}" |
|||
FontSize="14" FontWeight="SemiBold" /> |
|||
<TextBlock Text="{Binding Description}" |
|||
FontSize="12" |
|||
Foreground="{DynamicResource HomeSubtleForeground}" |
|||
TextWrapping="Wrap" |
|||
MaxLines="2" /> |
|||
</StackPanel> |
|||
</StackPanel> |
|||
</Border> |
|||
</Button> |
|||
</DataTemplate> |
|||
</ItemsControl.ItemTemplate> |
|||
</ItemsControl> |
|||
</StackPanel> |
|||
</DataTemplate> |
|||
</ItemsControl.ItemTemplate> |
|||
</ItemsControl> |
|||
|
|||
</StackPanel> |
|||
</ContentPage> |
|||
@ -0,0 +1,78 @@ |
|||
using System; |
|||
using Avalonia; |
|||
using Avalonia.Animation; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Media; |
|||
using Avalonia.Styling; |
|||
using Avalonia.VisualTree; |
|||
using ControlCatalog.ViewModels; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class HomePage : ContentPage |
|||
{ |
|||
public HomePage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
|
|||
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e) |
|||
{ |
|||
base.OnAttachedToVisualTree(e); |
|||
|
|||
// Pages hosted in a NavigationPage inherit the navigator as DataContext;
|
|||
// the card grid binds to MainWindowViewModel, so resolve it from MainView.
|
|||
if (DataContext is not MainWindowViewModel) |
|||
DataContext = this.FindAncestorOfType<MainView>()?.DataContext; |
|||
|
|||
StartFloatingAnimation(FloatIcon1, 12, 8, TimeSpan.FromSeconds(12)); |
|||
StartFloatingAnimation(FloatIcon2, -14, 8, TimeSpan.FromSeconds(10)); |
|||
StartFloatingAnimation(FloatIcon3, -12, -12, TimeSpan.FromSeconds(14)); |
|||
StartFloatingAnimation(FloatIcon4, 12, -8, TimeSpan.FromSeconds(11)); |
|||
} |
|||
|
|||
private static void StartFloatingAnimation(Control target, double dx, double dy, TimeSpan duration) |
|||
{ |
|||
var transform = new TranslateTransform(); |
|||
target.RenderTransform = transform; |
|||
|
|||
var animation = new Animation |
|||
{ |
|||
Duration = duration, |
|||
IterationCount = IterationCount.Infinite, |
|||
Children = |
|||
{ |
|||
new KeyFrame |
|||
{ |
|||
Cue = new Cue(0d), |
|||
Setters = |
|||
{ |
|||
new Setter(TranslateTransform.XProperty, 0d), |
|||
new Setter(TranslateTransform.YProperty, 0d), |
|||
} |
|||
}, |
|||
new KeyFrame |
|||
{ |
|||
Cue = new Cue(0.5d), |
|||
Setters = |
|||
{ |
|||
new Setter(TranslateTransform.XProperty, dx), |
|||
new Setter(TranslateTransform.YProperty, dy), |
|||
} |
|||
}, |
|||
new KeyFrame |
|||
{ |
|||
Cue = new Cue(1d), |
|||
Setters = |
|||
{ |
|||
new Setter(TranslateTransform.XProperty, 0d), |
|||
new Setter(TranslateTransform.YProperty, 0d), |
|||
} |
|||
}, |
|||
} |
|||
}; |
|||
|
|||
_ = animation.RunAsync(target); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue