Building PowerShell GUIs

1. Building PowerShell GUIs Taking your scripting to the next level Nathan Ziehnert 08/23/2019

2. Experience? • Who has written a script for some repeatable process? • Who has written a script that requires parameters? • Who has designed a GUI for a PowerShell Script? • Who is familiar with WinForms? • Who is familiar with WPF?

3. Why Create a GUI? • Part of your skill progression • Empowering your coworkers • Let someone else drive so that you don't have to

4. In Order To Learn How To Program... • Common ‘First-GUI’ Ideas • Password Resets • Provision new users • Babysitting tasks • Setting a computer name and OU in an OSD Task Sequence

5. Example UI

6. By The End Of This Session

7. Basics of WPF

8. WPF Overview • Windows Presentation Framework • UI Framework • "You write the markup, I write the code" – Your Complier • Advantages over WinForms • Look and Feel • Layouts • Community Themes/Controls • Damien Van Robaeys (@syst_and_deploy) | http://www.systanddeploy.com/ • Jérôme Bezet-Torres (@JM2K69) | http://jm2k69.github.io/ • Animations! • FREE TOOLS!!!

9. Creating WPF Dialogs in PowerShell Using Objects aka straight PowerShell... aka the “Sapien” WinForms method...

10. aka The HARD Way

11. ABOUT MENU

12. Structuring Your PowerShell • Add the Framework(s)

13. Add The Framework(s) ## PresentationFramework / PresentationFramework.dll contains all of the WPF controls## that are necessary to build our GUI. Add-Type -AssemblyNamePresentationFramework ## You may SOMETIMES see the following referenced in other PowerShell scripts. These## should never be required to create WPF GUIs with objects in PowerShell, and also## shouldn't be required if you're using the XAML method either. Add-Type -AssemblyNamePresentationCoreAdd-Type -AssemblyNameWindowsBase

14. Structuring Your PowerShell • Add the Frameworks • Create Your Objects (Window, Buttons, Labels, Grids, You Get the Picture)

15. Create Your Objects $Window = New-Object System.Windows.Window$Window.Height = 600$Window.Width = 400$Window.Title = "Big Surprise"$Window.ResizeMode = "NoResize" $StackPanel = New-Object System.Windows.Controls.StackPanel $Surprise = New-Object System.Windows.Controls.Image$Surprise.Source = "$PSScriptRoot╲xx-Surprise.jpg"$Surprise.Visibility = "Hidden"$Surprise.Height = 500 $Button = New-Object System.Windows.Controls.Button$Button.Content = "How you doin?"$Button.Height = 50$Button.Width = 100

16. Structuring Your PowerShell • Add the Frameworks • Create Your Objects (Window, Buttons, Labels, Grids, You Get the Picture) • Add Your Child Objects to Their Parent

17. Add Your Children ## Parent objects accept a couple different ways to add content depending on which## control the parent object is. These include:## - $Object.Content = $Child## - $Object.AddChild($Child) $StackPanel.AddChild($Surprise)$StackPanel.AddChild($Button) $Window.Content = $StackPanel

18. Structuring Your PowerShell • Add the Frameworks • Create Your Objects (Window, Buttons, Labels, Grids, You Get the Picture) • Add Your Child Objects to Their Parent • Add Your Events

19. Add Your Events ## Events are added by getting the name of the event and prepending "Add_" to it.## - $Object.Add_Click({event script block})#### You can get the list of available events by creating the object in PowerShell and## then running the Get-Member cmdlet against it:## - $Object | Get-Member -MemberType Event $Button.Add_Click( { $Surprise.Visibility = "Visible" })

20. Structuring Your PowerShell • Add the Frameworks • Create Your Objects (Window, Buttons, Labels, Grids, You Get the Picture) • Add Your Child Objects to Their Parent • Add Your Events • Show the Dialog

21. Show Your Dialog ## By prepending "$null =" to our ShowDialog() method we won’t get the Boolean output## of the ShowDialog() method.$null = $Window.ShowDialog()

22. Straight PowerShell. No Chaser.

23. Pro Et Contra Cons Pros • Familiar language (if you used to build GUIs with Sapien or a similar WYSIWYG editor) • It’s good to learn your roots • No WYSIWYG Editors that will generate the object code (AFAIK) • Requires an existing knowledge of WPF controls and their attributes • Responsive GUIs are much harder to create (as if they weren't hard enough already) • Complex GUIs are hard to design and super verbose • Lots of lines of code very quickly

24. Creating WPF Dialogs in PowerShell Using XAML

25. XAML Structure • eXtensible Application Markup Language • It's like XML. • Really though... It's XML. • Parent/Child relationship with properties • XAML executes no code (no PowerShell, no C#, etc) – it's a "markup" language • How do we present this data vs how do we generate/format the data

26. Creating XAML Drag and Drop for that processed factory farm feel Hand-Coded for that free-range organic feel

27. Good Layout Hygiene • Direct Drag and Drop (i.e. no supporting Grid layout or StackPanel)

28. Good Mediocre Layout Hygiene • Direct Drag and Drop • Leads to element positioning defined by pixel in margin attribute (i.e. there isn't really an "absolute" positioning attribute in WPF)

29. Creating XAML

30. Good Mediocre Layout Hygiene • Direct Drag and Drop • Leads to element positioning defined by pixel in margin attribute (i.e. there isn't really an "absolute" positioning attribute in WPF) • Does not scale well • Issues arise when you nest elements like StackPanels in Grids (Visual Studio ends up placing them in the parent element) • Simple UIs – All Day Long • Complex UIs – Learn to read XAML

31. Good Layout Hygiene • Grids • Similar to HTML tables • Row/Column sizes defined in three formats: • Proportional Division (Star/*) • Pixels • Automatic sizing based on content • StackPanel • Kind of like "Automatic Tables" • Elements/Controls "stack" horizontally/vertically

32. Making a WPF UI - Flow • Design your User Interface in Visual Studio • Copy XAML  • Paste XAML into new file • Load Parse XAML • Write Event Handlers • Give to end users to run • Get bonus at next review...

33. The XAML Way.

34. Stylizing WPF Dialogs Making your GUIs pretty.

35. Options • "You can GO YOUR OWN WAY! (go your own waaaaay)" • Visual Studio Blend • Use a community theme / control. Examples include: • MahApps.Metro • Material Design

36. Community Themes • Download / collect the appropriate resource libraries (DLLs) • NuGet + 7-Zip • Visual Studio • Design GUI based on theme • Add resources references to XAML via resource dictionary • In some cases you may need to modify the XAML elements (Window) • *cough* MahApps *cough* • Controls might be named differently (or maybe they're entirely new) • Import DLL(s) in PowerShell script

37. Downloading Community Themes • Download / collect the appropriate resource libraries (DLLs) • IANAL!!! Review the license agreements with your legal team. • NuGet.org • Doesn't require you to install Visual Studio CE... • Extract and review *.nuspec file for dependency chaining • Visual Studio Community • Review the licensing with your legal team... • Create a basic WPF application and use the NuGet package manager • Resources Here: "SolutionRoot╲packages" • Make note of required .NET version

38. Adding Community Themes • Design GUI based on theme/control • Rely on the documentation for the theme/control • Rely on those who have gone before you... Bing it.

39. Importing Community Themes • Import DLL(s) in PowerShell script • Add-Type –Path "path╲to╲resource.dll"

40. Rely On Those Who Have Gone Before You • MahApps.Metro • http://www.systanddeploy.com/2016/01/powershell-gui-add-mahapps-metro-theme.html • Material Design • https://jm2k69.github.io/2018-10-09-How-to-use-Material-Desgin-with-PowerShell/

41. Pretty Pretty!

42. Interacting with an OSD TS Because who doesn't want to roll their own Task Sequence GUI?

43. Task Sequence Interaction • WPF issues with WinPE 1809 • With WinPE 1809 from the ADK, two DLLs were missing • FIX: "Copy BCP47*.dll from Windows╲System32 of a Windows 10 x64 1809 and add them to your WinPE Extra Files to be copied to <WinPE>:╲Windows╲System32 or add these files in Offline Servicing." • https://www.osdeploy.com/blog/winpe-10-1809-wpf-dramarama

44. Task Sequence Interaction • Getting / Setting Variables • Add the Microsoft SMS TSEnvironmentCOMObject • $tsEnv = New-Object -COMObjectMicrosoft.SMS.TSEnvironment • Get a Variable • $tsEnv.Value("VariableName") • Set a Variable • $tsEnv.Value("VariableName") = "New Value" • Example: Access the value of a textblock to set as the value • $tsEnv.Value("OSDComputerName") = $TextBox.Text • Cannot set read only variables (Generally start with an _)

45. Task Sequence Interaction • Hiding the Progress UI • Add the Microsoft SMS TSProgressUICOMObject • $tsProg = New-Object -COMObjectMicrosoft.SMS.TSProgressUI • Hide the Dialog • $tsProg.CloseProgressDialog() • The Progress UI will reopen when the next step of the task sequence executes

46. Let's Test it in a TS

47. ServiceUI.exe -process:tsprogressui.exe "c:\Windows\System32\WindowsPowershell\v1.0\powershell.exe" -ExecutionPolicy Bypass -WindowStyle Hidden -File \"UserNotification.ps1\" -SettingsFile \"Settings.ini\" Getting the Dialog To Show In Explorer ServiceUI.exe Somewhat confusing command line

48. Building Responsive GUIs

49. Unresponsive Example

50. The Problem of Threads • Your WPF script runs in two threads... but really, it's one thread • UI Thread (the script, and the UI including "painting" and actions) • Render Thread (the rendering of the GUI)