Optimize UI Performance (#3277)

* Optimize UI Load performance

* remove timers

* Formatting

* Remove unused Collapsed Checkbox Style from inputXML.xaml

config/themes.json

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

functions/private/Initalize-InstallAppEntry.ps1

@@ -5,27 +5,19 @@ function Initialize-InstallAppEntry {
             Used to as part of the Install Tab UI generation
         .PARAMETER TargetElement
             The Element into which the Apps should be placed
-        .PARAMETER AppKey
+        .PARAMETER appKey
             The Key of the app inside the $sync.configs.applicationsHashtable
     #>
         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.Style = $sync.Form.Resources.AppTileBorderStyle
-        $border.SetResourceReference([Windows.Controls.Control]::BorderThicknessProperty, "AppTileBorderThickness")
+        $border.Tag = $appKey
-        $border.CornerRadius = 5
+        $border.ToolTip = $Apps.$appKey.description
-        $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.Add_MouseUp({
             $childCheckbox = ($this.Child.Children | Where-Object {$_.Template.TargetType -eq [System.Windows.Controls.Checkbox]})[0]
             $childCheckBox.isChecked = -not $childCheckbox.IsChecked
@@ -47,12 +39,8 @@ function Initialize-InstallAppEntry {
 
         # Create the CheckBox, vertically centered
         $checkBox = New-Object Windows.Controls.CheckBox
-        $checkBox.Name = $AppKey
+        $checkBox.Name = $appKey
-        $checkBox.Background = "Transparent"
+        $checkbox.Style = $sync.Form.Resources.AppTileCheckboxStyle
-        $checkBox.HorizontalAlignment = "Left"
-        $checkBox.VerticalAlignment = "Center"
-        $checkBox.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $checkBox.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CollapsedCheckBoxStyle")
         $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.Style = $sync.Form.Resources.AppTileImageStyle
-        $image.Height = 40
-        $image.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
         $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.Style = $sync.Form.Resources.AppTileNameStyle
-        $appName.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "AppTileFontSize")
+        $appName.Text = $Apps.$appKey.content
-        $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"
         $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.Style = $sync.Form.Resources.AppTileButtonPanelStyle
-        $buttonPanel.HorizontalAlignment = "Right"
-        $buttonPanel.VerticalAlignment = "Center"
-        $buttonPanel.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $buttonPanel.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
         [Windows.Controls.DockPanel]::SetDock($buttonPanel, [Windows.Controls.Dock]::Right)
 
-        # Create the "Install" button
+        # Define the button properties
-        $installButton = New-Object Windows.Controls.Button
+        $buttons = @(
-        $installButton.Width = 45
+            [PSCustomObject]@{ Name = "Install"; Description = "Install or Upgrade the application"; Tooltip = "Install or Upgrade the application"; Icon = [char]0xE118 },
-        $installButton.Height = 35
+            [PSCustomObject]@{ Name = "Uninstall"; Description = "Uninstall the application"; Tooltip = "Uninstall the application"; Icon = [char]0xE74D },
-        $installButton.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
+            [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
+        # Iterate over each button and create it
-        $installIcon.Text = [char]0xE118  # Install Icon
+        foreach ($button in $buttons) {
-        $installIcon.FontFamily = "Segoe MDL2 Assets"
+            $newButton = New-Object Windows.Controls.Button
-        $installIcon.FontSize = 20
+            $newButton.Style = $sync.Form.Resources.AppTileButtonStyle
-        $installIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+            $newButton.Content = $button.Icon
-        $installIcon.Background = "Transparent"
+            $newButton.ToolTip = $button.Tooltip
-        $installIcon.HorizontalAlignment = "Center"
+            $buttonPanel.Children.Add($newButton) | Out-Null
-        $installIcon.VerticalAlignment = "Center"
 
-        $installButton.Content = $installIcon
+            switch ($button.Name) {
-        $installButton.ToolTip = "Install or Upgrade the application"
+                "Install" {
-        $buttonPanel.Children.Add($installButton) | Out-Null
+                    $newButton.Add_Click({
-
-        # 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
+                "Uninstall" {
-        $uninstallButton = New-Object Windows.Controls.Button
+                    $newButton.Add_Click({
-        $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
+                "Info" {
-        $infoButton = New-Object Windows.Controls.Button
+                    $newButton.Add_Click({
-        $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
                     })
+                }
+            }
+        }
 
         # 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
     }

functions/private/Initialize-InstallCategoryAppList.ps1

@@ -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,8 +73,8 @@ 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 {
+                $appsByCategory[$category] | ForEach-Object {
-                    Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_
+                    $sync.$_ =  $(Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_)
             }
         }
     })

scripts/main.ps1

@@ -46,7 +46,6 @@ class GenericException : Exception {
     GenericException($Message) : base($Message) {}
 }
 
-
 $inputXML = $inputXML -replace 'mc:Ignorable="d"', '' -replace "x:N", 'N' -replace '^<Win.*', '<Window'
 
 [void][System.Reflection.Assembly]::LoadWithPartialName('presentationframework')
@@ -119,6 +118,7 @@ $sync.configs.applications.PSObject.Properties | ForEach-Object {
 
 # Now call the function with the final merged config
 Invoke-WPFUIElements -configVariable $sync.configs.appnavigation -targetGridName "appscategory" -columncount 1
+
 # Add logic to handle click to the ToggleView Button on the Install Tab
 $sync.WPFToggleView.Add_Click({
     $sync.CompactView = -not $sync.CompactView
@@ -130,7 +130,9 @@ $sync.WPFToggleView.Add_Click({
 Invoke-WPFUIApps -Apps $sync.configs.applicationsHashtable -targetGridName "appspanel"
 
 Invoke-WPFUIElements -configVariable $sync.configs.tweaks -targetGridName "tweakspanel" -columncount 2
+
 Invoke-WPFUIElements -configVariable $sync.configs.feature -targetGridName "featurespanel" -columncount 2
+
 # Future implementation: Add Windows Version to updates panel
 #Invoke-WPFUIElements -configVariable $sync.configs.updates -targetGridName "updatespanel" -columncount 1
 
@@ -579,7 +581,5 @@ $sync["SponsorMenuItem"].Add_Click({
     Show-CustomDialog -Title "Sponsors" -Message $authorInfo -EnableScroll $true
 })
 
-
-
 $sync["Form"].ShowDialog() | out-null
 Stop-Transcript

xaml/inputXML.xaml

@@ -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}" />
@@ -502,19 +578,6 @@
                  </Setter.Value>
             </Setter>
         </Style>
-    <!-- Collapsed Checkbox Style -->
-    <Style x:Key="CollapsedCheckBoxStyle" TargetType="CheckBox">
-        <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 TargetType="RadioButton">
             <Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}"/>
             <Setter Property="Background" Value="{DynamicResource MainBackgroundColor}"/>