This example illustrates how to change themes on the fly.
Implementation Details
You can apply a theme to DevExpress ASP.NET Web Forms controls in the following ways:
Apply a Theme with the ASP.NET Mechanism
Specify a page's Page.Theme
property in the Page.PreInit
event handler.
C#protected void Page_PreInit(object sender, EventArgs e) {
HttpCookie c = Request.Cookies["theme"];
Page.Theme = c == null ? "Aqua" : c.Value;
}
Apply a Theme with the DevExpress Mechanism
Set the ASPxWebControl.GlobalTheme property to the theme name in the Page.PreInit
event handler.
C#protected void Page_PreInit(object sender, EventArgs e) {
HttpCookie c = Request.Cookies["theme"];
ASPxWebControl.GlobalTheme = c == null ? "Aqua" : c.Value;
}
Files to Review
- Default2.aspx (VB: Default2.aspx)
- Default2.aspx.cs (VB: Default2.aspx.vb)
- Default3.aspx (VB: Default3.aspx)
- Default3.aspx.cs (VB: Default3.aspx.vb)
Documentation
More Examples
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="DevExpress.Web.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to change a page's theme dynamically</title>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="dataSource"
KeyFieldName="CategoryID">
<Columns>
<dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<br />
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px">
</dx:ASPxTextBox>
<dx:ASPxButton ID="button" runat="server" Text="Button">
</dx:ASPxButton>
</td>
<td valign="top">
<dx:ASPxRadioButtonList ID="rbList" runat="server" AutoPostBack="True" SelectedIndex="0">
<ClientSideEvents SelectedIndexChanged="function(s, e) { ASPxClientUtils.SetCookie('theme', s.GetValue());}" />
<Items>
<dx:ListEditItem Selected="True" Text="Aqua" Value="Aqua" />
<dx:ListEditItem Text="DevEx" Value="DevEx" />
<dx:ListEditItem Text="SoftOrange" Value="SoftOrange" />
<dx:ListEditItem Text="Youthful" Value="Youthful" />
</Items>
</dx:ASPxRadioButtonList>
<asp:SqlDataSource ID="dataSource" runat="server" ConnectionString="Data Source=(local);Initial Catalog=Northwind;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:SqlDataSource>
</td>
</tr>
</table>
</form>
</body>
</html>
C#using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default2 : System.Web.UI.Page {
protected void Page_PreInit(object sender, EventArgs e) {
HttpCookie c = Request.Cookies["theme"];
Page.Theme = c == null ? "Aqua" : c.Value;
}
protected void Page_Load(object sender, EventArgs e) {
HttpCookie c = Request.Cookies["theme"];
if(!IsPostBack && (c != null))
rbList.Value = c.Value;
}
}
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<%@ Register Assembly="DevExpress.Web.v13.2, Version=13.2.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to change a page's theme dynamically</title>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="dataSource"
KeyFieldName="CategoryID">
<Columns>
<dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<br />
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px">
</dx:ASPxTextBox>
<dx:ASPxButton ID="button" runat="server" Text="Button">
</dx:ASPxButton>
</td>
<td valign="top">
<dx:ASPxRadioButtonList ID="rbList" runat="server" AutoPostBack="True" SelectedIndex="0">
<ClientSideEvents SelectedIndexChanged="function(s, e) { ASPxClientUtils.SetCookie('theme', s.GetValue());}" />
<Items>
<dx:ListEditItem Selected="True" Text="Aqua" Value="Aqua" />
<dx:ListEditItem Text="DevEx" Value="DevEx" />
<dx:ListEditItem Text="SoftOrange" Value="SoftOrange" />
<dx:ListEditItem Text="Youthful" Value="Youthful" />
</Items>
</dx:ASPxRadioButtonList>
<asp:SqlDataSource ID="dataSource" runat="server" ConnectionString="Data Source=(local);Initial Catalog=Northwind;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:SqlDataSource>
</td>
</tr>
</table>
</form>
</body>
</html>
C#using DevExpress.Web;
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default3 : System.Web.UI.Page {
protected void Page_PreInit(object sender, EventArgs e) {
HttpCookie c = Request.Cookies["theme"];
ASPxWebControl.GlobalTheme = c == null ? "Aqua" : c.Value;
}
protected void Page_Load(object sender, EventArgs e) {
HttpCookie c = Request.Cookies["theme"];
if(!IsPostBack && (c != null))
rbList.Value = c.Value;
}
}