|
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
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
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cuicontrols=
"clr-namespace:Microsoft.Cui.Controls;assembly=Microsoft.Cui.Controls">
<Style TargetType="cuicontrols:PatientBanner">
<Setter Property="Background" Value="Blue" />
</Style>
</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:
|
<UserControl x:Class="PatientBannerISM.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PatientBannerISM">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel x:Name="BannerContainer" Grid.Row="0">
<local:PatientBannerPage />
</StackPanel>
<ListBox x:Name="ThemeSelector" Grid.Row="1"
SelectionChanged="ThemeSelector_SelectionChanged"
Width="150" Margin="10">
<ListBoxItem Content="ShinyBlue" />
<ListBoxItem Content="ShinyRed" />
<ListBoxItem Content="RainierOrange" />
<ListBoxItem Content="RainierPurple" />
</ListBox>
</Grid>
</UserControl>
|
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.