update ui so precheck details are easier to see

.idea/.idea.SPTInstaller/.idea/avalonia.xml

@@ -5,8 +5,12 @@
       <map>
         <entry key="SPTInstaller/App.axaml" value="SPTInstaller/SPTInstaller.csproj" />
         <entry key="SPTInstaller/Assets/Styles.axaml" value="SPTInstaller/SPTInstaller.csproj" />
+        <entry key="SPTInstaller/CustomControls/CacheInfo.axaml" value="SPTInstaller/SPTInstaller.csproj" />
         <entry key="SPTInstaller/CustomControls/DetailedPreCheckItem.axaml" value="SPTInstaller/SPTInstaller.csproj" />
+        <entry key="SPTInstaller/CustomControls/Dialogs/WhyCacheThoughDialog.axaml" value="SPTInstaller/SPTInstaller.csproj" />
+        <entry key="SPTInstaller/CustomControls/PreCheckDetails.axaml" value="SPTInstaller/SPTInstaller.csproj" />
         <entry key="SPTInstaller/CustomControls/PreCheckItem.axaml" value="SPTInstaller/SPTInstaller.csproj" />
+        <entry key="SPTInstaller/CustomControls/ProgressableTaskItem.axaml" value="SPTInstaller/SPTInstaller.csproj" />
         <entry key="SPTInstaller/CustomControls/SPTInstallButton.axaml" value="SPTInstaller/SPTInstaller.csproj" />
         <entry key="SPTInstaller/Views/DetailedPreChecksView.axaml" value="SPTInstaller/SPTInstaller.csproj" />
         <entry key="SPTInstaller/Views/MainWindow.axaml" value="SPTInstaller/SPTInstaller.csproj" />

SPTInstaller/CustomControls/DetailedPreCheckItem.axaml

@@ -1,41 +0,0 @@
-<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:cc="using:SPTInstaller.CustomControls"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="SPTInstaller.CustomControls.DetailedPreCheckItem"
-             Background="Transparent" MinHeight="100">
-    
-    <Grid RowDefinitions="3,AUTO,3,*,30,3" ColumnDefinitions="3,*,AUTO,3" Margin="10">
-        <Border Grid.RowSpan="5" Grid.ColumnSpan="3"
-                Background="{StaticResource AKI_Background_Light}" CornerRadius="8"
-                BoxShadow="3 3 10 .1 black"
-                />
-        <Border Grid.RowSpan="3" Grid.ColumnSpan="3"
-                Background="{StaticResource AKI_Brush_DarkGrayBlue}" CornerRadius="8 8 0 0"
-                />
-
-        <Grid Grid.Row="1" Grid.Column="1" ColumnDefinitions="AUTO, AUTO" Margin="3">
-            <cc:StatusSpinner State="{Binding State, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
-            <Label Grid.Column="1"
-                   Content="{Binding PreCheckName, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                   Classes.bold="{Binding State, RelativeSource={RelativeSource AncestorType=UserControl},
-                                 Converter={StaticResource ResourceKey=IsStateConverter},
-                                 ConverterParameter=Running}"
-			   />
-        </Grid>
-
-        <TextBlock Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap"
-                   Margin="10"
-                   Text="{Binding PreCheckDetails, RelativeSource={RelativeSource AncestorType=UserControl}}"
-			       />
-        
-        <Button Grid.Row="4" Grid.Column="2"
-                CornerRadius="8 0 8 0" Classes="outlinedTLCorner"
-                Content="{Binding ActionButtonText, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                Command="{Binding ActionButtonCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                IsVisible="{Binding ActionButtonIsVisible, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                />
-    </Grid>
-</UserControl>

SPTInstaller/CustomControls/DetailedPreCheckItem.axaml.cs

@@ -1,48 +0,0 @@
-using Avalonia;
-using System.Windows.Input;
-
-namespace SPTInstaller.CustomControls;
-public partial class DetailedPreCheckItem : PreCheckItem
-{
-    public DetailedPreCheckItem()
-    {
-        InitializeComponent();
-    }
-
-    public string PreCheckDetails
-    {
-        get => GetValue(PreCheckDetailsProperty);
-        set => SetValue(PreCheckDetailsProperty, value);
-    }
-
-    public static readonly StyledProperty<string> PreCheckDetailsProperty =
-        AvaloniaProperty.Register<DetailedPreCheckItem, string>(nameof(PreCheckDetails));
-
-    public bool ActionButtonIsVisible
-    {
-        get => GetValue(ActionButtonIsVisibleProperty);
-        set => SetValue(ActionButtonIsVisibleProperty, value);
-    }
-
-    public static readonly StyledProperty<bool> ActionButtonIsVisibleProperty =
-        AvaloniaProperty.Register<DetailedPreCheckItem, bool>(nameof(ActionButtonIsVisible));
-
-    public string ActionButtonText
-    {
-        get => GetValue(ActionButtonTextProperty);
-        set => SetValue(ActionButtonTextProperty, value);
-    }
-
-    public static readonly StyledProperty<string> ActionButtonTextProperty =
-        AvaloniaProperty.Register<DetailedPreCheckItem, string>(nameof(ActionButtonText));
-
-    public ICommand ActionButtonCommand
-    {
-        get => GetValue(ActionButtonCommandProperty);
-        set => SetValue(ActionButtonCommandProperty, value);
-    }
-
-    public static readonly StyledProperty<ICommand> ActionButtonCommandProperty =
-        AvaloniaProperty.Register<DetailedPreCheckItem, ICommand>(nameof(ActionButtonCommand));
-
-}

SPTInstaller/CustomControls/PreCheckDetails.axaml

@@ -0,0 +1,42 @@
+<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="SPTInstaller.CustomControls.PreCheckDetails">
+    <Panel>
+        <!-- show when nothing is selected --> 
+        <Label Content="Select a Pre-Check to see more info" FontSize="20"
+               HorizontalAlignment="Center" VerticalAlignment="Center"
+               IsVisible="{Binding PreCheckName, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={x:Static StringConverters.IsNullOrEmpty}}"
+               />
+        
+        <!-- selected precheck details -->
+        <Grid RowDefinitions="10, *, Auto, 10" ColumnDefinitions="10, 10, *, 10"
+              IsVisible="{Binding PreCheckName, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
+              >
+            <Rectangle Grid.Row="1" Grid.Column="1" Width="3" Fill="{Binding BarColor, RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Left"/>
+            
+            <StackPanel Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left">
+                <Label Content="{Binding PreCheckName, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                       FontSize="20"
+                       />
+                <Rectangle Height="1" Fill="Gray" Margin="0 10"/>
+                <TextBlock Text="{Binding Details, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                           TextWrapping="Wrap"
+                           />
+            </StackPanel>
+            
+            <Button Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Classes="yellow"
+                    IsVisible="{Binding ShowAction, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    CornerRadius="15"
+                    Margin="0 10"
+                    Command="{Binding ActionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    Content="{Binding ActionButtonText, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
+                    HorizontalAlignment="Stretch"
+                    />
+            
+        </Grid>
+    </Panel>
+</UserControl>

SPTInstaller/CustomControls/PreCheckDetails.axaml.cs

@@ -0,0 +1,67 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+
+namespace SPTInstaller.CustomControls;
+
+public partial class PreCheckDetails : UserControl
+{
+    public PreCheckDetails()
+    {
+        InitializeComponent();
+    }
+
+    public static readonly StyledProperty<string> PreCheckNameProperty =
+        AvaloniaProperty.Register<PreCheckDetails, string>(nameof(PreCheckName));
+
+    public string PreCheckName
+    {
+        get => GetValue(PreCheckNameProperty);
+        set => SetValue(PreCheckNameProperty, value);
+    }
+
+    public static readonly StyledProperty<string> DetailsProperty =
+        AvaloniaProperty.Register<PreCheckDetails, string>(nameof(Details));
+
+    public string Details
+    {
+        get => GetValue(DetailsProperty);
+        set => SetValue(DetailsProperty, value);
+    }
+
+    public static readonly StyledProperty<string> ActionButtonTextProperty =
+        AvaloniaProperty.Register<PreCheckDetails, string>(nameof(ActionButtonText));
+
+    public string ActionButtonText
+    {
+        get => GetValue(ActionButtonTextProperty);
+        set => SetValue(ActionButtonTextProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand> ActionCommandProperty =
+        AvaloniaProperty.Register<PreCheckDetails, ICommand>(nameof(ActionCommand));
+
+    public ICommand ActionCommand
+    {
+        get => GetValue(ActionCommandProperty);
+        set => SetValue(ActionCommandProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> ShowActionProperty =
+        AvaloniaProperty.Register<PreCheckDetails, bool>(nameof(ShowAction));
+
+    public bool ShowAction
+    {
+        get => GetValue(ShowActionProperty);
+        set => SetValue(ShowActionProperty, value);
+    }
+
+    public static readonly StyledProperty<string> BarColorProperty =
+        AvaloniaProperty.Register<PreCheckDetails, string>(nameof(BarColor));
+
+    public string BarColor
+    {
+        get => GetValue(BarColorProperty);
+        set => SetValue(BarColorProperty, value);
+    }
+}

SPTInstaller/CustomControls/PreCheckItem.axaml

@@ -5,7 +5,8 @@
              xmlns:cc="using:SPTInstaller.CustomControls"
              xmlns:convt="using:SPTInstaller.Converters"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="SPTInstaller.CustomControls.PreCheckItem">
+             x:Class="SPTInstaller.CustomControls.PreCheckItem"
+             >
 
     <UserControl.Resources>
         <convt:StatusSpinnerIsStateConverter x:Key="IsStateConverter"/>
@@ -14,10 +15,42 @@
 		<Style Selector="Label.bold">
 			<Setter Property="FontWeight" Value="Bold"/>
 		</Style>
+        
+        <Style Selector="Button.selectable">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Foreground" Value="{StaticResource AKI_Background_Dark}"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
+        </Style>
+
+        <Style Selector="Button.selectable:pointerover">
+            <Setter Property="FontWeight" Value="SemiBold"/>
+        </Style>
+
+        <Style Selector="Button.selectable:pointerover /template/ ContentPresenter">
+            <Setter Property="Background" Value="{StaticResource AKI_Brush_DarkGrayBlue}"/>
+            <Setter Property="BorderBrush" Value="{StaticResource AKI_Brush_DarkGrayBlue}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+        </Style>
+
+        <Style Selector="Button.selectable:disabled /template/ ContentPresenter">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="BorderBrush" Value="{StaticResource AKI_Brush_DarkGrayBlue}"/>
+        </Style>
+         
+        <Style Selector="Button.selected">
+            <Setter Property="Background" Value="{StaticResource AKI_Brush_DarkGrayBlue}" />
+            <Setter Property="BorderBrush" Value="{StaticResource AKI_Yellow}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+        </Style>
 	</UserControl.Styles>
-	
+    
-	
+    <Button CornerRadius="15" Padding="0" Margin="0" HorizontalAlignment="Stretch" VerticalContentAlignment="Center"
-	<Grid ColumnDefinitions="AUTO, AUTO" Margin="3">
+            Command="{Binding SelectCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+            CommandParameter="{Binding }"
+            Classes.selectable="{Binding !IsSelected, RelativeSource={RelativeSource AncestorType=UserControl}}"
+            Classes.selected="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=UserControl}}"
+            >
+        <Grid ColumnDefinitions="AUTO, AUTO" Margin="3 0 0 3">
         <cc:StatusSpinner State="{Binding State, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
         
 		<Label Grid.Column="1"
@@ -26,5 +59,6 @@
                              Converter={StaticResource ResourceKey=IsStateConverter},
                              ConverterParameter=Running}"
 			   />
-	</Grid>
+        </Grid>
+    </Button>
 </UserControl>

SPTInstaller/CustomControls/PreCheckItem.axaml.cs

@@ -1,4 +1,5 @@
-using Avalonia;
+using System.Windows.Input;
+using Avalonia;
 using Avalonia.Controls;
 
 namespace SPTInstaller.CustomControls;
@@ -36,4 +37,23 @@ public partial class PreCheckItem : UserControl
 
     public static readonly StyledProperty<StatusSpinner.SpinnerState> StateProperty =
         AvaloniaProperty.Register<PreCheckItem, StatusSpinner.SpinnerState>(nameof(State));
+
+
+    public static readonly StyledProperty<bool> IsSelectedProperty =
+        AvaloniaProperty.Register<PreCheckItem, bool>(nameof(IsSelected));
+
+    public bool IsSelected
+    {
+        get => GetValue(IsSelectedProperty);
+        set => SetValue(IsSelectedProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand> SelectCommandProperty =
+        AvaloniaProperty.Register<PreCheckItem, ICommand>(nameof(SelectCommand));
+
+    public ICommand SelectCommand
+    {
+        get => GetValue(SelectCommandProperty);
+        set => SetValue(SelectCommandProperty, value);
+    }
 }

SPTInstaller/Models/PreCheckBase.cs

@@ -16,6 +16,13 @@ public abstract class PreCheckBase : ReactiveObject, IPreCheck
         set => this.RaiseAndSetIfChanged(ref _id, value);
     }
 
+    private bool _isSelected;
+    public bool IsSelected
+    {
+        get => _isSelected;
+        set => this.RaiseAndSetIfChanged(ref _isSelected, value);
+    }
+
     private string _name;
     public string Name
     {

SPTInstaller/Models/PreCheckDetailInfo.cs

@@ -0,0 +1,59 @@
+using System.Windows.Input;
+using ReactiveUI;
+using SPTInstaller.CustomControls;
+
+namespace SPTInstaller.Models;
+
+public class PreCheckDetailInfo : ReactiveObject
+{
+    public PreCheckDetailInfo()
+    {
+        _name = "";
+        _details = "";
+        _actionButtonText = "";
+        _showActionButton = false;
+    }
+    
+    private string _name;
+    public string Name
+    {
+        get => _name;
+        set => this.RaiseAndSetIfChanged(ref _name, value);
+    }
+
+    private string _details;
+    public string Details
+    {
+        get => _details;
+        set => this.RaiseAndSetIfChanged(ref _details, value);
+    }
+
+    private string _actionButtonText;
+    public string ActionButtonText
+    {
+        get => _actionButtonText;
+        set => this.RaiseAndSetIfChanged(ref _actionButtonText, value);
+    }
+
+    private ICommand _actionButtonCommand;
+    public ICommand ActionButtonCommand
+    {
+        get => _actionButtonCommand;
+        set => this.RaiseAndSetIfChanged(ref _actionButtonCommand, value);
+    }
+
+    private bool _showActionButton;
+    public bool ShowActionButton
+    {
+        get => _showActionButton;
+        set => this.RaiseAndSetIfChanged(ref _showActionButton, value);
+    }
+
+    private string _barColor;
+
+    public string BarColor
+    {
+        get => _barColor;
+        set => this.RaiseAndSetIfChanged(ref _barColor, value);
+    }
+}

SPTInstaller/Program.cs

@@ -11,6 +11,7 @@ using SPTInstaller.Models;
 using System.Linq;
 using System.Reflection;
 using Serilog;
+using SPTInstaller.CustomControls;
 
 namespace SPTInstaller;
 

SPTInstaller/SPTInstaller.csproj

@@ -9,8 +9,8 @@
     <PackageIcon>icon.ico</PackageIcon>
     <ApplicationIcon>Assets\icon.ico</ApplicationIcon>
     <Configurations>Debug;Release;TEST</Configurations>
-    <AssemblyVersion>2.45</AssemblyVersion>
+    <AssemblyVersion>2.50</AssemblyVersion>
-    <FileVersion>2.45</FileVersion>
+    <FileVersion>2.50</FileVersion>
     <Company>SPT-AKI</Company>
   </PropertyGroup>
 

SPTInstaller/ViewModels/DetailedPreChecksViewModel.cs

@@ -1,9 +0,0 @@
-using ReactiveUI;
-
-namespace SPTInstaller.ViewModels;
-public class DetailedPreChecksViewModel : PreChecksViewModel
-{
-    public DetailedPreChecksViewModel(IScreen host, bool debugging) : base(host, debugging)
-    {
-    }
-}

SPTInstaller/ViewModels/PreChecksViewModel.cs

@@ -19,9 +19,12 @@ namespace SPTInstaller.ViewModels;
 
 public class PreChecksViewModel : ViewModelBase
 {
+    public PreCheckDetailInfo SelectedPreCheck { get; set; } = new();
+    
     public ObservableCollection<PreCheckBase> PreChecks { get; set; } = new(ServiceHelper.GetAll<PreCheckBase>());
+    
+    public ICommand SelectPreCheckCommand { get; set; }
     public ICommand StartInstallCommand { get; set; }
-    public ICommand ShowDetailedViewCommand { get; set; }
 
     public ICommand UpdateInstallerCommand { get; set; }
 
@@ -61,7 +64,7 @@ public class PreChecksViewModel : ViewModelBase
         set => this.RaiseAndSetIfChanged(ref _allowInstall, value);
     }
 
-    private bool _allowDetailsButton = false; 
+    private bool _allowDetailsButton = false;
     public bool AllowDetailsButton
     {
         get => _allowDetailsButton;
@@ -192,20 +195,51 @@ public class PreChecksViewModel : ViewModelBase
             }
         });
 
+        SelectPreCheckCommand = ReactiveCommand.Create(async(PreCheckBase check) =>
+        {
+            foreach (var precheck in PreChecks)
+            {
+                if (check.Id == precheck.Id)
+                {
+                    precheck.IsSelected = true;
+                    SelectedPreCheck.Name = precheck.Name;
+                    SelectedPreCheck.Details = precheck.PreCheckDetails;
+                    SelectedPreCheck.ActionButtonText = precheck.ActionButtonText;
+                    SelectedPreCheck.ActionButtonCommand = precheck.ActionButtonCommand;
+                    SelectedPreCheck.ShowActionButton = precheck.ActionButtonIsVisible;
+
+                    switch (precheck.State)
+                    {
+                        case StatusSpinner.SpinnerState.Pending:
+                            SelectedPreCheck.BarColor = "gray";
+                            break;
+                        case StatusSpinner.SpinnerState.Running:
+                            SelectedPreCheck.BarColor = "dodgerblue";
+                            break;
+                        case StatusSpinner.SpinnerState.OK:
+                            SelectedPreCheck.BarColor = "forestgreen";
+                            break;
+                        case StatusSpinner.SpinnerState.Warning:
+                            SelectedPreCheck.BarColor = "gold";
+                            break;
+                        case StatusSpinner.SpinnerState.Error:
+                            SelectedPreCheck.BarColor = "red";
+                            break;
+                    }
+                    
+                    continue;
+                }
+
+                precheck.IsSelected = false;
+            }
+        });
+
         StartInstallCommand = ReactiveCommand.Create(async () =>
         {
             UpdateInfo.ShowCard = false;
             NavigateTo(new InstallViewModel(HostScreen));
         });
 
-        ShowDetailedViewCommand = ReactiveCommand.Create(() => 
-        {
-            UpdateInfo.ShowCard = false;
-            Log.Logger.Information("Opening Detailed PreCheck View");
-            installer.RecheckRequested -= ReCheckRequested;
-            NavigateTo(new DetailedPreChecksViewModel(HostScreen, Debugging));
-        });
-
         UpdateInstallerCommand = ReactiveCommand.Create(async () =>
         {
             AllowDetailsButton = false;

SPTInstaller/Views/DetailedPreChecksView.axaml

@@ -1,67 +0,0 @@
-<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:cc="using:SPTInstaller.CustomControls"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="SPTInstaller.Views.DetailedPreChecksView">
-    <Grid RowDefinitions="10,AUTO,AUTO,AUTO,*,10" ColumnDefinitions="10,AUTO,*,AUTO,10">
-        
-        
-        <Label Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"
-               Content="SPT will be installed into:"
-               FontSize="16"
-               FontWeight="SemiBold"
-               />
-
-        <cc:CacheInfo Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Padding="0 0 10 0"
-              InfoText="{Binding CacheInfoText}" State="{Binding CacheCheckState}"
-              />
-        
-        <TextBlock Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"
-                   Foreground="DodgerBlue" FontWeight="SemiBold" FontSize="16"
-                   Text="{Binding InstallPath}" TextWrapping="Wrap"
-                   Margin="5"
-                   />
-        
-        <Button Grid.Row="1" Grid.RowSpan="3" Grid.Column="3" Padding="20 10"
-                VerticalAlignment="Top"
-				FontSize="15" FontWeight="SemiBold"
-				Classes="yellow"
-				IsEnabled="{Binding AllowInstall}"
-				Command="{Binding StartInstallCommand}"
-                >
-            <StackPanel Orientation="Horizontal">
-                <TextBlock Text="{Binding InstallButtonText}" VerticalAlignment="Center" Foreground="Black"/>
-                <cc:StatusSpinner State="{Binding InstallButtonCheckState}" Margin="2" IsVisible="{Binding !AllowInstall}"/>
-            </StackPanel>
-        </Button>
-        
-        <ScrollViewer Grid.Row="4" Grid.ColumnSpan="5">
-            <ItemsControl ItemsSource="{Binding PreChecks}">
-                <ItemsControl.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <StackPanel HorizontalAlignment="Stretch" Margin="10 0"/>
-                    </ItemsPanelTemplate>
-                </ItemsControl.ItemsPanel>
-                <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                        <cc:DetailedPreCheckItem PreCheckName="{Binding Name}"
-                                                 IsRequired="{Binding IsRequired}"
-                                                 PreCheckDetails="{Binding PreCheckDetails}"
-                                                 ActionButtonCommand="{Binding ActionButtonCommand}"
-                                                 ActionButtonText="{Binding ActionButtonText}"
-                                                 ActionButtonIsVisible="{Binding ActionButtonIsVisible}"
-                                                 State="{Binding State}"
-									     />
-                    </DataTemplate>
-                </ItemsControl.ItemTemplate>
-            </ItemsControl>
-        </ScrollViewer>
-
-        <Border Grid.Row="3" Grid.ColumnSpan="5"
-                BorderThickness="1" BorderBrush="Black" Height="2" Background="Black"
-                BoxShadow="0 3 10 2 black"
-                />
-    </Grid>
-</UserControl>

SPTInstaller/Views/DetailedPreChecksView.axaml.cs

@@ -1,11 +0,0 @@
-using Avalonia.ReactiveUI;
-using SPTInstaller.ViewModels;
-
-namespace SPTInstaller.Views;
-public partial class DetailedPreChecksView : ReactiveUserControl<DetailedPreChecksViewModel>
-{
-    public DetailedPreChecksView()
-    {
-        InitializeComponent();
-    }
-}

SPTInstaller/Views/PreChecksView.axaml

@@ -5,80 +5,161 @@
 			 xmlns:cc="using:SPTInstaller.CustomControls"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="SPTInstaller.Views.PreChecksView">
-	<Grid ColumnDefinitions="10,*,AUTO,*,10"
+    
-		  RowDefinitions="10,*,AUTO,AUTO,AUTO,AUTO,*,10">
+    <!-- main UI grid -->
-		<StackPanel Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="2" HorizontalAlignment="Center">
+    <Grid RowDefinitions="10, *, 10, Auto, 10" ColumnDefinitions="10, *, Auto, 10">
-			<Label Content="SPT will be installed into this folder:"
+        
-				   HorizontalAlignment="Center"
+        <!-- info card -->
-				   />
+        <Border Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" BoxShadow="1 1 10 0 black" CornerRadius="15">
-            <TextBlock Text="{Binding InstallPath}" TextWrapping="Wrap"
-                       Foreground="DodgerBlue" HorizontalAlignment="Center"
-                       />
             
-			<Label Content="Move the installer into the folder you want it to install into if this is wrong"
+            <!-- main information grid -->
-				   HorizontalAlignment="Center"
+            <Grid RowDefinitions="10, Auto, *, Auto, 10" ColumnDefinitions="10, 2*, Auto,*, 10">
-				   />
+                
-		</StackPanel>
+                <Label Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" 
-		<Button Grid.Column="2" Grid.Row="3" Padding="20 10"
+                       Content="Details" FontSize="20"
-				Margin="10"
+                       />
-				FontSize="15" FontWeight="SemiBold"
+                
-				Classes="yellow"
+                <!-- selected precheck details grid -->
-				IsEnabled="{Binding AllowInstall}"
+                <cc:PreCheckDetails Grid.Row="2" Grid.Column="1"
-				Command="{Binding StartInstallCommand}"
+                                         PreCheckName="{Binding SelectedPreCheck.Name}"
-				>
+                                         Details="{Binding SelectedPreCheck.Details}"
+                                         ActionButtonText="{Binding SelectedPreCheck.ActionButtonText}"
+                                         ActionCommand="{Binding SelectedPreCheck.ActionButtonCommand}"
+                                         ShowAction="{Binding SelectedPreCheck.ActionButtonIsVisible}"
+                                         BarColor="{Binding SelectedPreCheck.BarColor}"
+                                         />
+                
+                <!-- info card vertical separator -->
+                <Rectangle Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" VerticalAlignment="Stretch"
+                           Fill="black" Width="1" Margin="10 0"
+                />
+                
+                <!-- precheck list -->
+                <Label Grid.Row="1" Grid.Column="3" HorizontalAlignment="Center" 
+                       Content="Pre-Checks" FontSize="20"
+                       />
+                
+                <ItemsControl ItemsSource="{Binding PreChecks}" Grid.Row="2" Grid.Column="3">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Spacing="5" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                                <cc:PreCheckItem PreCheckName="{Binding Name}"
+                                                 IsRequired="{Binding IsRequired}"
+                                                 IsSelected="{Binding IsSelected}"
+                                                 State="{Binding State}"
+                                                 SelectCommand="{Binding $parent[ItemsControl].DataContext.SelectPreCheckCommand}"
+                                                 HorizontalAlignment="Stretch"
+                                />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                
+                <!-- cache info -->
+                <cc:CacheInfo Grid.Row="2" Grid.Column="3" Padding="10"
+                              VerticalAlignment="Bottom" HorizontalAlignment="Left"
+                              InfoText="{Binding CacheInfoText}" State="{Binding CacheCheckState}"
+                              />
+                
+            </Grid>
+        </Border>
+        
+        <!-- Install path info -->
+        <StackPanel Grid.Row="3" Grid.Column="1" >
+            <Label Content="Install Path" FontSize="20" />
+            
+            <TextBlock TextWrapping="Wrap" Margin="3 0"
+                       Text="{Binding InstallPath}"
+                       Foreground="DodgerBlue" FontWeight="SemiBold"
+                       />
+        </StackPanel>
+        
+        <!-- Start install button -->
+        <Button Grid.Column="2" Grid.Row="3" Padding="20 10"
+                FontSize="15" FontWeight="SemiBold"
+                Classes="yellow"
+                IsEnabled="{Binding AllowInstall}"
+                Command="{Binding StartInstallCommand}"
+                CornerRadius="15"
+        >
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{Binding InstallButtonText}" VerticalAlignment="Center" Foreground="Black"/>
                 <cc:StatusSpinner State="{Binding InstallButtonCheckState}" Margin="2" IsVisible="{Binding !AllowInstall}"/>
             </StackPanel>
         </Button>
-        
+    </Grid>
-		<ItemsControl ItemsSource="{Binding PreChecks}" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="4" HorizontalAlignment="Center">
+    
-			<ItemsControl.ItemsPanel>
+    <!-- <Grid ColumnDefinitions="10,*,AUTO,*,10" -->
-				<ItemsPanelTemplate>
+	<!-- 	  RowDefinitions="10,*,AUTO,AUTO,AUTO,AUTO,*,10"> -->
-					<WrapPanel/>
+	<!-- 	<StackPanel Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="2" HorizontalAlignment="Center"> -->
-				</ItemsPanelTemplate>
+	<!-- 		<Label Content="SPT will be installed into this folder:" -->
-			</ItemsControl.ItemsPanel>
+	<!-- 			   HorizontalAlignment="Center" -->
-			<ItemsControl.ItemTemplate>
+	<!-- 			   /> -->
-				<DataTemplate>
+ <!--            <TextBlock Text="{Binding InstallPath}" TextWrapping="Wrap" -->
-					<cc:PreCheckItem PreCheckName="{Binding Name}"
+ <!--                       Foreground="DodgerBlue" HorizontalAlignment="Center" -->
-									 IsRequired="{Binding IsRequired}"
+ <!--                       /> -->
-                                     State="{Binding State}"
+ <!--             -->
-									 />
+	<!-- 		<Label Content="Move the installer into the folder you want it to install into if this is wrong" -->
-				</DataTemplate>
+	<!-- 			   HorizontalAlignment="Center" -->
-			</ItemsControl.ItemTemplate>
+	<!-- 			   /> -->
-		</ItemsControl>
+	<!-- 	</StackPanel> -->
-        
+	<!-- 	<Button Grid.Column="2" Grid.Row="3" Padding="20 10" -->
-        <Button Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="3" HorizontalAlignment="Center"
+	<!-- 			Margin="10" -->
-                Content="Detailed View"
+	<!-- 			FontSize="15" FontWeight="SemiBold" -->
-                IsEnabled="{Binding AllowDetailsButton}"
+	<!-- 			Classes="yellow" -->
-                Command="{Binding ShowDetailedViewCommand}"
+	<!-- 			IsEnabled="{Binding AllowInstall}" -->
-                />
+	<!-- 			Command="{Binding StartInstallCommand}" -->
-
+	<!-- 			> -->
-        <cc:UpdateInfoCard Grid.Row="1" Grid.RowSpan="4" Padding="10"
+ <!--            <StackPanel Orientation="Horizontal"> -->
-                           VerticalAlignment="Top" HorizontalAlignment="Left"
+ <!--                <TextBlock Text="{Binding InstallButtonText}" VerticalAlignment="Center" Foreground="Black"/> -->
-                           InfoText="{Binding UpdateInfo.UpdateInfoText}"
+ <!--                <cc:StatusSpinner State="{Binding InstallButtonCheckState}" Margin="2" IsVisible="{Binding !AllowInstall}"/> -->
-                           ShowUpdateCard="{Binding UpdateInfo.ShowCard}"
+ <!--            </StackPanel> -->
-                           NotNowCommand="{Binding DismissUpdateCommand}"
+ <!--        </Button> -->
-                           UpdateInstallerCommand="{Binding UpdateInstallerCommand}"
+ <!--         -->
-                           Updating="{Binding UpdateInfo.Updating}"
+	<!-- 	<ItemsControl ItemsSource="{Binding PreChecks}" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="4" HorizontalAlignment="Center"> -->
-                           DownloadProgress="{Binding UpdateInfo.DownloadProgress}"
+	<!-- 		<ItemsControl.ItemsPanel> -->
-                           IndeterminateProgress="{Binding UpdateInfo.CheckingForUpdates}"
+	<!-- 			<ItemsPanelTemplate> -->
-                           UpdateAvailable="{Binding UpdateInfo.UpdateAvailable}"
+	<!-- 				<WrapPanel/> -->
-                           />
+	<!-- 			</ItemsPanelTemplate> -->
-        
+	<!-- 		</ItemsControl.ItemsPanel> -->
-        <cc:CacheInfo Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="3" Padding="10"
+	<!-- 		<ItemsControl.ItemTemplate> -->
-                      VerticalAlignment="Bottom" HorizontalAlignment="Left"
+	<!-- 			<DataTemplate> -->
-                      InfoText="{Binding CacheInfoText}" State="{Binding CacheCheckState}"
+	<!-- 				<cc:PreCheckItem PreCheckName="{Binding Name}" -->
-                      />
+	<!-- 								 IsRequired="{Binding IsRequired}" -->
-        
+ <!--                                     State="{Binding State}" -->
-        <Button Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="3" Padding="10" x:Name="debugBtn"
+	<!-- 								 /> -->
-                HorizontalAlignment="Right" VerticalAlignment="Bottom"
+	<!-- 			</DataTemplate> -->
-                Classes="icon"
+	<!-- 		</ItemsControl.ItemTemplate> -->
-                Command="{Binding LaunchWithDebug}"
+	<!-- 	</ItemsControl> -->
-                IsVisible="{Binding !Debugging}"
+ <!-- -->
-                >
+ <!--        <cc:UpdateInfoCard Grid.Row="1" Grid.RowSpan="4" Padding="10" -->
-            <Path Data="{StaticResource Bug}" Fill="{Binding ElementName=debugBtn, Path=Foreground}"
+ <!--                           VerticalAlignment="Top" HorizontalAlignment="Left" -->
-                  />
+ <!--                           InfoText="{Binding UpdateInfo.UpdateInfoText}" -->
-        </Button>
+ <!--                           ShowUpdateCard="{Binding UpdateInfo.ShowCard}" -->
-	</Grid>
+ <!--                           NotNowCommand="{Binding DismissUpdateCommand}" -->
+ <!--                           UpdateInstallerCommand="{Binding UpdateInstallerCommand}" -->
+ <!--                           Updating="{Binding UpdateInfo.Updating}" -->
+ <!--                           DownloadProgress="{Binding UpdateInfo.DownloadProgress}" -->
+ <!--                           IndeterminateProgress="{Binding UpdateInfo.CheckingForUpdates}" -->
+ <!--                           UpdateAvailable="{Binding UpdateInfo.UpdateAvailable}" -->
+ <!--                           /> -->
+ <!--         -->
+ <!--        <cc:CacheInfo Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="3" Padding="10" -->
+ <!--                      VerticalAlignment="Bottom" HorizontalAlignment="Left" -->
+ <!--                      InfoText="{Binding CacheInfoText}" State="{Binding CacheCheckState}" -->
+ <!--                      /> -->
+ <!--         -->
+ <!--        <Button Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="3" Padding="10" x:Name="debugBtn" -->
+ <!--                HorizontalAlignment="Right" VerticalAlignment="Bottom" -->
+ <!--                Classes="icon" -->
+ <!--                Command="{Binding LaunchWithDebug}" -->
+ <!--                IsVisible="{Binding !Debugging}" -->
+ <!--                > -->
+ <!--            <Path Data="{StaticResource Bug}" Fill="{Binding ElementName=debugBtn, Path=Foreground}" -->
+ <!--                  /> -->
+ <!--        </Button> -->
+	<!-- </Grid> -->
 </UserControl>