ASP.NET 2.0 行動開發入門：StyleSheet 控制項與樣式管理完整指南

行動裝置控制項樣式架構

ASP.NET 2.0 行動控制項 (System.Web.UI.MobileControls) 透過 StyleSheet 控制項 集中管理樣式，支援：

• 跨控制項共用樣式定義。
• 裝置篩選器：依裝置能力 (螢幕大小、支援 CSS、顏色深度) 套用不同樣式。
• 容器繼承：樣式套用至 Panel、Form 等容器，子控制項自動繼承。

StyleSheet 控制項特殊規則

• 唯一可置於容器外的行動控制項：必須直接放在行動網頁 (<mobile:Form>) 之下，不可放入 Panel/容器內。
• 每頁僅需一個 StyleSheet 控制項即可管理所有樣式。
• 設計時透過 樣式編輯器 視覺化建立/編輯樣式與裝置篩選器。

建立與套用樣式步驟

1. 拖曳 StyleSheet 至行動網頁

<mobile:Form id="Form1" runat="server">
    <mobile:StyleSheet id="StyleSheet1" runat="server" />
    <!-- 其他控制項 -->
</mobile:Form>

2. 開啟樣式編輯器

• 右鍵 StyleSheet → 樣式編輯器 (或屬性視窗 Style 屬性點選 ...)。
• 點選 新增 建立命名樣式 (如 TitleStyle, ErrorStyle, ItemStyle)。
• 設定屬性：ForeColor, BackColor, Font-Bold, Font-Size, Alignment, Wrap, CssClass 等。

3. 套用樣式至控制項

<mobile:Label id="lblTitle" runat="server" StyleReference="TitleStyle" Text="歡迎光臨" />
<mobile:Label id="lblError" runat="server" StyleReference="ErrorStyle" ForeColor="Red" />
<mobile:List id="lstItems" runat="server" ItemStyle-StyleReference="ItemStyle" />

• StyleReference 參考 StyleSheet 中的命名樣式。
• 控制項也可直接設定內嵌樣式屬性 (如 ForeColor="Blue")，優先權高於 StyleReference。

4. 容器層級樣式繼承

<mobile:Panel id="pnlContent" runat="server" StyleReference="ContainerStyle">
    <mobile:Label id="lbl1" runat="server" Text="項目一" />
    <mobile:Label id="lbl2" runat="server" Text="項目二" />
</mobile:Panel>

Panel 套用 ContainerStyle，內部 Label 自動繼承字體、顏色、對齊等屬性，除非個別覆寫。

裝置篩選器：一碼多端關鍵

在樣式編輯器中定義裝置篩選器，依裝置特性套用不同樣式值：

執行時 ASP.NET 依 Request.Browser 能力比對篩選器，動態選擇樣式定義。

完整範例：行動網頁樣式管理

<%@ Page Language="C#" Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<mobile:Form id="Form1" runat="server">
    <mobile:StyleSheet id="StyleSheet1" runat="server">
        <mobile:Style Name="TitleStyle" ForeColor="White" BackColor="Navy" Font-Bold="True" Font-Size="Large" Alignment="Center" />
        <mobile:Style Name="ItemStyle" ForeColor="Black" Font-Size="Medium" />
        <mobile:Style Name="ErrorStyle" ForeColor="Red" Font-Bold="True" />
        <!-- 裝置篩選器範例 -->
        <mobile:DeviceSpecific Name="TitleStyle">
            <mobile:Choice Filter="IsSmallScreen" Font-Size="Small" />
        </mobile:DeviceSpecific>
    </mobile:StyleSheet>

    <mobile:Label StyleReference="TitleStyle" Text="行動商城" />
    <mobile:List id="lstProducts" runat="server" ItemStyle-StyleReference="ItemStyle">
        <mobile:ListItem Text="筆記型電腦" />
        <mobile:ListItem Text="智慧型手機" />
    </mobile:List>
    <mobile:Label id="lblError" StyleReference="ErrorStyle" Text="庫存不足" Visible="False" />
</mobile:Form>

模擬器測試：OpenWave V7 與 Pocket PC

• OpenWave V7 模擬器：模擬功能型手機 (WAP 2.0, 小螢幕, 無 CSS)。下載自 developer.openwave.com。
• Visual Studio 2005 內建 Pocket PC 模擬器：模擬 Windows Mobile 裝置 (較大螢幕, 支援 CSS, 觸控)。
• 開發時務必雙模擬器測試，確認樣式繼承、裝置篩選器、版面配置在不同裝置正常運作。

從行動控制項遷移至現代響應式設計

ASP.NET 行動控制項已淘汰。現代方案：

• ASP.NET Core + Bootstrap / Tailwind CSS：單一 HTML/CSS/JS 回應式斷點。
• Progressive Web App (PWA)：離線支援、推播通知、安裝至主畫面。
• Xamarin / MAUI / Blazor Hybrid：原生行動應用共用 C# 邏輯。

結語

ASP.NET 2.0 StyleSheet 控制項提供行動網頁集中式樣式管理、裝置篩選器適配、容器繼承三大核心能力。雖然行動控制項已成歷史，但其樣式抽離、裝置適配、容器層級繼承的設計哲學，深刻影響現代響應式 CSS 框架與設計系統的架構思維。