|
RadControls version
|
RadControls for ASP.NET AJAX Q1 2011+ |
| .NET version |
4.0, 3.5 |
| Visual Studio version |
2010 |
| programming language |
C# |
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
A brief intro to loading skins from external assemblies.
With the new Q1 2011 release, developers will be able to load skins from an external assembly. For demonstration purposes, we will modify RadWindow's Black skin and set it's loading background to red. Next we will embed the skin into an external assembly and we will use the new skin with the RadWindow control. The steps below will show how to accomplish this.
1) Create a new class project and add a reference to the Telerik.Web.UI assembly
2) Drop all skin related files for your control(s) in the project and mark them as embedded resources.
3) Modify the skin files - rename them, change the CSS properties, etc. The main point here is that you will also need to rename the addresses of the images in these files. Because of the specifics of the approach explained below, it is convenient to use the skin files from the RadControls for ASP.NET AJAX source code.
Here lies the first tricky part – the webresource links in our css files are of the type
Note the name of the resource “
Telerik.Web.UI.Skins.Black.Common.loading.gif”.
The name is generated by using the assembly name (Telerik.Web.UI) + folder name (Skins/Black/Common/) + file name (loading.gif).
If we want to prevent replacing all resource names in the skin CSS, then we must name our class project “Telerik.Web.UI.Skins” and put all resources in its root folder. This way the end result will be the same (Telerik.Web.UI.Skins + Simple/Common/ + loading.gif). To extend the demonstration, we will rename the Black skin to BlackAndRed - this means that you will need to rename all instances of Black in the CSS files to BlackAndRed. More information on how to create a custom skin is available in the Controlling Visual Appearance section in the documentation.
4) Create a class (must be named the same as the control you will skin) and add
EmbeddedSkin attributes to the class definition to tell which skins will be loaded from it. For example:
The above class defines a base CSS for the Window control and a skin “BlackAndRed” for the Window control as well. Note the third parameter of the attribute – it is very important to set it so in the end our skin registrar knows which assembly is going to hold the resources
.
5) Add WebResource attributes for all the resources from step 3 in the new assembly, e.g.:
// Add WebResource attributes for all the resources in the new assembly
//base stylesheet
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Window.css", "text/css", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogAlert.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogConfirm.gif", "image/gif")]
// Black Skin
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.BlackAndRed.css", "text/css", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.BlackAndRed.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.CommandButtonSprites.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowHorizontalSprites.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowVerticalSprites.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowHorizontalSprites.gif", "image/png")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowVerticalSprites.gif", "image/png")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.Icon.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Common.loading.gif", "image/gif")]
[assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Common.loading_small.gif", "image/gif")]
note that you have the resource name here as well – if using a custom name for the skins assembly, the resource must be renamed appropriately
6) Compile our new assembly and put it in the
bin folder next to
Telerik.Web.UI or in the
GAC.
7) In the
Web.config file for the web application, add a new
appSettings entry with the name of the assembly, so we know where to look for the skins:
(obviously, if skins assembly is in the GAC, you must use its full name)
After the above steps, you can just use the control with the custom skin without setting any additional properties:
The above approach is fully compatible with
RadStyleSheetManager – the custom skins will be combined along with the rest of the CSS.
And a final note – it is possible to have one of the default skins in a custom assembly – for example you customize the Hay skin and put it in a custom class project by following the steps above. Once you set the Telerik.Web.SkinsAssembly setting in the web.config, the Hay skin will no longer be loaded from Telerik.Web.UI even if it is present there as well.