Optimize UI Load performance

This commit is contained in:
Marterich 2025-03-19 23:39:19 +01:00
parent d215d0fc2c
commit fa51f4b918
7 changed files with 172 additions and 129 deletions

View File

@ -35,7 +35,8 @@
"CheckboxMouseOverColor": "#999999",
"ButtonBorderThickness": "1",
"ButtonMargin": "1",
"ButtonCornerRadius": "2"
"ButtonCornerRadius": "2",
"AppTileImageSize": "40"
},
"Light": {
"AppInstallUnselectedColor": "#F0F0F0",

View File

@ -10,22 +10,14 @@ function Initialize-InstallAppEntry {
#>
param(
[Windows.Controls.WrapPanel]$TargetElement,
$AppKey
$AppKey
)
$App = $sync.configs.applicationsHashtable.$AppKey
# Create the outer Border for the application type
$border = New-Object Windows.Controls.Border
$border.BorderBrush = [Windows.Media.Brushes]::Gray
$border.SetResourceReference([Windows.Controls.Control]::BorderThicknessProperty, "AppTileBorderThickness")
$border.CornerRadius = 5
$border.SetResourceReference([Windows.Controls.Control]::PaddingProperty, "AppTileMargins")
$border.SetResourceReference([Windows.Controls.Control]::WidthProperty, "AppTileWidth")
$border.VerticalAlignment = "Top"
$border.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
$border.Cursor = [System.Windows.Input.Cursors]::Hand
$border.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
$border.Tag = $Appkey
$border.ToolTip = $App.description
$border.Style = $sync.Form.Resources.AppTileBorderStyle
$border.Tag = $AppKey
$border.ToolTip = $Apps.$AppKey.description
$border.Add_MouseUp({
$childCheckbox = ($this.Child.Children | Where-Object {$_.Template.TargetType -eq [System.Windows.Controls.Checkbox]})[0]
$childCheckBox.isChecked = -not $childCheckbox.IsChecked
@ -48,11 +40,7 @@ function Initialize-InstallAppEntry {
# Create the CheckBox, vertically centered
$checkBox = New-Object Windows.Controls.CheckBox
$checkBox.Name = $AppKey
$checkBox.Background = "Transparent"
$checkBox.HorizontalAlignment = "Left"
$checkBox.VerticalAlignment = "Center"
$checkBox.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
$checkBox.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CollapsedCheckBoxStyle")
$checkbox.Style = $sync.Form.Resources.AppTileCheckboxStyle
$checkbox.Add_Checked({
Invoke-WPFSelectedAppsUpdate -type "Add" -checkbox $this
$borderElement = $this.Parent.Parent
@ -64,7 +52,7 @@ function Initialize-InstallAppEntry {
$borderElement = $this.Parent.Parent
$borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
})
$sync.$($checkBox.Name) = $checkBox
# Create a StackPanel for the image and name
$imageAndNamePanel = New-Object Windows.Controls.StackPanel
$imageAndNamePanel.Orientation = "Horizontal"
@ -73,29 +61,15 @@ function Initialize-InstallAppEntry {
# Create the Image and set a placeholder
$image = New-Object Windows.Controls.Image
# $image.Name = "wpfapplogo" + $App.Name
$image.Width = 40
$image.Height = 40
$image.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
$image.Style = $sync.Form.Resources.AppTileImageStyle
$image.Source = $noimage # Ensure $noimage is defined in your script
# Clip the image corners
$image.Clip = New-Object Windows.Media.RectangleGeometry
$image.Clip.Rect = New-Object Windows.Rect(0, 0, $image.Width, $image.Height)
$image.Clip.RadiusX = 5
$image.Clip.RadiusY = 5
$image.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
$imageAndNamePanel.Children.Add($image) | Out-Null
# Create the TextBlock for the application name
$appName = New-Object Windows.Controls.TextBlock
$appName.Text = $App.Content
$appName.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "AppTileFontSize")
$appName.FontWeight = [Windows.FontWeights]::Bold
$appName.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
$appName.VerticalAlignment = "Center"
$appName.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
$appName.Background = "Transparent"
$appName.Style = $sync.Form.Resources.AppTileNameStyle
$appName.Text = $Apps.$AppKey.content
$imageAndNamePanel.Children.Add($appName) | Out-Null
# Add the image and name panel to the Checkbox
@ -107,91 +81,53 @@ function Initialize-InstallAppEntry {
# Create the StackPanel for the buttons and dock it to the right
$buttonPanel = New-Object Windows.Controls.StackPanel
$buttonPanel.Orientation = "Horizontal"
$buttonPanel.HorizontalAlignment = "Right"
$buttonPanel.VerticalAlignment = "Center"
$buttonPanel.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
$buttonPanel.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
$buttonPanel.Style = $sync.Form.Resources.AppTileButtonPanelStyle
[Windows.Controls.DockPanel]::SetDock($buttonPanel, [Windows.Controls.Dock]::Right)
# Create the "Install" button
$installButton = New-Object Windows.Controls.Button
$installButton.Width = 45
$installButton.Height = 35
$installButton.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
# Define the button properties
$buttons = @(
[PSCustomObject]@{ Name = "Install"; Description = "Install or Upgrade the application"; Tooltip = "Install or Upgrade the application"; Icon = [char]0xE118 },
[PSCustomObject]@{ Name = "Uninstall"; Description = "Uninstall the application"; Tooltip = "Uninstall the application"; Icon = [char]0xE74D },
[PSCustomObject]@{ Name = "Info"; Description = "Open the application's website in your default browser"; Tooltip = "Open the application's website in your default browser"; Icon = [char]0xE946 }
)
$installIcon = New-Object Windows.Controls.TextBlock
$installIcon.Text = [char]0xE118 # Install Icon
$installIcon.FontFamily = "Segoe MDL2 Assets"
$installIcon.FontSize = 20
$installIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
$installIcon.Background = "Transparent"
$installIcon.HorizontalAlignment = "Center"
$installIcon.VerticalAlignment = "Center"
# Iterate over each button and create it
foreach ($button in $buttons) {
$newButton = New-Object Windows.Controls.Button
$newButton.Style = $sync.Form.Resources.AppTileButtonStyle
$newButton.Content = $button.Icon
$newButton.ToolTip = $button.Tooltip
$buttonPanel.Children.Add($newButton) | Out-Null
$installButton.Content = $installIcon
$installButton.ToolTip = "Install or Upgrade the application"
$buttonPanel.Children.Add($installButton) | Out-Null
# Add Click event for the "Install" button
$installButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Invoke-WPFInstall -PackagesToInstall $appObject
})
# Create the "Uninstall" button
$uninstallButton = New-Object Windows.Controls.Button
$uninstallButton.Width = 45
$uninstallButton.Height = 35
$uninstallIcon = New-Object Windows.Controls.TextBlock
$uninstallIcon.Text = [char]0xE74D # Uninstall Icon
$uninstallIcon.FontFamily = "Segoe MDL2 Assets"
$uninstallIcon.FontSize = 20
$uninstallIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
$uninstallIcon.Background = "Transparent"
$uninstallIcon.HorizontalAlignment = "Center"
$uninstallIcon.VerticalAlignment = "Center"
$uninstallButton.Content = $uninstallIcon
$buttonPanel.Children.Add($uninstallButton) | Out-Null
$uninstallButton.ToolTip = "Uninstall the application"
$uninstallButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Invoke-WPFUnInstall -PackagesToUninstall $appObject
})
# Create the "Info" button
$infoButton = New-Object Windows.Controls.Button
$infoButton.Width = 45
$infoButton.Height = 35
$infoButton.Margin = New-Object Windows.Thickness(10, 0, 0, 0)
$infoIcon = New-Object Windows.Controls.TextBlock
$infoIcon.Text = [char]0xE946 # Info Icon
$infoIcon.FontFamily = "Segoe MDL2 Assets"
$infoIcon.FontSize = 20
$infoIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
$infoIcon.Background = "Transparent"
$infoIcon.HorizontalAlignment = "Center"
$infoIcon.VerticalAlignment = "Center"
$infoButton.Content = $infoIcon
$infoButton.ToolTip = "Open the application's website in your default browser"
$buttonPanel.Children.Add($infoButton) | Out-Null
$infoButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Start-Process $appObject.link
})
switch ($button.Name) {
"Install" {
$newButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Invoke-WPFInstall -PackagesToInstall $appObject
})
}
"Uninstall" {
$newButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Invoke-WPFUnInstall -PackagesToUninstall $appObject
})
}
"Info" {
$newButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Start-Process $appObject.link
})
}
}
}
# Add the button panel to the DockPanel
$dockPanel.Children.Add($buttonPanel) | Out-Null
# Add the border to the corresponding Category
$TargetElement.Children.Add($border) | Out-Null
return $checkbox
}

View File

@ -42,7 +42,7 @@ function Initialize-InstallCategoryAppList {
$loadingLabel.Content = "Loading, please wait..."
$loadingLabel.HorizontalAlignment = "Center"
$loadingLabel.VerticalAlignment = "Center"
$loadingLabel.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "FontSizeHeading")
$loadingLabel.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "HeadingFontSize")
$loadingLabel.FontWeight = [Windows.FontWeights]::Bold
$loadingLabel.Foreground = [Windows.Media.Brushes]::Gray
$sync.LoadingLabel = $loadingLabel
@ -53,8 +53,17 @@ function Initialize-InstallCategoryAppList {
$TargetElement.Dispatcher.Invoke([System.Windows.Threading.DispatcherPriority]::Background, [action]{
$TargetElement.Items.Clear() # Remove the loading message
$categories = $Apps.Values | Select-Object -ExpandProperty category -Unique | Sort-Object
foreach ($category in $categories) {
# Pre-group apps by category
$appsByCategory = @{}
foreach ($appKey in $Apps.Keys) {
$category = $Apps.$appKey.Category
if (-not $appsByCategory.ContainsKey($category)) {
$appsByCategory[$category] = @()
}
$appsByCategory[$category] += $appKey
}
foreach ($category in $($appsByCategory.Keys | Sort-Object)) {
Add-Category -Category $category -TargetElement $TargetElement
$wrapPanel = New-Object Windows.Controls.WrapPanel
$wrapPanel.Orientation = "Horizontal"
@ -64,9 +73,9 @@ function Initialize-InstallCategoryAppList {
$wrapPanel.Visibility = [Windows.Visibility]::Collapsed
$wrapPanel.Tag = "CategoryWrapPanel_$category"
$null = $TargetElement.Items.Add($wrapPanel)
$Apps.Keys | Where-Object { $Apps.$_.Category -eq $category } | Sort-Object | ForEach-Object {
Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_
}
$appsByCategory[$category] | ForEach-Object {
$sync.$_ = $(Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_)
}
})
}
})
}

View File

@ -10,9 +10,13 @@ function Invoke-WPFUIApps {
switch ($TargetGridName) {
"appspanel" {
$dockPanel = Initialize-InstallAppsMainElement -TargetGridName $TargetGridName
log_time_taken "Setup DockPanel for Apps"
$null = Initialize-InstallHeader -TargetElement $dockPanel
log_time_taken "Setup Header for Apps"
$sync.ItemsControl = Initialize-InstallAppArea -TargetElement $dockPanel
log_time_taken "Setup ItemsControl for Apps"
Initialize-InstallCategoryAppList -TargetElement $sync.ItemsControl -Apps $Apps
log_time_taken "UI Initialized"
}
default {
Write-Output "$TargetGridName not yet implemented"

View File

@ -45,7 +45,7 @@ class GenericException : Exception {
[string]$additionalData
GenericException($Message) : base($Message) {}
}
log_time_taken "Main.ps1 class setup line 48"
$inputXML = $inputXML -replace 'mc:Ignorable="d"', '' -replace "x:N", 'N' -replace '^<Win.*', '<Window'
@ -77,7 +77,7 @@ if (-NOT ($readerOperationSuccessful)) {
[System.GC]::Collect()
exit 1
}
log_time_taken "Main.ps1 xaml loaded"
# Setup the Window to follow listen for windows Theme Change events and update the winutil theme
# throttle logic needed, because windows seems to send more than one theme change event per change
$lastThemeChangeTime = [datetime]::MinValue
@ -105,20 +105,21 @@ $sync.Form.Add_Loaded({
return 0
})
})
log_time_taken "Main.ps1 theme change event setup"
Invoke-WinutilThemeChange -init $true
# Load the configuration files
$noimage = "https://images.emojiterra.com/google/noto-emoji/unicode-15/color/512px/1f4e6.png"
$noimage = [Windows.Media.Imaging.BitmapImage]::new([Uri]::new($noimage))
log_time_taken "Main.ps1 downloaded default image"
$sync.configs.applicationsHashtable = @{}
$sync.configs.applications.PSObject.Properties | ForEach-Object {
$sync.configs.applicationsHashtable[$_.Name] = $_.Value
}
log_time_taken "Main.ps1 loaded applications"
# Now call the function with the final merged config
Invoke-WPFUIElements -configVariable $sync.configs.appnavigation -targetGridName "appscategory" -columncount 1
log_time_taken "Main.ps1 loaded appnavigation"
# Add logic to handle click to the ToggleView Button on the Install Tab
$sync.WPFToggleView.Add_Click({
$sync.CompactView = -not $sync.CompactView
@ -128,9 +129,11 @@ $sync.WPFToggleView.Add_Click({
}
})
Invoke-WPFUIApps -Apps $sync.configs.applicationsHashtable -targetGridName "appspanel"
log_time_taken "Main.ps1 loaded appspanel"
Invoke-WPFUIElements -configVariable $sync.configs.tweaks -targetGridName "tweakspanel" -columncount 2
log_time_taken "Main.ps1 loaded tweakspanel"
Invoke-WPFUIElements -configVariable $sync.configs.feature -targetGridName "featurespanel" -columncount 2
log_time_taken "Main.ps1 loaded featurespanel"
# Future implementation: Add Windows Version to updates panel
#Invoke-WPFUIElements -configVariable $sync.configs.updates -targetGridName "updatespanel" -columncount 1
@ -580,6 +583,6 @@ $sync["SponsorMenuItem"].Add_Click({
})
log_time_taken "Main.ps1 before ShowDialog"
$sync["Form"].ShowDialog() | out-null
Stop-Transcript

View File

@ -12,6 +12,16 @@ param (
[switch]$Run
)
function log_time_taken {
param (
[string]$description
)
$current_time = Get-Date
$time_taken = $current_time - $sync.start_time
Write-Output "[$time_taken] $description" >> $sync.log
$sync.start_time = $current_time
}
# Set DebugPreference based on the -Debug switch
if ($Debug) {
$DebugPreference = "Continue"
@ -34,6 +44,8 @@ Add-Type -AssemblyName System.Windows.Forms
# Variable to sync between runspaces
$sync = [Hashtable]::Synchronized(@{})
$sync.log = "$ENV:USERPROFILE\Desktop\winutil.log"
$sync.start_time = Get-Date
$sync.PSScriptRoot = $PSScriptRoot
$sync.version = "#{replaceme}"
$sync.configs = @{}
@ -88,3 +100,5 @@ Start-Transcript -Path "$logdir\winutil_$dateTime.log" -Append -NoClobber | Out-
# Set PowerShell window title
$Host.UI.RawUI.WindowTitle = $myInvocation.MyCommand.Definition + "(Admin)"
clear-host
Write-Output "" > $sync.log
log_time_taken "Start.ps1 finished"

View File

@ -67,6 +67,82 @@
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="AppTileBorderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="{DynamicResource AppTileBorderThickness}"/>
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="Padding" Value="{DynamicResource AppTileMargins}"/>
<Setter Property="Width" Value="{DynamicResource AppTileWidth}"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="{DynamicResource AppInstallUnselectedColor}"/>
</Style>
<Style x:Key="AppTileCheckboxStyle" TargetType="CheckBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<ContentPresenter Content="{TemplateBinding Content}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="{TemplateBinding Padding}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AppTileImageStyle" TargetType="Image">
<Setter Property="Width" Value="{DynamicResource AppTileImageSize}"/>
<Setter Property="Height" Value="{DynamicResource AppTileImageSize}"/>
<Setter Property="Margin">
<Setter.Value>
<Thickness Left="0" Top="0" Right="10" Bottom="0"/>
</Setter.Value>
</Setter>
<Setter Property="Clip">
<Setter.Value>
<RectangleGeometry Rect="0,0,40,40" RadiusX="5" RadiusY="5"/>
</Setter.Value>
</Setter>
<Setter Property="Visibility" Value="{DynamicResource AppTileCompactVisibility}"/>
</Style>
<Style x:Key="AppTileNameStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="{DynamicResource AppTileFontSize}"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
<Setter Property="Background" Value="Transparent"/>
</Style>
<Style x:Key="AppTileButtonPanelStyle" TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="{DynamicResource AppTileMargins}"/>
<Setter Property="Visibility" Value="{DynamicResource AppTileCompactVisibility}"/>
</Style>
<Style x:Key="AppTileButtonStyle" TargetType="Button">
<Setter Property="Width" Value="45"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Margin" Value="0,0,10,0"/>
<Setter Property="Foreground" Value="{DynamicResource ButtonForegroundColor}"/>
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundColor}"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" FontFamily="Segoe MDL2 Assets" FontSize="20"
Foreground="{DynamicResource MainForegroundColor}"
Background="Transparent" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Button" x:Key="HoverButtonStyle">
<Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}" />
@ -202,7 +278,7 @@
<Setter Property="Foreground" Value="{DynamicResource LabelboxForegroundColor}"/>
<Setter Property="Background" Value="{DynamicResource MainBackgroundColor}"/>
<Setter Property="FontFamily" Value="{DynamicResource HeaderFontFamily}"/>
<Setter Property="FontSize" Value="{DynamicResource FontSizeHeading}"/>
<Setter Property="FontSize" Value="{DynamicResource HeadingFontSize}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>