Inital setup of navigation system, styling, and changing icons

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

@@ -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>

critterfolio/CritterFolio/CritterFolio.Android/Resources/drawable-v31/avalonia_anim.xml

@@ -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>

critterfolio/CritterFolio/CritterFolio.Android/Resources/values-night/colors.xml

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

critterfolio/CritterFolio/CritterFolio.Android/Resources/values-v31/styles.xml

@@ -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>

critterfolio/CritterFolio/CritterFolio/App.axaml

@@ -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>

critterfolio/CritterFolio/CritterFolio/CritterFolio.csproj

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

critterfolio/CritterFolio/CritterFolio/Navigation.axaml

@@ -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>

critterfolio/CritterFolio/CritterFolio/Navigation.axaml.cs

@@ -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();
+    }
+}

critterfolio/CritterFolio/CritterFolio/Pages/Page.cs

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

critterfolio/CritterFolio/CritterFolio/Styles/MainStyles.axaml

@@ -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>

critterfolio/CritterFolio/CritterFolio/Sys.cs

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

critterfolio/CritterFolio/CritterFolio/Views/MainView.axaml

@@ -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>

critterfolio/CritterFolio/CritterFolio/Views/MainView.axaml.cs

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

critterfolio/CritterFolio/CritterFolio/Views/MainWindow.axaml

@@ -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>