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:
- Download and install the ExtensionsMadeEasy extension.
- Download the sample, unzip and open the solution (LSThemeWithControlTemplates.TestArea).
- 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).