Added BetaExampleButton control

src/PixiEditor.AvaloniaUI/Data/Localization/Languages/en.json

@@ -676,5 +676,6 @@
   "RAW_LAYER_OUTPUT": "Raw",
   
   "BETA_EXAMPLE_FILES": "Beta Example Files",
-  "POND_EXAMPLE": "Pond"
+  "POND_EXAMPLE": "Pond",
+  "TREE_EXAMPLE": "Windy Tree"
 }

src/PixiEditor.AvaloniaUI/Views/Windows/BetaExampleButton.axaml

@@ -0,0 +1,39 @@
+<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"
+             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+             xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
+             xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
+             xmlns:windows="clr-namespace:PixiEditor.AvaloniaUI.Views.Windows"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.AvaloniaUI.Views.Windows.BetaExampleButton">
+    <StackPanel>
+        <Button Margin="0,10,0,0" HorizontalAlignment="Center"
+                Width="100" Height="100"
+                Padding="0"
+                Command="{Binding OpenCommand, RelativeSource={RelativeSource AncestorType=windows:BetaExampleButton}}"
+                x:Name="fileButton">
+            <Grid Width="100" Height="100">
+                <visuals:SurfaceControl
+                    Surface="{Binding BetaExampleFile.PreviewImage, RelativeSource={RelativeSource AncestorType=windows:BetaExampleButton}}"
+                    Margin="10"
+                    Stretch="Uniform"
+                    x:Name="image">
+                    <ui:RenderOptionsBindable.BitmapInterpolationMode>
+                        <MultiBinding
+                            Converter="{converters:WidthToBitmapScalingModeConverter}">
+                            <Binding Path="BetaExampleFile.PreviewImage.Size.X" RelativeSource="{RelativeSource AncestorType=windows:BetaExampleButton}" />
+                            <Binding ElementName="image" Path="Width" />
+                        </MultiBinding>
+                    </ui:RenderOptionsBindable.BitmapInterpolationMode>
+                </visuals:SurfaceControl>
+            </Grid>
+        </Button>
+
+        <TextBlock ui:Translator.Key="{Binding DisplayName, RelativeSource={RelativeSource AncestorType=windows:BetaExampleButton}}"
+                   Width="110" TextAlignment="Center"
+                   TextTrimming="CharacterEllipsis"
+                   FontSize="18" Margin="10,10,10,2" HorizontalAlignment="Center" />
+    </StackPanel>
+</UserControl>

src/PixiEditor.AvaloniaUI/Views/Windows/BetaExampleButton.axaml.cs

@@ -0,0 +1,77 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.Input;
+using PixiEditor.AvaloniaUI.Helpers.Extensions;
+using PixiEditor.AvaloniaUI.ViewModels;
+using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
+
+namespace PixiEditor.AvaloniaUI.Views.Windows;
+
+public partial class BetaExampleButton : UserControl
+{
+    public static readonly StyledProperty<RelayCommand> CloseCommandProperty =
+        AvaloniaProperty.Register<BetaExampleButton, RelayCommand>(nameof(CloseCommand));
+
+    public static readonly StyledProperty<string> FileNameProperty =
+        AvaloniaProperty.Register<BetaExampleButton, string>(nameof(FileName));
+
+    public static readonly StyledProperty<string> DisplayNameProperty =
+        AvaloniaProperty.Register<BetaExampleButton, string>(nameof(DisplayName));
+
+    public static readonly StyledProperty<BetaExampleFile> BetaExampleFileProperty =
+        AvaloniaProperty.Register<BetaExampleButton, BetaExampleFile>(nameof(BetaExampleFile));
+
+    public RelayCommand CloseCommand
+    {
+        get => GetValue(CloseCommandProperty);
+        set => SetValue(CloseCommandProperty, value);
+    }
+
+    public string FileName
+    {
+        get => GetValue(FileNameProperty);
+        set => SetValue(FileNameProperty, value);
+    }
+
+    public string DisplayName
+    {
+        get => GetValue(DisplayNameProperty);
+        set => SetValue(DisplayNameProperty, value);
+    }
+    
+    public BetaExampleFile BetaExampleFile
+    {
+        get => GetValue(BetaExampleFileProperty);
+        set => SetValue(BetaExampleFileProperty, value);
+    }
+
+    public AsyncRelayCommand OpenCommand { get; }
+
+    public BetaExampleButton()
+    {
+        OpenCommand = new AsyncRelayCommand(OpenExample);
+        
+        InitializeComponent();
+        FileNameProperty.Changed.AddClassHandler((BetaExampleButton o, AvaloniaPropertyChangedEventArgs<string> args) => FileNameChanged(o, args));
+    }
+
+    private static void FileNameChanged(BetaExampleButton sender, AvaloniaPropertyChangedEventArgs<string> e)
+    {
+        sender.BetaExampleFile = new BetaExampleFile(e.NewValue.Value, sender.DisplayName);
+    }
+    
+    private async Task OpenExample()
+    {
+        await using var stream = BetaExampleFile.GetStream();
+        
+        var bytes = new byte[stream.Length];
+        await stream.ReadExactlyAsync(bytes);
+
+        Application.Current.ForDesktopMainWindow(mainWindow => mainWindow.Activate());
+        CloseCommand.Execute(null);
+        
+        ViewModelMain.Current.FileSubViewModel.OpenRecoveredDotPixi(null, bytes);
+    }
+
+}

src/PixiEditor.AvaloniaUI/Views/Windows/HelloTherePopup.axaml

@@ -81,43 +81,10 @@
                         <TextBlock FontSize="23" FontWeight="SemiBold" HorizontalAlignment="Center"
                                    ui:Translator.Key="BETA_EXAMPLE_FILES" />
                         
-                        <ItemsControl ItemsSource="{Binding BetaExampleFiles}">
-                            <ItemsControl.ItemTemplate>
-                                <DataTemplate DataType="{x:Type windows:BetaExampleFile}">
-                                    <Grid>
-                                        <StackPanel Margin="8,5,8,0">
-                                            <Button Margin="0,10,0,0" HorizontalAlignment="Center"
-                                                    Width="100" Height="100"
-                                                    Padding="0"
-                                                    Command="{Binding OpenBetaExampleCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}"
-                                                    CommandParameter="{Binding}"
-                                                    x:Name="fileButton">
-                                                <Grid Width="100" Height="100">
-                                                    <visuals:SurfaceControl
-                                                        Surface="{Binding PreviewImage}"
-                                                        Margin="10"
-                                                        Stretch="Uniform"
-                                                        x:Name="image">
-                                                        <ui:RenderOptionsBindable.BitmapInterpolationMode>
-                                                            <MultiBinding
-                                                                Converter="{converters:WidthToBitmapScalingModeConverter}">
-                                                                <Binding Path="PreviewImage.Size.X" />
-                                                                <Binding ElementName="image" Path="Width" />
-                                                            </MultiBinding>
-                                                        </ui:RenderOptionsBindable.BitmapInterpolationMode>
-                                                    </visuals:SurfaceControl>
-                                                </Grid>
-                                            </Button>
-
-                                            <TextBlock ui:Translator.LocalizedString="{Binding DisplayName}"
-                                                       Width="110" TextAlignment="Center"
-                                                       TextTrimming="CharacterEllipsis"
-                                                       FontSize="18" Margin="10,10,10,2" HorizontalAlignment="Center" />
-                                        </StackPanel>
-                                    </Grid>
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
+                        <StackPanel Orientation="Horizontal">
+                            <windows:BetaExampleButton FileName="Pond.pixi" DisplayName="POND_EXAMPLE" CloseCommand="{Binding CloseCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}" />
+                            <windows:BetaExampleButton FileName="Tree.pixi" DisplayName="TREE_EXAMPLE" CloseCommand="{Binding CloseCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}" />
+                        </StackPanel>
                         
                         <TextBlock Margin="0,8,0,0" FontSize="23" FontWeight="SemiBold" HorizontalAlignment="Center"
                                    ui:Translator.Key="RECENT_FILES" />

src/PixiEditor.AvaloniaUI/Views/Windows/HelloTherePopup.axaml.cs

@@ -26,8 +26,6 @@ internal partial class HelloTherePopup : PixiEditorPopup
 {
     public RecentlyOpenedCollection RecentlyOpened { get => FileViewModel.RecentlyOpened; }
     
-    public List<BetaExampleFile> BetaExampleFiles { get; }
-
     public static readonly StyledProperty<FileViewModel> FileViewModelProperty =
         AvaloniaProperty.Register<HelloTherePopup, FileViewModel>(nameof(FileViewModel));
 
@@ -80,8 +78,6 @@ internal partial class HelloTherePopup : PixiEditorPopup
 
     public RelayCommand<string> OpenRecentCommand { get; set; }
     
-    public AsyncRelayCommand<BetaExampleFile> OpenBetaExampleCommand { get; set; }
-
     public RelayCommand<string> OpenInExplorerCommand { get; set; }
 
     public bool IsClosing { get; private set; }
@@ -107,19 +103,11 @@ internal partial class HelloTherePopup : PixiEditorPopup
         OpenFileCommand = new AsyncRelayCommand(OpenFile);
         OpenNewFileCommand = new AsyncRelayCommand(OpenNewFile);
         OpenRecentCommand = new RelayCommand<string>(OpenRecent);
-        OpenBetaExampleCommand = new AsyncRelayCommand<BetaExampleFile>(OpenBetaExample);
         OpenInExplorerCommand = new RelayCommand<string>(OpenInExplorer, CanOpenInExplorer);
 
         RecentlyOpenedEmpty = RecentlyOpened.Count == 0;
         RecentlyOpened.CollectionChanged += RecentlyOpened_CollectionChanged;
 
-        // Beta examples
-        (string file, LocalizedString name)[] files = [
-            ("Pond.pixi", "POND_EXAMPLE")
-        ];
-
-        BetaExampleFiles = new List<BetaExampleFile>(files.Select(x => new BetaExampleFile(x.file, x.name)));
-        
         _newsDisabled = PixiEditorSettings.StartupWindow.DisableNewsPanel.Value;
 
         NewsProvider = new NewsProvider();
@@ -195,19 +183,6 @@ internal partial class HelloTherePopup : PixiEditorPopup
         await FileViewModel.CreateFromNewFileDialog();
     }
 
-    private async Task OpenBetaExample(BetaExampleFile? arg)
-    {
-        await using var stream = arg.GetStream();
-        
-        var bytes = new byte[stream.Length];
-        await stream.ReadExactlyAsync(bytes);
-
-        Application.Current.ForDesktopMainWindow(mainWindow => mainWindow.Activate());
-        Close();
-        
-        FileViewModel.OpenRecoveredDotPixi(null, bytes);
-    }
-
     private void OpenRecent(string parameter)
     {
         Application.Current.ForDesktopMainWindow(mainWindow => mainWindow.Activate());