Welcome

The Microsoft Health Common User Interface (CUI) provides User Interface Design Guidance and Toolkit controls that address a wide range of patient safety concerns for healthcare organizations worldwide, enabling a new generation of safer, more usable and compelling health applications to be quickly and easily created.
- Read more about the project in the Introduction
- View our development schedule in the Roadmap section
- See scenario-based technology demonstrators and testimonials from clinical application and healthcare providers in the Showcase
- Visit our Team Blog for news and announcements
- Access our CodePlex forum to read related discussions
LATEST NEWS

Our Partners Talk
Visit our Showcase to hear how Bluewire Technologies, in4tek, Map of Medicine, and The Learning Clinic are using our design guidance and controls.

Latest Design Guidance
Get our latest design guidance on Recording Adverse Drug Reaction Risks, Medications List, and Filtering, Sorting and Grouping.

New SingleConceptMatching Control
See how the SingleConceptMatching control searches and encodes entered text as SNOMED Clinical Terms^® codes. The featured implementation also demonstrates contexts in which the control might appear, and types of information which is output.

Patient Journey Demonstrator new release
Explore exciting new features in our latest release including SNOMED Clinical Terms^®, Clinical Noting, video inking and more. SNOMED Clinical Terms^® (SNOMED CT^®) is provided by Health Language, Inc and used by permission of the International Health Terminology Standards Development Organisation (IHTSDO). All rights reserved.

LATEST BLOG

Theming Microsoft CUI Controls with the ImplicitStyleManager
04-Jun-2009 10:00 by Admin

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

1) To get started, in Visual Studio create a new Silverlight Application called “PatientBannerISM” and select the option “Automatically generate a test page to host Silverlight at build time”.

2) Add the following two references to the project

Microsoft.Cui.Controls.dll
System.Windows.Controls.Theming.Toolkit.dll

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:

xmlns:cuicontrols=
"clr-namespace:Microsoft.Cui.Controls;assembly=Microsoft.Cui.Controls"

5) Remove the height and width attributes of user control so that the control will occupy the full area available

6) Add a Patient Panner control to the page

<cuicontrols:PatientBanner />

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:

</ResourceDictionary>

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

xmlns:local="clr-namespace:PatientBannerISM"

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:

Switch to code view for Page.xaml.cs

21) Add a namespace reference to System.Windows.Controls.Theming

using System.Windows.Controls.Theming;

22) Add the following code in the SelectionChanged event handler for ThemeSelector.

if (ThemeSelector.SelectedItem != null)
{
    PatientBannerPage newBanner = new PatientBannerPage();
    Uri themeUri = new Uri("Themes/" + (ThemeSelector.SelectedItem as
                   ListBoxItem).Content.ToString() + ".xaml", UriKind.Relative);
ImplicitStyleManager.SetResourceDictionaryUri(BannerContainer, themeUri);
    ImplicitStyleManager.SetApplyMode(BannerContainer, ImplicitStylesApplyMode.Auto);
    ImplicitStyleManager.Apply(BannerContainer);
    BannerContainer.Children.Clear();
    BannerContainer.Children.Add(newBanner);

}

23) Run the solution and click the ListBox items to change the theme.

Click here to see the full post

GET INVOLVED

Work with us on the future development of the Microsoft Health CUI:

If you are a user interface designer, application developer or patient safety expert, please access the CodePlex discussion forum
If you represent an organization that is interested in adopting the Microsoft Health CUI for use in your healthcare applications, contact us at mscui@microsoft.com to discuss collaboration opportunities

Welcome

GET INVOLVED