Custom Themes in Silverlight

Priya Linge
14y
14.9k
0
0

Article

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>

    <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>

    <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>
</toolkit:Theme>

</Grid>

Output look like as below,

Summary : We can create custom themes in silverlight.