Bellsworne/critterfolio
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inital setup of navigation system, styling, and changing icons

Browse Source
This commit is contained in:
Chris Bell
2026-01-03 12:48:43 -06:00
parent 600704ffaf
commit dffd35543a
22 changed files with 150 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
critterfolio/CritterFolio/CritterFolio.Android/Icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 38 KiB

66
critterfolio/CritterFolio/CritterFolio.Android/Resources/drawable-night-v31/avalonia_anim.xml
View File

@@ -1,66 +0,0 @@
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="vector"
android:width="128dp"
android:height="128dp"
android:viewportWidth="128"
android:viewportHeight="128">
<group
android:name="wrapper"
android:translateX="21"
android:translateY="21">
<group android:name="group">
<path
android:name="path"
android:pathData="M 74.853 85.823 L 75.368 85.823 C 80.735 85.823 85.144 81.803 85.761 76.602 L 85.836 41.76 C 85.225 18.593 66.254 0 42.939 0 C 19.24 0 0.028 19.212 0.028 42.912 C 0.028 66.357 18.831 85.418 42.18 85.823 L 74.853 85.823 Z"
android:strokeWidth="1"/>
<path
android:name="path_1"
android:pathData="M 43.059 14.614 C 29.551 14.614 18.256 24.082 15.445 36.743 C 18.136 37.498 20.109 39.968 20.109 42.899 C 20.109 45.831 18.136 48.301 15.445 49.055 C 18.256 61.716 29.551 71.184 43.059 71.184 C 47.975 71.184 52.599 69.93 56.628 67.723 L 56.628 70.993 L 71.344 70.993 L 71.344 44.072 C 71.357 43.714 71.344 43.26 71.344 42.899 C 71.344 27.278 58.68 14.614 43.059 14.614 Z M 29.51 42.899 C 29.51 35.416 35.576 29.35 43.059 29.35 C 50.541 29.35 56.607 35.416 56.607 42.899 C 56.607 50.382 50.541 56.448 43.059 56.448 C 35.576 56.448 29.51 50.382 29.51 42.899 Z"
android:strokeWidth="1"
android:fillType="evenOdd"/>
<path
android:name="path_2"
android:pathData="M 18.105 42.88 C 18.105 45.38 16.078 47.407 13.579 47.407 C 11.079 47.407 9.052 45.38 9.052 42.88 C 9.052 40.381 11.079 38.354 13.579 38.354 C 16.078 38.354 18.105 40.381 18.105 42.88 Z"
android:strokeWidth="1"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="fillColor"
android:duration="1000"
android:valueFrom="#00ffffff"
android:valueTo="#161c2d"
android:valueType="colorType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path_1">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="fillColor"
android:duration="1000"
android:valueFrom="#00ffffff"
android:valueTo="#f9f9fb"
android:valueType="colorType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path_2">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="fillColor"
android:duration="1000"
android:valueFrom="#00ffffff"
android:valueTo="#f9f9fb"
android:valueType="colorType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>

71
critterfolio/CritterFolio/CritterFolio.Android/Resources/drawable-v31/avalonia_anim.xml
View File

@@ -1,71 +0,0 @@
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="vector"
android:width="128dp"
android:height="128dp"
android:viewportWidth="128"
android:viewportHeight="128">
<group
android:name="wrapper"
android:translateX="21"
android:translateY="21">
<group android:name="group">
<path
android:name="path"
android:pathData="M 74.853 85.823 L 75.368 85.823 C 80.735 85.823 85.144 81.803 85.761 76.602 L 85.836 41.76 C 85.225 18.593 66.254 0 42.939 0 C 19.24 0 0.028 19.212 0.028 42.912 C 0.028 66.357 18.831 85.418 42.18 85.823 L 74.853 85.823 Z"
android:fillColor="#00ffffff"
android:strokeWidth="1"/>
<path
android:name="path_1"
android:pathData="M 43.059 14.614 C 29.551 14.614 18.256 24.082 15.445 36.743 C 18.136 37.498 20.109 39.968 20.109 42.899 C 20.109 45.831 18.136 48.301 15.445 49.055 C 18.256 61.716 29.551 71.184 43.059 71.184 C 47.975 71.184 52.599 69.93 56.628 67.723 L 56.628 70.993 L 71.344 70.993 L 71.344 44.072 C 71.357 43.714 71.344 43.26 71.344 42.899 C 71.344 27.278 58.68 14.614 43.059 14.614 Z M 29.51 42.899 C 29.51 35.416 35.576 29.35 43.059 29.35 C 50.541 29.35 56.607 35.416 56.607 42.899 C 56.607 50.382 50.541 56.448 43.059 56.448 C 35.576 56.448 29.51 50.382 29.51 42.899 Z"
android:fillColor="#00ffffff"
android:strokeWidth="1"
android:fillType="evenOdd"/>
<path
android:name="path_2"
android:pathData="M 18.105 42.88 C 18.105 45.38 16.078 47.407 13.579 47.407 C 11.079 47.407 9.052 45.38 9.052 42.88 C 9.052 40.381 11.079 38.354 13.579 38.354 C 16.078 38.354 18.105 40.381 18.105 42.88 Z"
android:fillColor="#00ffffff"
android:strokeWidth="1"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="path_2">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="fillColor"
android:startOffset="100"
android:duration="900"
android:valueFrom="#00ffffff"
android:valueTo="#161c2d"
android:valueType="colorType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="fillColor"
android:duration="500"
android:valueFrom="#00ffffff"
android:valueTo="#f9f9fb"
android:valueType="colorType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path_1">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="fillColor"
android:startOffset="100"
android:duration="900"
android:valueFrom="#00ffffff"
android:valueTo="#161c2d"
android:valueType="colorType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>

BIN
critterfolio/CritterFolio/CritterFolio.Android/Resources/drawable/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

4
critterfolio/CritterFolio/CritterFolio.Android/Resources/values-night/colors.xml
View File

@@ -1,4 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="splash_background">#212121</color>
</resources>

21
critterfolio/CritterFolio/CritterFolio.Android/Resources/values-v31/styles.xml
View File

@@ -1,21 +0,0 @@
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme">
</style>
<style name="MyTheme.NoActionBar" parent="@style/Theme.AppCompat.NoActionBar">
<item name="android:windowActionBar">false</item>
<item name="android:windowBackground">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowSplashScreenBackground">@color/splash_background</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/avalonia_anim</item>
<item name="android:windowSplashScreenAnimationDuration">1000</item>
<item name="postSplashScreenTheme">@style/MyTheme.Main</item>
</style>
<style name="MyTheme.Main"
parent ="MyTheme.NoActionBar">
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>

10
critterfolio/CritterFolio/CritterFolio/App.axaml
View File

@@ -11,5 +11,15 @@
<Application.Styles>
<FluentTheme />
<StyleInclude Source="Styles/MainStyles.axaml" />
</Application.Styles>
<Application.Resources>
<FontFamily x:Key="Phosphor">/Assets/Fonts/Phosphor.ttf#Phosphor</FontFamily>
<FontFamily x:Key="PhosphorFill">/Assets/Fonts/Phosphor-Fill.ttf#Phosphor-Fill</FontFamily>
<SolidColorBrush x:Key="PrimaryBackground">#1a1a1a</SolidColorBrush>
<SolidColorBrush x:Key="PrimaryForeground">#FAFAFA</SolidColorBrush>
<SolidColorBrush x:Key="AccentBackground">#26309b</SolidColorBrush>
</Application.Resources>
</Application>

BIN
critterfolio/CritterFolio/CritterFolio/Assets/Fonts/Phosphor-Fill.ttf Normal file
View File

Binary file not shown.

BIN
critterfolio/CritterFolio/CritterFolio/Assets/Fonts/Phosphor.ttf Normal file
View File

Binary file not shown.

BIN
critterfolio/CritterFolio/CritterFolio/Assets/icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

4
critterfolio/CritterFolio/CritterFolio/CritterFolio.csproj
View File

@@ -22,4 +22,8 @@
<PackageReference Include="CommunityToolkit.Mvvm" />
<PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" />
</ItemGroup>
<ItemGroup>
<Folder Include="Assets\Fonts\" />
</ItemGroup>
</Project>

12
critterfolio/CritterFolio/CritterFolio/Navigation.axaml Normal file
View File

@@ -0,0 +1,12 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="CritterFolio.Navigation">
<Grid HorizontalAlignment="Stretch" Height="50" Background="{DynamicResource AccentBackground}" ColumnDefinitions="Auto, *, Auto">
<Button Grid.Column="0" x:Name="BackButton" Classes="headerBttn" Content="&#xe058;" HorizontalAlignment="Center"/>
<Label Grid.Column="1" x:Name="PageTitle" VerticalAlignment="Center" Foreground="{DynamicResource PrimaryForeground}" Margin="20, 0, 0, 0"/>
<StackPanel Grid.Column="2" x:Name="HeaderButtons" Orientation="Horizontal" HorizontalAlignment="Center"/>
</Grid>
</UserControl>

79
critterfolio/CritterFolio/CritterFolio/Navigation.axaml.cs Normal file
View File

@@ -0,0 +1,79 @@
using System.Collections.Generic;
using System.ComponentModel;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using CritterFolio.Pages;
namespace CritterFolio;
public partial class Navigation : UserControl
{
public Page? CurrentPage
{
get
{
_pageStack.TryPeek(out var page);
return page;
}
}
private Panel? _pageContainer;
private Stack<Page> _pageStack = [];
public Navigation()
{
InitializeComponent();
}
public void Init(Panel pageContainer)
{
_pageContainer = pageContainer;
}
public void SetTitle(string title)
{
PageTitle.Content = title;
}
public void ShowBack()
{
BackButton.IsVisible = true;
}
public void HideBack()
{
BackButton.IsVisible = false;
}
public void AddHeaderButton(Button button)
{
button.Classes.Add("headerBttn");
HeaderButtons.Children.Add(button);
}
public void RemoveHeaderButton(Button button)
{
HeaderButtons.Children.Remove(button);
}
public void PushPage(Page page)
{
_pageStack.Push(page);
}
public void PopPage()
{
_pageStack.Pop();
}
private void RefreshPage()
{
_pageContainer?.Children.Clear();
if (CurrentPage is null) return;
_pageContainer?.Children.Add(CurrentPage);
CurrentPage.Refresh();
}
}

8
critterfolio/CritterFolio/CritterFolio/Pages/Page.cs Normal file
View File

@@ -0,0 +1,8 @@
using Avalonia.Controls;
namespace CritterFolio.Pages;
public abstract class Page : UserControl
{
public abstract void Refresh();
}

23
critterfolio/CritterFolio/CritterFolio/Styles/MainStyles.axaml Normal file
View File

@@ -0,0 +1,23 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Border Padding="20">
<!-- Add Controls for Previewer Here -->
</Border>
</Design.PreviewWith>
<Style Selector="Window">
</Style>
<Style Selector="Button.headerBttn">
<Setter Property="FontFamily" Value="{DynamicResource Phosphor}"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource PrimaryForeground}"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Height" Value="50"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</Styles>

6
critterfolio/CritterFolio/CritterFolio/Sys.cs Normal file
View File

@@ -0,0 +1,6 @@
namespace CritterFolio;
public static class Sys
{
public static Navigation? Navigation { get; set; }
}

7
critterfolio/CritterFolio/CritterFolio/Views/MainView.axaml
View File

@@ -3,6 +3,7 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:CritterFolio.ViewModels"
xmlns:critterFolio="clr-namespace:CritterFolio"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="CritterFolio.Views.MainView"
x:DataType="vm:MainViewModel">
@@ -12,6 +13,10 @@
<vm:MainViewModel />
</Design.DataContext>
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid RowDefinitions="Auto, *" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="{DynamicResource PrimaryBackground}">
<critterFolio:Navigation Grid.Row="0" x:Name="Nav"/>
</Grid>
</UserControl>

1
critterfolio/CritterFolio/CritterFolio/Views/MainView.axaml.cs
View File

@@ -7,5 +7,6 @@ public partial class MainView : UserControl
public MainView()
{
InitializeComponent();
Sys.Navigation = Nav;
}
}

2
critterfolio/CritterFolio/CritterFolio/Views/MainWindow.axaml
View File

@@ -6,7 +6,7 @@
xmlns:views="using:CritterFolio.Views"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="CritterFolio.Views.MainWindow"
Icon="/Assets/avalonia-logo.ico"
Icon="/Assets/icon.ico"
Title="CritterFolio">
<views:MainView />
</Window>

BIN
icon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 480 B

BIN
icon-400x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB