Tematy (Skiny) w aplikacji ASP.NET WebForms

Odwiedzając stronę internetową czy też portal w pierwszej kolejności zwracamy na jej wygląd. Każdy chciałby mieć możliwość oglądania czegoś więcej niż dwukolorową stronę. Najlepiej jeszcze gdy użytkownik ma możliwość wyboru schematów kolorów dla strony. oferując kilka różnych skinów strony użytkownik ma możliwość dostosowania kolorystyki do swoich upodobań.

Najprostszym sposobem umożliwiającym zmianę kolorystyki strony jest zastosowanie skinów. Skinów możemy zdefiniować dowolną ilość a odnosimy się do nich przez nazwę. Możemy np. zdefiniować np skin blue oraz red i w zależności od wybranego skinu przez użytkownika załadować odpowiedni.

Przystąpmy więc do implementacji naszego pomysłu:
Stworzymy stronę na której użytkownik za pomocą kontrolki DropDownList może wybrać skin i zaaplikować go.

Tworzenie skinów jest bardzo proste. Najpierw musimy stworzyć specjalny folder App_Themes:

W taki sam sposób dodajemy kolejne tematy. Ja dodałem motyw czerwony i niebieski:

Następnie wypełniamy oba pliki poniższym kodem:
Red:

Code:

<asp:TextBox runat="server" BackColor="Red" BorderColor="DarkRed" Font-Bold="true" ForeColor="Yellow" />

Blue:

Code:

<asp:TextBox runat="server" BackColor="Blue" BorderColor="BlueViolet" Font-Bold="true" ForeColor="Yellow" />

Kod więc ma za zadania zmianę właściwości TextBox-a. Teraz dodatkowo udostępnimy taką możliwość poprzez wybranie z listy odpowiedniego skina. Dodajemy na formatkę DropDownList:

Code:

<asp:DropDownList ID="ddlSkinList" runat="server" AutoPostBack="True">
                    <asp:ListItem Text="Blue" Value="Blue" />
                    <asp:ListItem Text="Red" Value="Red" />
                </asp:DropDownList>

Skin można załadować tylko w momencie wywołania metody Page_PreInit w późniejszych zdarzeniach nie jest już to możliwe. Tak więc tworzymy kod dla tej metody:

Code:

protected void Page_PreInit(object sender, EventArgs e)
        {
            if (Page.Request.Form.Count > 0)
            {
                Page.Theme = Page.Request.Form[5].ToString();
            }
        }

Teraz możemy obserwować efekt:

W przypadku wybrania drugiego skina otrzymamy wynik:

Dzięki wybraniu opcji AutoPostBack zaraz po wybraniu stylu zostanie przeładowana strona i załadowany będzie nowy skin.

Oczywiście zaprezentowany tutaj przykład jest bardzo prosty. Stylizacja przydaje się zwłaszcza w przypadku bardziej zaawansowanych kontrolek - jak np kalendarz, GridView itp.

Mechanizm jest na tyle prosty, że warto poeksperymentować z nim.