Made a reusable profile button control

critterfolio/CritterFolio/CritterFolio.Android/MainActivity.cs

@@ -29,7 +29,7 @@ public class MainActivity : AvaloniaMainActivity<App>
             {
                 //base.OnBackPressed();
                 // CA1422: This call site is reachable on: 'Android' 21.0 and later. 'AvaloniaActivity.OnBackPressed()' is obsoleted on: 'Android' 33.0 and later.
-                // Just call exit from Sytem.Environment for now which does not shutdown cleanly
+                // Just call exit from System.Environment for now which does not shutdown cleanly
                 Environment.Exit(0);
             }
         }

critterfolio/CritterFolio/CritterFolio/App.axaml.cs

@@ -35,6 +35,9 @@ public partial class App : Application
                 DataContext = new MainViewModel()
             };
         }
+        
+        // Other init stuff here
+        
 
         base.OnFrameworkInitializationCompleted();
     }

critterfolio/CritterFolio/CritterFolio/Controls/ProfileButton.axaml

@@ -0,0 +1,18 @@
+<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.Controls.ProfileButton">
+    <Button HorizontalAlignment="Stretch" Height="100" CornerRadius="25" 
+            Background="{DynamicResource AccentBackground}"
+            Foreground="{DynamicResource PrimaryForeground}"
+            Padding="10"
+            VerticalContentAlignment="Center"
+            x:Name="MainButton">
+        <Grid ColumnDefinitions="Auto, *, Auto">
+            <Image x:Name="ProfileImage" Grid.Column="0" Width="80" Height="80" Stretch="UniformToFill" Source="avares://CritterFolio/Assets/Icon.png" />
+            <Label x:Name="ProfileNameLabel" Grid.Column="1" VerticalAlignment="Center" FontSize="18" Margin="20, 0" />
+        </Grid>
+    </Button>
+</UserControl>

critterfolio/CritterFolio/CritterFolio/Controls/ProfileButton.axaml.cs

@@ -0,0 +1,36 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media.Imaging;
+using CritterFolio.DataModels;
+
+namespace CritterFolio.Controls;
+
+public partial class ProfileButton : UserControl
+{
+    
+    public event EventHandler? Clicked;
+    
+    public ProfileButton()
+    {
+        InitializeComponent();
+
+        MainButton.Click += (sender, args) => { Clicked?.Invoke(sender, args); };
+    }
+
+    public void Init(Critter critter)
+    {
+        try
+        {
+            var pfp = new Bitmap(critter.ProfileImagePath);
+            ProfileImage.Source = pfp;
+        }
+        catch (Exception e)
+        {
+            Console.WriteLine(e);
+        }
+
+        ProfileNameLabel.Content = string.IsNullOrEmpty(critter.Name) ? "Critter" : critter.Name ;
+    }
+}

critterfolio/CritterFolio/CritterFolio/Navigation.axaml

@@ -10,8 +10,9 @@
                x:Name="PageTitle"
                VerticalAlignment="Center"
                Foreground="{DynamicResource PrimaryForeground}"
-               Margin="20, 0, 0, 0"
+               Margin="10, 0, 0, 0"
-               FontSize="20"/>
+               FontSize="20"
+               FontWeight="Medium"/>
         <StackPanel Grid.Column="2" x:Name="HeaderButtons" Orientation="Horizontal" HorizontalAlignment="Center"/>
     </Grid>
 </UserControl>

critterfolio/CritterFolio/CritterFolio/Pages/HomePage.axaml

@@ -4,8 +4,13 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="CritterFolio.Pages.HomePage">
-    <StackPanel>
+    <ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-        <Label>Home</Label>
+        <StackPanel Spacing="10">
-        <Button x:Name="TestBttn" Classes="normal">Test</Button>
+            <Label Classes="heading1">Critters</Label>
-    </StackPanel>
+                <StackPanel x:Name="CritterStack" HorizontalAlignment="Stretch" Spacing="10">
+                    
+                </StackPanel>
+            <Button x:Name="AddButton" Classes="icon" HorizontalAlignment="Stretch">&#xe3d4;</Button>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>

critterfolio/CritterFolio/CritterFolio/Pages/HomePage.axaml.cs

@@ -4,6 +4,8 @@ using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
+using CritterFolio.Controls;
+using CritterFolio.DataModels;
 
 namespace CritterFolio.Pages;
 
@@ -22,30 +24,50 @@ public partial class HomePage : Page
         base.Refresh();
         
         Sys.Navigation?.SetTitle(Title);
-
+        CreateHeaderButtons();
-        TestBttn.Click += TestPage;
         
-        var headBtn = new Button()
+        AddButton.Click += AddButtonClicked;
-        {
-            Classes = { "headerBttn" },
-            Content = "\ue248"
-        };
-
-        headBtn.Click += (sender, args) =>
-        {
-            Console.WriteLine("Save button clicked");
-        };
         
-        Sys.Navigation?.AddHeaderButton(headBtn);
+        RefreshProfileButtons();
     }
 
-    private void TestPage(object? sender, RoutedEventArgs args)
+    private void CreateHeaderButtons()
+    {
+        var settingsBttn = new Button()
+        {
+            Classes = { "headerBttn" },
+            Content = "\ue270"
+        };
+
+        settingsBttn.Click += SettingsPage;
+        Sys.Navigation?.AddHeaderButton(settingsBttn);
+    }
+
+    private void RefreshProfileButtons()
+    {
+        CritterStack.Children.Clear();
+    }
+
+    private void AddButtonClicked(object? sender, RoutedEventArgs e)
+    {
+        var newCritter = new Critter()
+        {
+            Name = "Toriel",
+        };
+
+        var newProfButton = new ProfileButton();
+        newProfButton.Init(newCritter);
+        
+        CritterStack.Children.Add(newProfButton);
+    }
+
+    private void SettingsPage(object? sender, RoutedEventArgs args)
     {
         Sys.Navigation?.PushPage(new TestPage());
     }
 
     protected override void ClearConnections()
     {
-        TestBttn.Click -= TestPage;
+        AddButton.Click -= AddButtonClicked;
     }
 }

critterfolio/CritterFolio/CritterFolio/Pages/TestPage.axaml.cs

@@ -6,7 +6,7 @@ namespace CritterFolio.Pages;
 
 public partial class TestPage : Page
 {
-    public override string Title { get; } = "Test";
+    public override string Title { get; } = "Settings";
     
     public TestPage()
     {

critterfolio/CritterFolio/CritterFolio/Styles/MainStyles.axaml

@@ -28,4 +28,21 @@
         <Setter Property="VerticalContentAlignment" Value="Center"/>
         <Setter Property="HorizontalContentAlignment" Value="Center"/>
     </Style>
+    
+    <Style Selector="Button.icon">
+        <Setter Property="Background" Value="{DynamicResource AccentBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryForeground}"/>
+        <Setter Property="MinWidth" Value="40"/>
+        <Setter Property="Height" Value="40"/>
+        <Setter Property="FontSize" Value="20"/>
+        <Setter Property="Padding" Value="10"></Setter>
+        <Setter Property="CornerRadius" Value="20"></Setter>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="FontFamily" Value="{DynamicResource Phosphor}" />
+    </Style>
+    
+    <Style Selector="Label.heading1">
+        <Setter Property="FontSize" Value="20" />
+    </Style>
 </Styles>

critterfolio/CritterFolio/CritterFolio/Sys.cs

@@ -1,6 +1,11 @@
+using System;
+using System.IO;
+
 namespace CritterFolio;
 
 public static class Sys
 {
+    public static string UserDataPath => Path.Combine(AppContext.BaseDirectory, "UserData");
+
     public static Navigation? Navigation { get; set; }
 }