The Microsoft Health CUI Team Blog is used to announce updates to the site, post information on future events,
and share additional information that may be of interest.
The CodePlex discussion forum can be used to discuss, and
ask questions about, the Microsoft Health CUI Design Guidance and Toolkit controls.
One of the features of the Silverlight Toolkit is a set of themes that can be applied to Silverlight controls. This post demonstrates how to use the ImplicitStyleManager to apply these themes to the MSCUI PatientBanner control.
Information on the Silverlight Toolkit and ImplicitStyleManager can be found on their CodePlex page.
Applying the themes in this post to the PatientBanner results in poor contrast between the text and the background.
This provides an unsatisfactory user experience and we recommend that you do not use them in an application. The themes are only for demonstration purposes.
We are providing sample code with this post, along with a description of the steps used to create the sample. The source zip can be downloaded here. When you open the solution, you may need to repair the references to Microsoft.Cui.Controls.dll and System.Windows.Controls.Theming.Toolkit.dll by browsing to where those assemblies are installed on your PC.
Microsoft.Cui.Controls.dll is shipped with MSCUI
System.Windows.Controls.Theming.Toolkit.dll is shipped with the Silverlight Toolkit
2) Add the following two references to the project
Create a User control that holds the PatientBanner:
3) Right click on the project, select Add > New item and select Silverlight User Control as the item template. Name the new user control as “PatientBannerPage.xaml”
4) Add a new XML namespace attribute to refer Microsoft.Cui.Controls:
6) Add a Patient Panner control to the page
Now we will create the Themes:
7) Create a project folder named “Themes”
8) Add a new Silverlight user control in this folder and call it "ShinyBlue.xaml"
9) Replace the contents of the ShinyBlue.xaml with the following:
<Setter Property="Background" Value="Blue" />
10) Delete the file ShinyBlue.xaml.cs
11) Repeat steps 2-4 and create three more themes, name them “ShinyRed”, “RainierOrange” & “RainierPurple”.
12) Change the background color in each theme to a separate color.
13) Once the themes are created, select all four themes and set “Build Action” to “Content”. This can be done by selecting the files, right-click and select properties.
Now that we have created a patient banner user control and four themes, let us assemble all the parts.
Open the Page.xaml and do the following:
14) Add a XML namespace reference to the local project
15) Delete the height and width attributes of the user control so that it occupies all the available space.
16) Add two rows to the LayoutRoot grid.
17) Add a stack panel named “BannerContainer” to the first row of grid and add a PatientBannerPage into the stack panel.
18) Add a ListBox control to second row and name it as “ThemeSelector” and set width and margin properties.
19) Add four ListBoxItems to ListBox control and change the content of ListBoxItems to match the Theme name (without .xaml)
20) Add a SelectionChanged event to ThemeSelector ListBox.
Now the Page.xaml should look like this:
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<StackPanel x:Name="BannerContainer" Grid.Row="0">
<ListBox x:Name="ThemeSelector" Grid.Row="1"
<ListBoxItem Content="ShinyBlue" />
<ListBoxItem Content="ShinyRed" />
<ListBoxItem Content="RainierOrange" />
<ListBoxItem Content="RainierPurple" />
Switch to code view for Page.xaml.cs
21) Add a namespace reference to System.Windows.Controls.Theming
22) Add the following code in the SelectionChanged event handler for ThemeSelector.
23) Run the solution and click the ListBox items to change the theme.