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

@@ -13,7 +13,7 @@ function Set-CategoryVisibility {
 
     # 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 {

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."
@@ -193,34 +194,42 @@ function Invoke-WPFUIElements {
                     }
 
                     "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.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
+                        $toggleButton.Style = $ToggleButtonStyle
 
-                        $textBlock = New-Object Windows.Controls.TextBlock
-                        $textBlock.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "TabButtonFontSize")
-                        $textBlock.Background = [Windows.Media.Brushes]::Transparent
-                        $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
+                        $toggleButton.Tag = @{
+                            contentOn = $contentOn
+                            contentOff = $contentOff
+                        }
 
                         $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" {

xaml/inputXML.xaml

@@ -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}"/>