This is the second installment of the Themes article. You can view the first article at "A Look at Themes". In this article I will explain that how you can override the control's settings over the theme's settings. I will also explain the purpose of the SkinID and how SkinID can be used to assign controls different themes related to the same control.
Introduction:
This is the second installment of the Themes article. You can view the first article at "A Look at Themes". In this article I will explain that how you can override the control's settings over the theme's settings. I will also explain the purpose of the SkinID and how SkinID can be used to assign controls different themes related to the same control.
Overriding the theme of the Page:
When we define the theme then the properties of the control on the page are displayed according to the theme. This means that if you have define certain properties for the control they will be overridden by the properties defined in the theme. Consider the following code:
| <%@
Page
Language="C#"
AutoEventWireup="true"
Theme="Red"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%> <form id="form1" runat="server"> <div> This should be red: <asp:TextBox ID="TextBox1" runat="server" BackColor="Red"></asp:TextBox><br /> <br /> This should be red: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> <br /> This should be blue: <asp:TextBox ID="TextBox3" BackColor="Blue" runat="server"></asp:TextBox> </div> </form>
|
If you look carefully you will notice that the last TextBox, TextBox3 defines its own BackColor but when you run this page you will see that the TextBox3 color does not take any effect and the color defined in the theme will be assigned to the TextBox BackColor.
There are couple of ways that you can override this settings. First you can use StylesheetTheme attribute instead of the Theme attribute. Using the StylesheetTheme attribute allows you to mix the properties define in the theme with the control's individual properties. This means that if you have defined some control property which coincide with the property defined in themes then control's properties will win.
The second way is to simply set the "EnablingTheming" = false. This will disable the themes on that particular control. One other way is to define the SkinID for the control.
Using the SkinID to distinguish between Skins:
You can define multiple entries in the Skin file for the same control using different SkinID's. If you want certain controls to behave as a default then there is no need to define the SkinID for those controls. Check out the code below:
|
<%@
Page
Language="C#"
AutoEventWireup="true"
Theme="Red"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%> <form id="form1" runat="server"> <div> This should be red: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <br /> This should be red: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> <br /> This should be blue: <asp:TextBox ID="TextBox3" SkinID="Blue" runat="server"></asp:TextBox> </div> </form>
|
Now let's take a look at the Skin file:
| <asp:TextBox
SkinID="Red"
runat="server"
BackColor="Red"
Font-Bold="True"></asp:TextBox> <asp:TextBox SkinID="Blue" runat="server" BackColor="Blue"></asp:TextBox> <asp:TextBox runat="server" BackColor="Green"> </asp:TextBox> |
As, you can see in the Skin file above that I have multiple entries for the TextBox control. Two of them define the SkinID and the third one does not. This means that in the page if the control does not uses the SkinID then the default BackColor will be assigned to it which in this case is "Green".
SkinID is not limited to a single control but you can assign the same SkinID to different types of controls. Like you can name SkinID "OrangeControls" in which all control colors is orange.
I hope you liked the article! Happy coding!
| If you are one of the
thousands that visit GridViewGuy for your .NET articles and resources, you
might be interested in making a donation. Extra cash helps pay for the
hosting services and speed things up
around here, and makes this website possible.
Once, again thank you very much and remember its because of you FINE people that this website is up and running. |
| Export Button is a custom control that let's you export your DataGrid or TextBox data to several different formats. The control is extremely easy to use and also exposes design time features. In this article I will discuss some of the features of the Export Button and how it benefits the developer. |