Improve Togglebutton

- add initial implementation of togglebutton style
- add togglebuttons to appnavigation.json
- refractor UI element creation for Togglebutton
- commit preprocessing changes

config/appnavigation.json

@@ -1,16 +1,30 @@
 {
+    "WPFToggleView": {
+        "Content": ["Expanded View", "Compact View"],
+        "Category": "____Actions",
+        "Type": "ToggleButton",
+        "Order": "1",
+        "Description": "Toggle between a list and a compact grid like view"
+    },
+    "WPFSelectedFilter": {
+        "Content": ["Show Selected", "Show All"],
+        "Category": "____Actions",
+        "Type": "ToggleButton",
+        "Order": "2",
+        "Description": "Toggle between showing all or only the selected applications"
+    },
     "WPFGetInstalled": {
         "Content": "Get Installed",
         "Category": "____Actions",
         "Type": "Button",
-        "Order": "1",
+        "Order": "3",
         "Description": "Show installed applications"
     },
     "WPFClearInstallSelection": {
         "Content": "Clear Selection",
         "Category": "____Actions",
         "Type": "Button",
-        "Order": "2",
+        "Order": "4",
         "Description": "Clear the selection of applications"
     },
     "WingetRadioButton": {

functions/public/Invoke-WPFUIApps.ps1

@@ -11,15 +11,15 @@ function Set-CategoryVisibility {
         $isChecked = $sync.CompactView
     }
 
-    # If all the Categories are affected, update the Checked state of the ToggleButtons. 
+    # If all the Categories are affected, update the Checked state of the ToggleButtons.
     # Otherwise, the state is not synced when toggling between the display modes
-    if  ($category -eq "*"){      
+    if  ($category -eq "*") {
         $items = $ItemsControl.Items | Where-Object {($_.Tag -like "CategoryWrapPanel_*")}
         $ItemsControl.Items | Where-Object {($_.Tag -eq "CategoryToggleButton")} | Foreach-Object { $_.Visibility = [Windows.Visibility]::Visible; $_.IsChecked = $isChecked }
     } else {
         $items = $ItemsControl.Items | Where-Object {($_.Tag -eq "CategoryWrapPanel_$Category")}
     }
-    
+
     $elementVisibility = if ($isChecked -eq $true) {[Windows.Visibility]::Visible} else {[Windows.Visibility]::Collapsed}
     $items | ForEach-Object {
         $_.Visibility = $elementVisibility
@@ -39,8 +39,8 @@ function Find-AppsByNameOrDescription {
 
     if ([string]::IsNullOrWhiteSpace($SearchString)) {
             Set-CategoryVisibility -Category "*" -ItemsControl $ItemsControl -automaticVisibility
-        
+
-        
+
         $ItemsControl.Items | ForEach-Object {
             if ($_.Tag -like "CategoryWrapPanel_*") {
                 # If CompactView is enabled, show all Apps when the search bar is empty
@@ -75,7 +75,7 @@ function Find-AppsByNameOrDescription {
                     }
                 }
             }
-        }   
+        }
     }
 }
 
@@ -96,7 +96,7 @@ function Show-OnlyCheckedApps {
         $sync.Buttons | Where-Object {$_.Name -like "ShowSelectedAppsButton"} | ForEach-Object {
             $_.Content = "Show All"
         }
-        
+
         $ItemsControl.Items | Foreach-Object {
             # Search for App Container and set them to visible
             if ($_.Tag -like "CategoryWrapPanel_*") {
@@ -220,7 +220,7 @@ function Invoke-WPFUIApps {
                 $this.Content = "Expanded View"
             } else {
                 $this.Content = "Compact View"
-            }  
+            }
         })
         $null = $wrapPanelTop.Children.Add($compactViewButton)
         [Windows.Controls.DockPanel]::SetDock($wrapPanelTop, [Windows.Controls.Dock]::Top)
@@ -260,7 +260,7 @@ function Invoke-WPFUIApps {
             [string]$Category,
             $ItemsControl
         )
-        
+
         $toggleButton = New-Object Windows.Controls.Primitives.ToggleButton
         $toggleButton.Content = "$Category"
         $toggleButton.Tag = "CategoryToggleButton"
@@ -351,7 +351,7 @@ function Invoke-WPFUIApps {
         $checkBox.HorizontalAlignment = "Left"
         $checkBox.VerticalAlignment = "Center"
         $checkBox.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
-        $checkBox.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CollapsedCheckBoxStyle") 
+        $checkBox.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CollapsedCheckBoxStyle")
         $checkbox.Add_Checked({
             Invoke-WPFSelectedLabelUpdate -type "Add" -checkbox $this
             $borderElement = $this.Parent.Parent

functions/public/Invoke-WPFUIElements.ps1

@@ -30,6 +30,7 @@ function Invoke-WPFUIElements {
     $borderstyle = $window.FindResource("BorderStyle")
     $HoverTextBlockStyle = $window.FindResource("HoverTextBlockStyle")
     $ColorfulToggleSwitchStyle = $window.FindResource("ColorfulToggleSwitchStyle")
+    $ToggleButtonStyle = $window.FindResource("ToggleButtonStyle")
 
     if (!$borderstyle -or !$HoverTextBlockStyle -or !$ColorfulToggleSwitchStyle) {
         throw "Failed to retrieve Styles using 'FindResource' from main window element."
@@ -187,40 +188,48 @@ function Invoke-WPFUIElements {
                         $sync[$entryInfo.Name].IsChecked = Get-WinUtilToggleStatus $sync[$entryInfo.Name].Name
 
                         $sync[$entryInfo.Name].Add_Click({
-                                [System.Object]$Sender = $args[0]
+                            [System.Object]$Sender = $args[0]
-                                Invoke-WPFToggle $Sender.name
+                            Invoke-WPFToggle $Sender.name
-                            })
+                        })
                     }
 
                     "ToggleButton" {
-                        $toggleButton = New-Object Windows.Controls.ToggleButton
+                        # Determine contentOn and contentOff based on the Content property
+                        if ($entryInfo.Content -is [array]) {
+                            # If Content is an array, use its elements
+                            write-host "Content is an array"
+                            write-host $entryInfo.Content
+                            $contentOn = if ($entryInfo.Content.Count -ge 1) { $entryInfo.Content[0] } else { "" }
+                            $contentOff = if ($entryInfo.Content.Count -ge 2) { $entryInfo.Content[1] } else { $contentOn }
+                        } else {
+                            # If Content is a single value, use it for both states
+                            $contentOn = $entryInfo.Content
+                            $contentOff = $entryInfo.Content
+                        }
+
+                        $toggleButton = New-Object Windows.Controls.Primitives.ToggleButton
                         $toggleButton.Name = $entryInfo.Name
+                        $toggleButton.Content = $contentOff
+                        $toggleButton.ToolTip = $entryInfo.Description
                         $toggleButton.HorizontalAlignment = "Left"
-                        $toggleButton.SetResourceReference([Windows.Controls.Control]::HeightProperty, "TabButtonHeight")
+                        $toggleButton.Style = $ToggleButtonStyle
-                        $toggleButton.SetResourceReference([Windows.Controls.Control]::WidthProperty, "TabButtonWidth")
-                        $toggleButton.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "ButtonInstallBackgroundColor")
-                        $toggleButton.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
-                        $toggleButton.FontWeight = [Windows.FontWeights]::Bold
 
-                        $textBlock = New-Object Windows.Controls.TextBlock
+                        $toggleButton.Tag = @{
-                        $textBlock.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "TabButtonFontSize")
+                            contentOn = $contentOn
-                        $textBlock.Background = [Windows.Media.Brushes]::Transparent
+                            contentOff = $contentOff
-                        $textBlock.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "ButtonInstallForegroundColor")
+                        }
-
-                        $underline = New-Object Windows.Documents.Underline
-                        $underline.Inlines.Add($entryInfo.Name -replace "(.).*", "$1")
-
-                        $run = New-Object Windows.Documents.Run
-                        $run.Text = $entryInfo.Name -replace "^.", ""
-
-                        $textBlock.Inlines.Add($underline)
-                        $textBlock.Inlines.Add($run)
-
-                        $toggleButton.Content = $textBlock
 
                         $itemsControl.Items.Add($toggleButton) | Out-Null
 
                         $sync[$entryInfo.Name] = $toggleButton
+
+                        $sync[$entryInfo.Name].Add_Checked({
+                            $this.Content = $this.Tag.contentOn
+                        })
+
+                        $sync[$entryInfo.Name].Add_Unchecked({
+                            $this.Content = $this.Tag.contentOff
+                        })
                     }
 
                     "Combobox" {

scripts/main.ps1

@@ -216,8 +216,8 @@ function Update-AppTileProperties {
         $sync.Form.Resources.AppTileMargins = [Windows.Thickness]5
         $sync.Form.Resources.AppTileBorderThickness = [Windows.Thickness]1
     }
-}   
+}
-# We need to update the app tile properties when the form is resized because to fill a WrapPanel update the width of the elemenmt manually (afaik) 
+# We need to update the app tile properties when the form is resized because to fill a WrapPanel update the width of the elemenmt manually (afaik)
 $sync.Form.Add_SizeChanged({
     Update-AppTileProperties
 })

xaml/inputXML.xaml

@@ -210,9 +210,9 @@
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="ToggleButton">
-                        <Border Background="{TemplateBinding Background}" 
+                        <Border Background="{TemplateBinding Background}"
-                                BorderBrush="{DynamicResource BorderColor}" 
+                                BorderBrush="{DynamicResource BorderColor}"
-                                BorderThickness="0" 
+                                BorderThickness="0"
                                 CornerRadius="{DynamicResource ButtonCornerRadius}">
                             <StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                                 <TextBlock x:Name="PrefixTextBlock"/>
@@ -337,6 +337,64 @@
                 </Setter.Value>
             </Setter>
         </Style>
+
+        <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
+            <Setter Property="Margin" Value="{DynamicResource ButtonMargin}"/>
+            <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundColor}"/>
+            <Setter Property="Background" Value="{DynamicResource ButtonBackgroundColor}"/>
+            <Setter Property="Height" Value="{DynamicResource ButtonHeight}"/>
+            <Setter Property="Width" Value="{DynamicResource ButtonWidth}"/>
+            <Setter Property="FontSize" Value="{DynamicResource ButtonFontSize}"/>
+            <Setter Property="FontFamily" Value="{DynamicResource FontFamily}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ToggleButton">
+                        <Grid>
+                            <Border x:Name="BackgroundBorder"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderThickness="{DynamicResource ButtonBorderThickness}"
+                                    CornerRadius="{DynamicResource ButtonCornerRadius}">
+                                <Grid>
+                                    <!-- Toggle Dot -->
+                                    <Ellipse x:Name="ToggleDot"
+                                            Width="8" Height="8"
+                                            Fill="{DynamicResource ButtonForegroundColor}"
+                                            HorizontalAlignment="Left"
+                                            VerticalAlignment="Top"
+                                            Margin="5,3,0,0" />
+
+                                    <!-- Content Presenter -->
+                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,2,10,2"/>
+                                </Grid>
+                            </Border>
+                        </Grid>
+
+                        <!-- Triggers for ToggleButton states -->
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsChecked" Value="True">
+                                <Setter TargetName="ToggleDot" Property="VerticalAlignment" Value="Bottom"/>
+                                <Setter TargetName="ToggleDot" Property="Margin" Value="5,0,0,3"/> <!-- Consistent bottom margin -->
+                            </Trigger>
+
+                            <Trigger Property="IsPressed" Value="True">
+                                <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundPressedColor}"/>
+                            </Trigger>
+
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundMouseoverColor}"/>
+                            </Trigger>
+
+                            <Trigger Property="IsEnabled" Value="False">
+                                <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundSelectedColor}"/>
+                                <Setter Property="Foreground" Value="DimGray"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
         <Style x:Key="SearchBarClearButtonStyle" TargetType="Button">
             <Setter Property="FontFamily" Value="{DynamicResource FontFamily}"/>
             <Setter Property="FontSize" Value="{DynamicResource SearchBarClearButtonFontSize}"/>
@@ -410,9 +468,9 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="CheckBox">
-                    <ContentPresenter Content="{TemplateBinding Content}" 
+                    <ContentPresenter Content="{TemplateBinding Content}"
-                                    VerticalAlignment="Center" 
+                                    VerticalAlignment="Center"
-                                    HorizontalAlignment="Left" 
+                                    HorizontalAlignment="Left"
                                     Margin="{TemplateBinding Padding}"/>
                 </ControlTemplate>
             </Setter.Value>