Introduction
This article demonstrate how we can create our own themes in silverlight.
We can create our own custom themes in silverlight application.
Step 1: Create one SilverlightClassLibrary
We have OwnTheme folder in our application, in that folder we have two
resourcedirectory files,
First AliceBlueTheme.xaml and SilverTheme.xaml.
AliceBlueTheme :
<Style
TargetType="Button">
<Setter
Property="Background"
Value="AliceBlue"/>
<Setter
Property="BorderThickness"
Value="1"/>
<Setter
Property="Foreground"
Value="Black"/>
<Setter
Property="BorderBrush"
Value="LightBlue"/>
</Style>
<Style
TargetType="Border">
<Setter
Property="Background"
Value="AliceBlue"/>
<Setter
Property="BorderBrush"
Value="LightBlue"/>
<Setter
Property="BorderThickness"
Value="1"/>
</Style>
<Style
TargetType="CheckBox">
<Setter
Property="Background"
Value="AliceBlue"/>
<Setter
Property="BorderBrush"
Value="AliceBlue"/>
<Setter
Property="Foreground"
Value="Black"/>
</Style>
<Style
TargetType="StackPanel">
<Setter
Property="Orientation"
Value="Vertical"/>
<Setter
Property="Background"
Value="AliceBlue"/>
</Style>
<Style
TargetType="HyperlinkButton">
<Setter
Property="Background"
Value="AliceBlue"/>
<Setter
Property="BorderBrush"
Value="AliceBlue"/>
<Setter
Property="BorderThickness"
Value="1"/>
<Setter
Property="Foreground"
Value="Black"/>
</Style>
<Style
TargetType="ComboBox">
<Setter
Property="Background"
Value="AliceBlue"/>
<Setter
Property="BorderThickness"
Value="1"/>
<Setter
Property="BorderBrush"
Value="AliceBlue"/>
</Style>
<Style
TargetType="ComboBoxItem">
<Setter
Property="Background"
Value="AliceBlue"/>
<Setter
Property="BorderBrush"
Value="AliceBlue"/>
<Setter
Property="BorderThickness"
Value="0.5"/>
<Setter
Property="Foreground"
Value="Black"/>
</Style>
SilverTheme :
<Style
TargetType="Button">
<Setter
Property="Background"
Value="Silver"/>
<Setter
Property="BorderThickness"
Value="1"/>
<Setter
Property="Foreground"
Value="Black"/>
<Setter
Property="BorderBrush"
Value="LightGray"/>
</Style>
<Style
TargetType="Border">
<Setter
Property="Background"
Value="Silver"/>
<Setter
Property="BorderBrush"
Value="Black"/>
<Setter
Property="BorderThickness"
Value="1"/>
</Style>
<Style
TargetType="CheckBox">
<Setter
Property="Background"
Value="Silver"/>
<Setter
Property="BorderBrush"
Value="Silver"/>
<Setter
Property="Foreground"
Value="Black"/>
</Style>
<Style
TargetType="StackPanel">
<Setter
Property="Orientation"
Value="Vertical"/>
<Setter
Property="Background"
Value="Silver"/>
</Style>
<Style
TargetType="HyperlinkButton">
<Setter
Property="Background"
Value="Silver"/>
<Setter
Property="BorderBrush"
Value="Silver"/>
<Setter
Property="BorderThickness"
Value="1"/>
<Setter
Property="Foreground"
Value="Black"/>
</Style>
<Style
TargetType="ComboBox">
<Setter
Property="Background"
Value="Silver"/>
<Setter
Property="BorderThickness"
Value="1"/>
<Setter
Property="BorderBrush"
Value="Silver"/>
</Style>
<Style
TargetType="ComboBoxItem">
<Setter
Property="Background"
Value="Silver"/>
<Setter
Property="BorderBrush"
Value="Silver"/>
<Setter
Property="BorderThickness"
Value="0.5"/>
<Setter
Property="Foreground"
Value="Black"/>
</Style>
Step 2:
Now we have two other resourcedirectory file where we keep the path of our
crated themes
(AliceTheme and SilverTheme) as below,
Theme.Xaml :
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/CustomThemesinSilverlight;component/OwnThemes/AliceBlueTheme.xaml"/>
</ResourceDictionary.MergedDictionaries>
Theme1.xaml :
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/CustomThemesinSilverlight;component/OwnThemes/SilverThemes.xaml"/>
</ResourceDictionary.MergedDictionaries>
Step 3:
We have two classes in our silverlight application like,Silverthemeclass.cs and
Aliceblueclass.cs.
Silverthemeclass.cs :
public
class
SilverThemeClass:Theme
{
private static
Uri ThemeResourceUri =
new Uri("/CustomThemesinSilverlight;component/Theme1.xaml",
UriKind.Relative);
public SilverThemeClass()
: base(ThemeResourceUri)
{
}
public static
bool GetIsApplicationTheme(Application
app)
{
return GetApplicationThemeUri(app)
== ThemeResourceUri;
}
public static
void SetIsApplicationTheme(Application
app, bool value)
{
SetApplicationThemeUri(app, ThemeResourceUri);
}
AliceBlueclass.cs :
public
class
AliceThemesClass:Theme
{
private static
Uri ThemeResourceUri =
new Uri("/CustomThemesinSilverlight;component/Themes.xaml",
UriKind.Relative);
public AliceThemesClass()
: base(ThemeResourceUri)
{
}
public static
bool GetIsApplicationTheme(Application
app)
{
return GetApplicationThemeUri(app)
== ThemeResourceUri;
}
public static
void SetIsApplicationTheme(Application
app, bool value)
{
SetApplicationThemeUri(app, ThemeResourceUri);
}
}
Step 4: Now our silverligthclasslibrary is ready,Bulid the application
and add reference in silverlight application.
Here we have class named themchanedcommand.cs where we get themes.
public
class
ThemeChangeCommand : ICommand
{
#region
ICommand Members
public bool
CanExecute(object parameter)
{
return true;
}
public event
EventHandler CanExecuteChanged;
public void
Execute(object parameter)
{
Theme themeContainer = (Theme)((FrameworkElement)Application.Current.RootVisual).FindName("ThemeContainer");
string themeName = parameter
as string;
if (themeName == null)
{
themeContainer.ThemeUri = null;
}
else
{
themeContainer.ThemeUri = new
Uri("/CustomThemesinSilverlight;component/"
+ themeName , UriKind.RelativeOrAbsolute);
}
if (CanExecuteChanged !=
null)
CanExecuteChanged(this,
new EventArgs());
}
#endregion
}
Step 5: Use created themes in MainPage.xaml .
<Grid
x:Name="LayoutRoot"
>
<Grid.Resources>
<local:ThemeChangeCommand
x:Key="themeCommand"
/>
</Grid.Resources>
<toolkit:Theme
x:Name="ThemeContainer"
>
<Grid
Height="400"
HorizontalAlignment="Left"
Name="grid1"
VerticalAlignment="Top"
Width="800"
Grid.Row="0"
>
<Grid.RowDefinitions>
<RowDefinition
Height="36"
/>
<RowDefinition
Height="212*"
/>
<RowDefinition
Height="*"
/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="284"
/>
<ColumnDefinition
Width="*"
/>
</Grid.ColumnDefinitions>
<Border
Grid.Row="1"
Height="200"
HorizontalAlignment="Left"
Name="border1"
VerticalAlignment="Top"
Width="280">
<CheckBox
Content="ThemesInSilverlight"
Height="16"
Name="checkBox1"
Width="130"
VerticalAlignment="Top"
HorizontalAlignment="Left"/>
</Border>
<Button
Height="30"
Width="166"
Content="BlueTheme"
VerticalAlignment="Center"
x:Name="BlueButton"
Command="{StaticResource
themeCommand}"
CommandParameter="Themes.xaml"
Margin="20,0"
Click="BlueButton_Click"></Button>
<Button
Height="30"
Width="166"
HorizontalAlignment="Left"
Content="SilverTheme"
VerticalAlignment="Center"
Grid.Column="1"
x:Name="SilverBtn"
Command="{StaticResource
themeCommand}"
CommandParameter="Theme1.xaml"
Margin="14,0"></Button>
<StackPanel
Grid.Column="1"
Grid.Row="1"
Height="242"
HorizontalAlignment="Left"
Name="stackPanel1"
VerticalAlignment="Top"
Width="425"
>
<HyperlinkButton
Height="20"
Width="100"
Content="Select
Themes"></HyperlinkButton>
<Border
Height="53"
x:Name="MyBorder"
BorderThickness="5"></Border>
<ProgressBar
Height="80"
Name="progressBar1"
Width="80"
Margin="0,50,0,0"
/>
</StackPanel>
</Grid>
</toolkit:Theme>
</Grid>
Output look like as below,
Summary : We can create custom themes in silverlight.