Home Blog New: PSSharper and WPF/UI Designer
 

New: PSSharper and WPF/UI Designer

We just released ISESteroids 2.5.2.0. This is a major release. It comes with two big new features: PSSharper and improved WPF handling. Let’s take a look at PSSharper first, and then scratch the new WPF support.

Visual Enhancements

PSSharper is a suit of features designed to find issues in your code. To do this in an unobtrusive way, we added visual clues. Some of these clues are generic. For example, ISESteroids displays links and paths with an underline, and when you hold CTRL, you can click these links and navigate to the target.

Clickable Links

This works in comments and strings. In comments, you can also add the keyword “TODO:”. ISESteroids highlights these lines so you can easily maintain important comments and todo lists.

Variable Analysis

Many issues in PowerShell center around variable usage. This is why PSSharper analyzes the use of variables in real-time.

Illegal variable use

You will see dimmed, highlighted, and striked-through variables. When you hover over such a variable, a tooltip provides more information. If you don’t like tooltips, open the new menu PSSharper, and turn them off. They will then only show when you hold CTRL while you hover over an item.

  • Reserved Variables: Sometimes, you find yourself assigning values to reserved system variables. ISESteroids marks this with Strike-Through adornments,
  • Unassigned Variable: If you try and use a variable before it was assigned a value, it is ghosted.
  • Suspicious Assignment: If you assign a variable that is never used, the variable is ghosted. If the variable is used in a different scope, or before the assignment takes place, the variable is marked yellow. Again, a tooltip clarifies why ISESteroids adds these adornments,

Parameter Analysis

Parameters are also evaluated, and when you do not assign a default value to an optional parameter, the parameter is ghosted.

Parameter Analysis

Parameter attributes are also evaluated, and when you assign a default value, such as $Mandatory=$true, the default part “=$true” is ghosted.

Other PSSharper Components

Aside from the visuals you just saw, PSSharper now cleanly combines a set of features some of which were present in previous versions of ISESteroids already. When you open the menu PSSharper, you can control squiggles, visuals, and tooltips.

You can also directly invoke a batch-formatting of your script that fixes the most common formatting problems and nicely pretty-prints your code.

PSSharper Menu

With the item Pester Integration you control the Pester overlays that ISESteroids displays for functions. Settings provides control over the underlying rules and subsystems.

WPF Support and Creating UIs

The other big thing in this release is the new WPF support that makes creating modern WPF-based user interfaces a snap. Here is how to start:

Right-click an empty spot in your ISE editor, then in the context menu, choose WPF/Create WPF Sample Window. This adds all the code for a fully-functional dialog window.

Next, scroll up to the XAML definition. ISESteroids adds convenient overlay controls that allow you to update the code-behind, add more event handlers, or edit the window design in your favorite tool.

To edit the XAML, click Edit, then choose Edit in Kaxaml.

WPF Overlays

ISESteroids ships with a special version of Kaxaml, a light-weight XAML editor. It provides a live preview pane in the top pane, and a XAML editor in the lower pane. This XAML editor comes with IntelliSense, and shows error messages. ISESteroids puts a strong red border around your XAML code while the XAML is being edited in an external editor like Kaxaml.

When you are done with your design changes in Kaxaml, simply wait 2-3 seconds for the preview to pick up your latest changes, then close Kaxaml. Your changes are automatically applied to your ISESteroids code.

Kaxaml Editor

One thing Kaxaml can’t do is create UIs graphically. So you can’t drag around graphical elements in the preview pane, or add new elements from a tool box. If you want that, just use VisualStudio. ISESteroids supports direct interaction with VisualStudio as well.

To use Visual Studio, it needs to be installed on your system, of course. ISESteroids supports free and commercial versions of VisualStudio. “2-way sync” is available only with the commercial versions of VisualStudio.

  • VisualStudio 1-way sync: VisualStudio opens with a sample project, and you need to manually double-click MainWindow.xaml in the project explorer to open the WPF Designer in VisualStudio. Any change you apply to the XAML inside VisualStudio gets synchronized with your code inside ISESteroids. So any time you save your project inside VisualStudio, ISESteroids picks up the changes.
  • VisualStudio 2-way sync: VisualStudio opens and immediately shows its WPF Designer. Changes you apply inside VisualStudio are syned to ISESteroids and vice versa, so when you change the XAML in ISESteroids while VisualStudio is open, it immediately picks up these changes. Note that 2-way sync requires a full version of VisualStudio, and even then there are cases where the WPF Designer inside VisualStudio won’t launch properly. So if 2-way sync fails for you, please simply use the 1-way sync.

VisualStudio Integration

Adding WPF Events

Responding to WPF events from PowerShell code is a snap now, too. When you click the command overlay Events, a dialog opens and displays all events for all named WPF elements in your XAML.

Add Event Handlers

Note that you can select multiple events by holding CTRL while you click. When you uncheck the box “Filter Events”, the list grows and shows all available events. By default, the list only shows the most commonly used events.

Once you selected events and clicked Insert, the appropriate PowerShell event handlers are added to your code:

Adding Event Handler Code

All you need to do now is add the code that should execute when the event fires. If you don’t need the event information, you can safely remove the auto-generated param() block.

Note that events are available for any WPF element in your XAML that has a name. Such elements are automatically and visually marked in your XAML:

Named WPF Elements

You can access these elements directly via $window.[NameOfElement] in your code. To get full intellisense, you may want to run the code once so $window is actually filled.

Note also that when you change or add named elements to your XAML, you may want to click the overlay command Code Behind. This automatically updates the PowerShell code to adjust to your XAML content, and adds any missing PowerShell function you may need to display the XAML as window.

Update Code Behind

If you have worked with WPF before, you may know that WPF code inside the ISE can occasionally crash the editor. This has been solved with the autogenerated code provided by ISESteroids. The code will run smoothly both in native ISE and in ISE with ISESteroids loaded.

What’s Next?

PSSharper is a work in progress, and there will be much more added in the future. For this release, it was our goal to add some useful visual clues. The next feature will be deep code analysis with advanced refactoring.

If there is anything not working as expected, or if you have additional ideas, let us know! Contact us via our support page!