Adding control styles to your LightSwitch theme extension (Part4: adding images to the shell).

Time for some funky stuff…

adam said 1 week ago:

Jan that would be fantastic if you could, and a first, as I’ve spend a while searching and nobody else has done it from what I can find. I’ve been putting off getting my hands dirty with the real code.

Images on the menus, and if you could get the images to appear on the ‘tabs’ per screen as well, even better, would finish off the look of even a standard shell.

Alright then, challenge accepted Adam!

As the screenshot shows, I managed to implement in the navigation menu and on the tabs. It only took me a couple of hours to do that, but I wanted to use the ExtensionsMadeEasy extension before posting the sample, so I must apologize it took me a week before publishing it…  I must also apologize for the awful namings, I’m actually working on a theme and this is my TestArea

To run the sample:

  1. Download and install the ExtensionsMadeEasy extension.
  2. Download the sample, unzip and open the solution (LSThemeWithControlTemplates.TestArea).
  3. Have fun!

What’s going on?

  • (1) Because I’m using the ExtensionsMadeEasy extension, I use MEF to export my theme to the LightSwitch framework.  The theme has two parts: an actual theme extension (2) and an IThemeExtension (3).
  • The IThemeExtension implementation (3. ThemeExtensionWithControlTemplates.cs) has two default styles (3. ThemeExtensionWithControlTemplates.xaml contains a style for scrollbars, and, totally unused: 4. buttons.xaml one for buttons).
  • It also defines a new default style for the ActiveScreenContentTemplate, a control that is inside the LightSwitch default shell (4. Tabs.xaml) and some keyed styles for the Navigation Items and Groups (4. NavigationItems.xaml).
  • Inside the Tabs and Navigation Items & Groups control templates, I use a simple value converter (5. NavigationItemToIconConverter.cs), that is bound to the datacontext of those controls.
  • At this point, I encountered a small problem.  The theme does not know what screens are inside the LightSwitch applications that you will use the theme on, so it’s quite impossible to include the correct images (or icons) in the theme.  This means that our value converter (5) will need some help, an IResourceProvider (6) that can provide the correct resources to show for each navigation item, group and tab.
  • The implentation of this IResourceProvider (6) can be found inside the LightSwitch project: the NavigationIconsProvider (7), and is exported to our value converter (5) once again using MEF.
  • What this provider (7) actually does is look in the NavigationIcons folder (8) for a PNG file that has the same name as the one our ValueConverter needs: the screen name, the navigation item text, …
  • So in summary: the icons (8) are exported (7, 6) to a ValueConverter (5), that is used in the control templates (4) of a theme (3, 2), which is loaded into the LightSwitch application using the ExtensionsMadeEasy extension (1).
The styles are partially based on articles by other people, credits are in my previous blog posts, but another big thank you is in place here!
This miniguide probably contains more text then the actual code files do…
So don’t be afraid to let me know what you think in the comment section below, or on Twitter.
Advertisements

14 thoughts on “Adding control styles to your LightSwitch theme extension (Part4: adding images to the shell).

  1. Thanks you sooo much for doing this, images make things look much better. I am snowed under with other work at the moment but the first chance I get I will be using this and letting you know how it goes. Good work by the way, and excellent explanation here.

  2. Jan, by using the Extension, I’m able to add the ‘brush-color’ XAML file and make changes as I need. (Hours of time saving 🙂 )

    Now I’m planning to change my controls’ look as you described (in several posts). But if I’m right, none of your samples does this inside from LightSwitch application. They required a separate ‘Project’. In this post it is “ThemeWithControlTemplates.Client”.

    Is it possible to add Resource Directory XMAL files (& related images) for each control, inside my LS application with ur extension?

    I’m lazy, tired, sleepy.. so didn’t wanna try myself and thought “ask the expert”. 🙂

    • Hey Bala!

      Lazy is good! That’s why we love LightSwitch in the first place isn’t it? 😀
      The resource files for your themes (and the IThemeExtension implementations) can be inside any silverlight class library. This includes the .Client project of your LightSwitch application, so sure! 🙂
      Can’t wait to see some of your results!

  3. Even super lazy…., you have mentioned few times already that you are working on a ‘complete control style’ theme. Have you done that? No hassle. 😉

    • Ouch Bala,
      I worked on it last weekend, but it is nowhere near completed. 😦 More so, it doesn’t even compile at the moment 😦
      I do know I should push myself a bit to finish this project, considering how much documentation the LightSwitch team has written so far, this would be a real asset for our community…
      If you have any specific questions though, I’d be happy to try and help!

      Jan

      • Thx Jan. At the moment, all I did was

        1. Created a LS project
        2. Created a folder called “Themes” and a ‘Brush-Color’ theme resource file
        3. Exported it to ExtensionMadeEasy.—->

        public class MyTheme : EasyThemeExporter, ITheme

        Just three steps and WORKS GREAT!
        ========

        But struggling to follow this post with my above approach. I would appreciate, if you can throw a sample of the this post’s example in one LS project.

        Or at least just one or two control resource files (that doesn’t have to be implemented though). But by that time I’ll keep my head on the wall.. trying to figure it out myself and keep u posted.

  4. Thx a ton Jan. U my man.

    I was abt to cry u see….!! Since this morning.. I’m all over ur blog, comparing ur sample with Metro Theme sample.. and… this and.. that… and… and..

    Gave up. 🙂 🙂

    • Bala,

      try the sample http://www.4shared.com/file/u6I7uyH5/LSThemeWithControlTemplatesTes.html (it’s the same as the sample I posted on MSDN, but refactored it all to one LS project).
      Btw, in your project, you might have an issue with the URI? Good way to check is if(System.Windows.Application.GetResourceStream(myThemeURI) != null). Added that in the ThemeWithControlTemplates.cs class as an additional check…
      Also, removed the exports from that class, they aren’t really needed (the EasyThemeExporter takes care of exporting already).

      Damn, just noticed I left the button ribbon background on red :-s did that to test if it loaded…

      Btw, if you resize the application a bit, you can see the scrollbar from my first post, a bit redesigned. What do you think?

      Stay tuned

      Jan

      • Awesome!! 🙂 Works perfect Jan. Just don’t understand why if I move the NavigationIcons folder to Presentation/Themes folder. I changed the path in ConventionBasedResourceProvider class and debug shows the path value is generated properly.

        Is there any special reason? Not a big deal. Just curious. Will send you some ss, once I done my design (God knows when :)).

  5. I take my prev comment back. No idea why it didn’t work b4 when I moved the image folder.

    All is well now. Digging process starts.

  6. Hi Jan
    Thnx for a great source of knowledge!

    Perhaps you can provide some insight here.

    I am experimenting with IThemeExtension control styles, and using x:Key=”NavigationHeaderButtonStyle” I am able to manipulate my nav-group headers. I am also able to manipulate them depending on the value of {Binding IsExpanded} – however it seems the binding does not “listen” for changes… It works at first load where the top group is expanded and the rest are collapsed – but nothing happens when either of the groups are collapsed/expanded.

    Do I need to (can I) implement a dependency property somewhere? I noticed the ribbon has one for “IsCompressed”, but couldn’t find one anywhere related to the navigation groups. Or should I bind to a completely different property?

    Hope it makes sense… and any help appreciated!
    /R

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s