winutil/functions/private/Show-CustomDialog.ps1
Mr.k 83450aef7b
[UI/UX] Update the look & feel of the GUI (#2884)
* Add @CodingWonders to the About page for his contribution and determination to make WinUtil (and MicroWin) the best software it can be!

* Remove the 'LogoSize' Parameter for About page - Make every sponsor in the sponsors list a link to ChrisTitusTech's Sponsors web link

* Change Theme Option name from 'ConfigTabButtonFontSize' to 'ConfigUpdateButtonFontSize' - Lower its value from 16 to 14

* Change Theme Option name from 'FontSizeHeading' to 'HeadingFontSize' for consistency

* Update 'LinkForegroundColor' for Light Theme to be lighter which'll make link hover color more noticeable

* Update 'Show-CustomDialog' Private Function

- Made a lot of theming/styling choices for Custom Dialogs exposed as parameters.
- Update the documentation for these new parameters in 'Show-CustomDialog' Function.
- Add a Link Hover Effect using 'Add_EVENT' methods (This can be tweaks/tuned-down if needed).
- Made use of 'Title' Parameter for 'Show-CustomDialog' Function inside 'scripts/main.ps1' script, to change Dialog Window Title.
- Now you can change the Logo Size of WinUtil through the 'LogoSize' Theming Option (the option was there, but not used in implementation).

* Preprocessing result

* Fix Settings Popup not closing after losing focus - Add trivial null checks for better debugging of UI code

* Remove unnecessary whitespace indentation in 'main.ps1' script

* Add a new 'Invoke-WPFPopup' Function to Better Handle Showing/Hiding/Toggling of Popups

* Improve 'Invoke-WPFPopup' by @MyDrift-user

Thanks for the improvements :)

---------

Co-authored-by: MyDrift <personal@mdiana.ch>
Co-authored-by: Chris Titus <contact@christitus.com>
2024-12-05 21:22:33 -06:00

290 lines
13 KiB
PowerShell

function Show-CustomDialog {
<#
.SYNOPSIS
Displays a custom dialog box with an image, heading, message, and an OK button.
.DESCRIPTION
This function creates a custom dialog box with the specified message and additional elements such as an image, heading, and an OK button. The dialog box is designed with a green border, rounded corners, and a black background.
.PARAMETER Title
The Title to use for the dialog window's Title Bar, this will not be visible by the user, as window styling is set to None.
.PARAMETER Message
The message to be displayed in the dialog box.
.PARAMETER Width
The width of the custom dialog window.
.PARAMETER Height
The height of the custom dialog window.
.PARAMETER FontSize
The Font Size of message shown inside custom dialog window.
.PARAMETER HeaderFontSize
The Font Size for the Header of custom dialog window.
.PARAMETER LogoSize
The Size of the Logo used inside the custom dialog window.
.PARAMETER ForegroundColor
The Foreground Color of dialog window title & message.
.PARAMETER BackgroundColor
The Background Color of dialog window.
.PARAMETER BorderColor
The Color for dialog window border.
.PARAMETER ButtonBackgroundColor
The Background Color for Buttons in dialog window.
.PARAMETER ButtonForegroundColor
The Foreground Color for Buttons in dialog window.
.PARAMETER ShadowColor
The Color used when creating the Drop-down Shadow effect for dialog window.
.PARAMETER LogoColor
The Color of WinUtil Text found next to WinUtil's Logo inside dialog window.
.PARAMETER LinkForegroundColor
The Foreground Color for Links inside dialog window.
.PARAMETER LinkHoverForegroundColor
The Foreground Color for Links when the mouse pointer hovers over them inside dialog window.
.PARAMETER EnableScroll
A flag indicating whether to enable scrolling if the content exceeds the window size.
.EXAMPLE
Show-CustomDialog -Title "My Custom Dialog" -Message "This is a custom dialog with a message and an image above." -Width 300 -Height 200
Makes a new Custom Dialog with the title 'My Custom Dialog' and a message 'This is a custom dialog with a message and an image above.', with dimensions of 300 by 200 pixels.
Other styling options are grabbed from '$sync.Form.Resources' global variable.
.EXAMPLE
$foregroundColor = New-Object System.Windows.Media.SolidColorBrush("#0088e5")
$backgroundColor = New-Object System.Windows.Media.SolidColorBrush("#1e1e1e")
$linkForegroundColor = New-Object System.Windows.Media.SolidColorBrush("#0088e5")
$linkHoverForegroundColor = New-Object System.Windows.Media.SolidColorBrush("#005289")
Show-CustomDialog -Title "My Custom Dialog" -Message "This is a custom dialog with a message and an image above." -Width 300 -Height 200 -ForegroundColor $foregroundColor -BackgroundColor $backgroundColor -LinkForegroundColor $linkForegroundColor -LinkHoverForegroundColor $linkHoverForegroundColor
Makes a new Custom Dialog with the title 'My Custom Dialog' and a message 'This is a custom dialog with a message and an image above.', with dimensions of 300 by 200 pixels, with a link foreground (and general foreground) colors of '#0088e5', background color of '#1e1e1e', and Link Color on Hover of '005289', all of which are in Hexadecimal (the '#' Symbol is required by SolidColorBrush Constructor).
Other styling options are grabbed from '$sync.Form.Resources' global variable.
#>
param(
[string]$Title,
[string]$Message,
[int]$Width = $sync.Form.Resources.CustomDialogWidth,
[int]$Height = $sync.Form.Resources.CustomDialogHeight,
[System.Windows.Media.FontFamily]$FontFamily = $sync.Form.Resources.FontFamily,
[int]$FontSize = $sync.Form.Resources.CustomDialogFontSize,
[int]$HeaderFontSize = $sync.Form.Resources.CustomDialogFontSizeHeader,
[int]$LogoSize = $sync.Form.Resources.CustomDialogLogoSize,
[System.Windows.Media.Color]$ShadowColor = "#AAAAAAAA",
[System.Windows.Media.SolidColorBrush]$LogoColor = $sync.Form.Resources.LabelboxForegroundColor,
[System.Windows.Media.SolidColorBrush]$BorderColor = $sync.Form.Resources.BorderColor,
[System.Windows.Media.SolidColorBrush]$ForegroundColor = $sync.Form.Resources.MainForegroundColor,
[System.Windows.Media.SolidColorBrush]$BackgroundColor = $sync.Form.Resources.MainBackgroundColor,
[System.Windows.Media.SolidColorBrush]$ButtonForegroundColor = $sync.Form.Resources.ButtonInstallForegroundColor,
[System.Windows.Media.SolidColorBrush]$ButtonBackgroundColor = $sync.Form.Resources.ButtonInstallBackgroundColor,
[System.Windows.Media.SolidColorBrush]$LinkForegroundColor = $sync.Form.Resources.LinkForegroundColor,
[System.Windows.Media.SolidColorBrush]$LinkHoverForegroundColor = $sync.Form.Resources.LinkHoverForegroundColor,
[bool]$EnableScroll = $false
)
# Create a custom dialog window
$dialog = New-Object Windows.Window
$dialog.Title = $Title
$dialog.Height = $Height
$dialog.Width = $Width
$dialog.Margin = New-Object Windows.Thickness(10) # Add margin to the entire dialog box
$dialog.WindowStyle = [Windows.WindowStyle]::None # Remove title bar and window controls
$dialog.ResizeMode = [Windows.ResizeMode]::NoResize # Disable resizing
$dialog.WindowStartupLocation = [Windows.WindowStartupLocation]::CenterScreen # Center the window
$dialog.Foreground = $ForegroundColor
$dialog.Background = $BackgroundColor
$dialog.FontFamily = $FontFamily
$dialog.FontSize = $FontSize
# Create a Border for the green edge with rounded corners
$border = New-Object Windows.Controls.Border
$border.BorderBrush = $BorderColor
$border.BorderThickness = New-Object Windows.Thickness(1) # Adjust border thickness as needed
$border.CornerRadius = New-Object Windows.CornerRadius(10) # Adjust the radius for rounded corners
# Create a drop shadow effect
$dropShadow = New-Object Windows.Media.Effects.DropShadowEffect
$dropShadow.Color = $shadowColor
$dropShadow.Direction = 270
$dropShadow.ShadowDepth = 5
$dropShadow.BlurRadius = 10
# Apply drop shadow effect to the border
$dialog.Effect = $dropShadow
$dialog.Content = $border
# Create a grid for layout inside the Border
$grid = New-Object Windows.Controls.Grid
$border.Child = $grid
# Uncomment the following line to show gridlines
#$grid.ShowGridLines = $true
# Add the following line to set the background color of the grid
$grid.Background = [Windows.Media.Brushes]::Transparent
# Add the following line to make the Grid stretch
$grid.HorizontalAlignment = [Windows.HorizontalAlignment]::Stretch
$grid.VerticalAlignment = [Windows.VerticalAlignment]::Stretch
# Add the following line to make the Border stretch
$border.HorizontalAlignment = [Windows.HorizontalAlignment]::Stretch
$border.VerticalAlignment = [Windows.VerticalAlignment]::Stretch
# Set up Row Definitions
$row0 = New-Object Windows.Controls.RowDefinition
$row0.Height = [Windows.GridLength]::Auto
$row1 = New-Object Windows.Controls.RowDefinition
$row1.Height = [Windows.GridLength]::new(1, [Windows.GridUnitType]::Star)
$row2 = New-Object Windows.Controls.RowDefinition
$row2.Height = [Windows.GridLength]::Auto
# Add Row Definitions to Grid
$grid.RowDefinitions.Add($row0)
$grid.RowDefinitions.Add($row1)
$grid.RowDefinitions.Add($row2)
# Add StackPanel for horizontal layout with margins
$stackPanel = New-Object Windows.Controls.StackPanel
$stackPanel.Margin = New-Object Windows.Thickness(10) # Add margins around the stack panel
$stackPanel.Orientation = [Windows.Controls.Orientation]::Horizontal
$stackPanel.HorizontalAlignment = [Windows.HorizontalAlignment]::Left # Align to the left
$stackPanel.VerticalAlignment = [Windows.VerticalAlignment]::Top # Align to the top
$grid.Children.Add($stackPanel)
[Windows.Controls.Grid]::SetRow($stackPanel, 0) # Set the row to the second row (0-based index)
# Add SVG path to the stack panel
$stackPanel.Children.Add((Invoke-WinUtilAssets -Type "logo" -Size $LogoSize))
# Add "Winutil" text
$winutilTextBlock = New-Object Windows.Controls.TextBlock
$winutilTextBlock.Text = "Winutil"
$winutilTextBlock.FontSize = $HeaderFontSize
$winutilTextBlock.Foreground = $LogoColor
$winutilTextBlock.Margin = New-Object Windows.Thickness(10, 10, 10, 5) # Add margins around the text block
$stackPanel.Children.Add($winutilTextBlock)
# Add TextBlock for information with text wrapping and margins
$messageTextBlock = New-Object Windows.Controls.TextBlock
$messageTextBlock.FontSize = $FontSize
$messageTextBlock.TextWrapping = [Windows.TextWrapping]::Wrap # Enable text wrapping
$messageTextBlock.HorizontalAlignment = [Windows.HorizontalAlignment]::Left
$messageTextBlock.VerticalAlignment = [Windows.VerticalAlignment]::Top
$messageTextBlock.Margin = New-Object Windows.Thickness(10) # Add margins around the text block
# Define the Regex to find hyperlinks formatted as HTML <a> tags
$regex = [regex]::new('<a href="([^"]+)">([^<]+)</a>')
$lastPos = 0
# Iterate through each match and add regular text and hyperlinks
foreach ($match in $regex.Matches($Message)) {
# Add the text before the hyperlink, if any
$textBefore = $Message.Substring($lastPos, $match.Index - $lastPos)
if ($textBefore.Length -gt 0) {
$messageTextBlock.Inlines.Add((New-Object Windows.Documents.Run($textBefore)))
}
# Create and add the hyperlink
$hyperlink = New-Object Windows.Documents.Hyperlink
$hyperlink.NavigateUri = New-Object System.Uri($match.Groups[1].Value)
$hyperlink.Inlines.Add($match.Groups[2].Value)
$hyperlink.TextDecorations = [Windows.TextDecorations]::None # Remove underline
$hyperlink.Foreground = $LinkForegroundColor
$hyperlink.Add_Click({
param($sender, $args)
Start-Process $sender.NavigateUri.AbsoluteUri
})
$hyperlink.Add_MouseEnter({
param($sender, $args)
$sender.Foreground = $LinkHoverForegroundColor
$sender.FontSize = ($FontSize + ($FontSize / 4))
$sender.FontWeight = "SemiBold"
})
$hyperlink.Add_MouseLeave({
param($sender, $args)
$sender.Foreground = $LinkForegroundColor
$sender.FontSize = $FontSize
$sender.FontWeight = "Normal"
})
$messageTextBlock.Inlines.Add($hyperlink)
# Update the last position
$lastPos = $match.Index + $match.Length
}
# Add any remaining text after the last hyperlink
if ($lastPos -lt $Message.Length) {
$textAfter = $Message.Substring($lastPos)
$messageTextBlock.Inlines.Add((New-Object Windows.Documents.Run($textAfter)))
}
# If no matches, add the entire message as a run
if ($regex.Matches($Message).Count -eq 0) {
$messageTextBlock.Inlines.Add((New-Object Windows.Documents.Run($Message)))
}
# Create a ScrollViewer if EnableScroll is true
if ($EnableScroll) {
$scrollViewer = New-Object System.Windows.Controls.ScrollViewer
$scrollViewer.VerticalScrollBarVisibility = 'Auto'
$scrollViewer.HorizontalScrollBarVisibility = 'Disabled'
$scrollViewer.Content = $messageTextBlock
$grid.Children.Add($scrollViewer)
[Windows.Controls.Grid]::SetRow($scrollViewer, 1) # Set the row to the second row (0-based index)
} else {
$grid.Children.Add($messageTextBlock)
[Windows.Controls.Grid]::SetRow($messageTextBlock, 1) # Set the row to the second row (0-based index)
}
# Add OK button
$okButton = New-Object Windows.Controls.Button
$okButton.Content = "OK"
$okButton.FontSize = $FontSize
$okButton.Width = 80
$okButton.Height = 30
$okButton.HorizontalAlignment = [Windows.HorizontalAlignment]::Center
$okButton.VerticalAlignment = [Windows.VerticalAlignment]::Bottom
$okButton.Margin = New-Object Windows.Thickness(0, 0, 0, 10)
$okButton.Background = $buttonBackgroundColor
$okButton.Foreground = $buttonForegroundColor
$okButton.BorderBrush = $BorderColor
$okButton.Add_Click({
$dialog.Close()
})
$grid.Children.Add($okButton)
[Windows.Controls.Grid]::SetRow($okButton, 2) # Set the row to the third row (0-based index)
# Handle Escape key press to close the dialog
$dialog.Add_KeyDown({
if ($_.Key -eq 'Escape') {
$dialog.Close()
}
})
# Set the OK button as the default button (activated on Enter)
$okButton.IsDefault = $true
# Show the custom dialog
$dialog.ShowDialog()
}