Monday 30 May 2016

Powershell_WPF - Part II - How to apply a theme



      In this post I’m going to explain how to apply a theme on your GUI.There are many themes available on the web that you can apply on your WPF form. However, it’s solely explained for C# language use. In our case, we need it for powershell so how do we do it?
Don’t worry anymore! We are going to fix this. J I’ll show you how to integrate two kind of themes in this article.

  • First is based on the use of XAML resources
  • Second is based on dll resources assembly
For the first one, there is an interesting pack of theme from stanislawswierc that you can find here: https://www.nuget.org/packages/Wpf.Themes/ 

And for the second, it’s a project started by Paul Jenkins which uses a Metro theme. You can find it here:  http://mahapps.com/ . To use its full potential you need to have .NET framework 4.5 installed on your computer.

One thing I haven’t introduced in the first Part of this series is the use of StackpanelThe StackPanel is a simple and useful layout panel. As its name imply, It stacks its child elements below or beside each other, depending on the orientation. That coupled with HorizontalAlignement and VertcalAlignment properties; it becomes easy to handle elements.
You don’t have to specify explicit value for element’s position, it will automatically fits the space available. It will become very handy when we will create dynamic GUI later.

I’m going to use the same ps1 file as in the first article "How to create a GUI" ,and here's the GUI that I'm going to use:


Let’s begin!

Part 1: XAML resource

First, How to get the theme?
Launch visual studio, create a new WPF project and open the package manager console
Tools > Nuget package Manager > Package Manager Console

And copy this line into it:

PM> Install-Package Wpf.Themes

Now you should have something like this


      And you can see in the "Solution Explorer" window at your right that a new folder Themes containing different XAML files has been added in the treeview. 


For now, we are on the right track. Now, Browse to your project’s files location and copy the "Themes"  folder that has just been created to the location of the xaml and ps1 you want to apply the theme. At this point, you should have something like these in your project folder:
Now, that we have everything we need, we can edit our xaml. Before, editing your xaml, make sure that your form appears normally and that no error pops up of the powershell console.
In your xaml file, right after the Window tag add the following lines:

Those lines are used to tell that some external resources will be used in the form.

As you can see here, we’re using the Bureau Blue theme located in the folder Themes as resources. And that’s all you needed to apply the theme. Fast and easy!

Here are some previews of the themes provided:

                                                                                   


Part 2: Dll resources

Now let’s move on, here we are going to use dll resource for our theme. This is the theme I like the most: Mahapps.

Again, open visual studio and create a new WPF project, and load the package manager console: Tools > Nuget package Manager > Package Manager Console

And copy this line into it:

PM> Install-Package MahApps.Metro

To install this package, you should have at least version 4.0 .NETframework. To change the version of framework of your project, double clisk on Settings in the Solution Explorer; a new window will appear and change the target framework to 4.0. If you chose, higher version of framework when creating the project, you can skip this step.


You should have this message in your package Manager console after executing the package installation.


Browse to where your Visual studio project is saved on your disc and open this sub-folder:

.\packages\MahApps.Metro.1.2.4.0\lib\net40

You should see these files:
Copy MahApps.Metro.dll and System.Windows.Interactivity.dllCreate a new folder in where your ps1 file and xaml is and rename it to “Assembly”. Paste all the *.dll in this new folder.

Edit your Ps1 file and paste the following lines at the top: 

Also, edit this line if you have renamed your xaml file:

In my case, I renamed it into “window.metro.xaml”.

In your XAML, replace:

With

Don't forget to do as well with the "window" closing tag.  

After the window tag paste these lines:

If you are unlucky, you’ll have this error J when you try to execute your scripts:

Could Not Load Assembly: Operation not supported (Exception from HRESULT: 0x80131515)

Don't worry! This is a normal issue. The dll file is just blocked, this sometimes happens if the file comes from another computer.

To solve the issue: For both files, you need to open the file properties > go to general Tab > Security > check unblock and apply.



If you launch it again you should have something like this:


It's beautiful don't you think? I suggest you to go take look at their website, to see what you can do with other controls.

You can download all files used in this post here.

That ends this little topic. If you have any question, you can leave a reply or send me an e-mail, I'll answer as soon as I can. Thanks for reading and see you in the next part. J

Share:

5 comments:

  1. I am trying the theme but getting error in Powershell console, can you advise?

    PS C:\Users\Kestrel\Documents\Visual Studio 2017\Projects\WpfApp2\WpfApp2> C:\Users\Kestrel\Documents\Visual Studio 2017\Projects\WpfApp2\WpfApp2\MainForm.ps1
    Exception calling "Load" with "1" argument(s): "There are multiple root elements. Line 15, position 9."
    At C:\Users\Kestrel\Documents\Visual Studio 2017\Projects\WpfApp2\WpfApp2\MainForm.ps1:11 char:5
    + $XamlLoader.Load($filename)
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : NotSpecified: (:) [], MethodInvocationException
    + FullyQualifiedErrorId : DotNetMethodException

    ReplyDelete
    Replies
    1. It looks like the code on the article might be different than one in the source code. Thanks to your sharing source code, I was able to copy/paste from it and no longer got the error.

      This part:






      Delete
    2. The Window.Resources tag snippet.

      Delete

Popular Posts

Join us on Facebook

STATS

Contact Form

Name

Email *

Message *