StabilityMatrix/StabilityMatrix.Avalonia/Views/PackageManagerPage.axaml

<controls:UserControlBase 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:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
                          xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
                          xmlns:models="clr-namespace:StabilityMatrix.Core.Models;assembly=StabilityMatrix.Core"
                          xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
                          xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
                          xmlns:packageManager="clr-namespace:StabilityMatrix.Avalonia.ViewModels.PackageManager"
                          xmlns:faicon="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
                          mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
                          x:DataType="viewModels:PackageManagerViewModel"
                          x:CompileBindings="True"
                          d:DataContext="{x:Static designData:DesignData.PackageManagerViewModel}"
                          x:Class="StabilityMatrix.Avalonia.Views.PackageManagerPage">

    <Grid Margin="16" RowDefinitions="Auto,*">
        <ItemsRepeater
            ItemsSource="{Binding Packages}">
            <ItemsRepeater.Layout>
                <UniformGridLayout MinColumnSpacing="12" MinRowSpacing="12" />
            </ItemsRepeater.Layout>
            <ItemsRepeater.ItemTemplate>
                <DataTemplate DataType="{x:Type packageManager:PackageCardViewModel}">
                    <controls:Card Padding="8">
                        <Grid RowDefinitions="Auto, Auto, Auto, Auto"
                              ColumnDefinitions="Auto">

                            <TextBlock Grid.Row="0"
                                       Grid.Column="0"
                                       Margin="0,4,4,4"
                                       Text="{Binding Package.DisplayName}"
                                       TextAlignment="Left" />
                            <Button
                                Grid.Row="0"
                                HorizontalContentAlignment="Right"
                                HorizontalAlignment="Right"
                                Margin="8,4,0,4"
                                Classes="transparent"
                                BorderThickness="0">
                                <ui:SymbolIcon FontSize="18" Symbol="MoreVertical" />
                                <Button.Flyout>
                                    <MenuFlyout Placement="BottomEdgeAlignedLeft">
                                        <MenuItem Header="Check for Update">
                                            <MenuItem.Icon>
                                                <ui:SymbolIcon Symbol="Refresh" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                        <Separator />
                                        <MenuItem Header="Uninstall"
                                                  Command="{Binding Uninstall}">
                                            <MenuItem.Icon>
                                                <ui:SymbolIcon Symbol="Delete" />
                                            </MenuItem.Icon>
                                        </MenuItem>
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>

                            <TextBlock Grid.Row="1"
                                       Grid.Column="0"
                                       Margin="2,-8,0,0"
                                       VerticalAlignment="Center"
                                       Text="{Binding Package.DisplayVersion}" />

                            <controls:BetterAdvancedImage
                                Grid.Row="2"
                                Grid.Column="0"
                                Margin="0,8,0,8"
                                Height="160"
                                Width="200"
                                CornerRadius="4"
                                HorizontalAlignment="Center"
                                VerticalContentAlignment="Top"
                                HorizontalContentAlignment="Center"
                                Source="{Binding CardImage}"
                                Stretch="UniformToFill" />

                            <Grid Grid.Row="3" Grid.Column="0"
                                  IsVisible="{Binding IsUpdateAvailable}"
                                  ColumnDefinitions="*, *">
                                <Button Grid.Column="0" Classes="accent"
                                        VerticalAlignment="Bottom"
                                        HorizontalAlignment="Stretch"
                                        Command="{Binding Launch}">
                                    <StackPanel Orientation="Horizontal" Margin="0,2,0,2">
                                        <faicon:Icon Value="fa-solid fa-rocket"
                                                     Margin="0,0,8,0"
                                                     FontSize="14" />
                                        <TextBlock Text="Launch" />
                                    </StackPanel>
                                </Button>
                                <Button Grid.Column="1" Classes="accent"
                                        VerticalAlignment="Bottom"
                                        HorizontalAlignment="Stretch">
                                    <StackPanel Orientation="Horizontal" Margin="0,2,0,2">
                                        <faicon:Icon Value="fa-solid fa-download"
                                                     Margin="0,0,8,0"
                                                     FontSize="14" />
                                        <TextBlock Text="Update" />
                                    </StackPanel>
                                </Button>
                            </Grid>
                            
                            <!-- Big launch button -->
                            <Button Grid.Row="3" Grid.Column="0" Classes="accent"
                                    VerticalAlignment="Bottom"
                                    IsVisible="{Binding !IsUpdateAvailable}"
                                    Command="{Binding Launch}"
                                    HorizontalAlignment="Stretch">
                                <StackPanel Orientation="Horizontal" Margin="0,2,0,2">
                                    <faicon:Icon Value="fa-solid fa-rocket"
                                                 Margin="0,0,8,0"
                                                 FontSize="14" />
                                    <TextBlock Text="Launch" />
                                </StackPanel>
                            </Button>
                            
                            <!-- Update overlay -->
                            <Rectangle
                                Grid.Row="0" Grid.RowSpan="4"
                                Grid.Column="0"
                                Fill="#DD000000"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                IsVisible="{Binding IsProgressVisible}" />
                            <StackPanel Grid.Row="0" Grid.RowSpan="4"
                                        Grid.Column="0"
                                        HorizontalAlignment="Stretch"
                                        Orientation="Vertical"
                                        VerticalAlignment="Center"
                                        IsVisible="{Binding IsProgressVisible}">
                                <controls:ProgressRing
                                    HorizontalAlignment="Center"
                                    IsIndeterminate="{Binding IsIndeterminate}"
                                    Width="120"
                                    Height="120"
                                    StartAngle="90"
                                    EndAngle="450"
                                    Value="{Binding Value}"
                                    VerticalAlignment="Center" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    Margin="0,8,0,0"
                                    Text="{Binding Text, TargetNullValue=Updating...}"
                                    VerticalAlignment="Center" />
                            </StackPanel>
                        </Grid>
                    </controls:Card>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>
        </ItemsRepeater>
        <Button Grid.Row="1"
                Classes="transparent"
                VerticalAlignment="Bottom"
                Margin="0, 8, 0, 0"
                HorizontalAlignment="Stretch"
                Command="{Binding ShowInstallDialog}">
            <StackPanel Orientation="Horizontal" Margin="8">
                <ui:SymbolIcon FontSize="18" Symbol="Add" />
                <TextBlock Margin="4,0,0,0" Text="Add Package" />
            </StackPanel>
        </Button>
    </Grid>
</controls:UserControlBase>