Condividi tramite


Stili

I controlli mobili ASP .NET rendono disponibili numerose proprietà di stile che è possibile utilizzare per personalizzare il rendering di un controllo. È possibile raggruppare gli stili per comodità in modo da garantire l'uniformità tra i diversi elementi di una pagina. Per accedere alle proprietà specifiche delle funzionalità dei controlli e dei dispositivi, utilizzare un controllo StyleSheet o un elemento <Style>.

Nota   Le proprietà di stile di un controllo sono puramente indicative. Se in un dispositivo di destinazione non è supportato uno stile particolare, il framework della pagina ASP .NET consente di ignorarlo o sostituirlo.

Ereditarietà dello stile

Se non si specificano esplicitamente le proprietà di stile del controllo, direttamente o indirettamente utilizzando un riferimento allo stile, il controllo eredita le proprietà di stile esistenti del contenitore. La maggior parte delle proprietà di stile viene impostata su un riferimento null (Nothing in Visual Basic) o sul valore enumerato NotSet. In questo modo è facile distinguere le proprietà di stile impostate in modo esplicito da quelle che non lo sono.

Dichiarazione di stili in modo esplicito

Esistono due modi distinti per dichiarare in modo esplicito uno stile per un controllo: impostare in modo esplicito uno stile e utilizzare la proprietà StyleReference per impostare uno stile.

Se si imposta in modo esplicito una proprietà di stile su un controllo figlio, tale stile viene utilizzato per il controllo figlio. Se, ad esempio, si crea un form a cui viene aggiunto un controllo Label, l'etichetta aggiunta al form ne diventa un controllo figlio. Quindi, quando la proprietà Font-Name dell'etichetta viene impostata su Arial, viene utilizzato il tipo di carattere Arial.

Un metodo alternativo che è possibile utilizzare per impostare in modo esplicito uno stile di un controllo figlio è impostare la proprietà StyleReference del controllo.

Impostazione di stili mediante il costrutto DeviceSpecific\Choice

È possibile impostare le proprietà di uno stile anche utilizzando il costrutto DeviceSpecific\Choice. Nell'esempio riportato di seguito viene mostrata un'etichetta impostata sullo stile corsivo per la maggior parte dei dispositivi e su quello grassetto quando viene utilizzata in un dispositivo per desktop.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" runat="server">

public bool IsDesktop(System.Web.Mobile.MobileCapabilities capabilities, String argument)
{
   return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet runat="server">
   <Style Name="ListStyle" Font-Italic="true">
      <DeviceSpecific>
        <Choice Filter="IsDesktop" Font-Italic="false" Font-Bold="true" />
      </DeviceSpecific>
   </Style>
</Mobile:StyleSheet>
<Mobile:Form runat=server>
   <Mobile:Label id="list1" runat=server StyleReference="ListStyle">Here is some text</Mobile:Label>
</Mobile:Form>

Algoritmo di ricerca per uno stile a cui si fa riferimento

Se si fa riferimento a uno stile utilizzando la proprietà StyleReference, il framework della pagina ASP .NET consente di eseguire un ricerca per individuarlo. L'algoritmo di ricerca funziona come indicato di seguito.

Nel caso di un controllo figlio che dispone di un elemento padre (un controllo contenitore padre), le regole per determinare le caratteristiche dell'elemento figlio sono quelle descritte nell'elenco riportato di seguito. Font-Size è lo stile di esempio utilizzato nell'algoritmo.

  1. Se la proprietà Font-Size è stata impostata direttamente in un controllo figlio, nel controllo viene utilizzata tale impostazione.
  2. Altrimenti se la proprietà StyleReference è stata impostata nello stile dell'elemento figlio (ad esempio, myChild.StyleReference = someStyle), nell'elemento figlio viene utilizzato il valore della proprietà Font-Size dell'elemento Style a cui si fa riferimento (ad esempio, someStyle). L'elemento figlio accede al valore nel seguente ordine:
    1. L'elemento figlio ricerca dapprima lo stile a cui si fa riferimento nel foglio di stile di MobilePage.
    2. Qualora non riesca a individuarlo, l'elemento figlio fa riferimento al foglio di stile predefinito del sistema.
    3. Se anche in questo caso non è possibile trovarlo, viene generato un errore di runtime.
  3. Se la proprietà StyleReference non è stata impostata, il controllo figlio ottiene il valore della proprietà Font-Size applicando in modo ricorsivo questa procedura al controllo padre.
  4. Se mediante la ricorsione viene raggiunto il livello più alto della gerarchia del controllo senza individuare un'impostazione esplicita della proprietà Font-Size, il controllo utilizza la dimensione predefinita del tipo di carattere.

Questo algoritmo tiene in considerazione i diversi stili a cui più controlli possono fare riferimento. Supporta l'ereditarietà dai controlli contenitori e si attiene alle previsioni logiche e di codifica standard.

Eccezioni all'algoritmo di ricerca

Le eccezioni all'algoritmo di ricerca sono due: il valore del colore di sfondo non viene ereditato dall'oggetto padre (si tratta di un'eccezione coerente con i fogli di stile CSS), così come i costrutti DeviceSpecific/Choice. Il costrutto DeviceSpecific/Choice viene in genere creato in modo esplicito per un controllo o un tipo di controllo specifico.

Fogli di stile

I controlli mobili ASP .NET rendono disponibile un foglio di stile predefinito in cui sono preimpostati alcuni stili. Per ulteriori informazioni, vedere la sezione relativa al foglio di stile predefinito dell'argomento Controllo StyleSheet. È possibile eseguire facilmente l'override dei valori di questi stili predefiniti per applicarne altri. Un unico foglio di stile può contenere un numero qualsiasi di elementi <Style>. Ogni elemento Style viene identificato da una proprietà Name univoca. È possibile impostare la proprietà StyleReference di un altro controllo sulla proprietà Name facendo riferimento così al relativo stile. È possibile utilizzare questa tecnica anche per fare in modo che uno stile faccia riferimento a un altro stile.

Fogli di stile esterni

È possibile definire un foglio di stile esterno da utilizzare per più controlli. È utile se si desidera utilizzare gli stessi stili in più pagine. Per creare un foglio di stile esterno, creare un controllo utente in un file ASCX in cui inserire un unico controllo StyleSheet con un insieme di stili. Per fare riferimento a questo file, inserire un controllo StyleSheet in una pagina mobile e impostarne la proprietà ReferencePath sull'URL relativo del controllo utente.

Implementazione di fogli di stile esterni

L'implementazione di un foglio di stile esterno comporta tre passaggi:

  1. Scrivere un controllo utente Microsoft ASP .NET in un file ASCX.
  2. Inserire un unico foglio di stile nel file ASCX aggiungendo gli elementi <Style> desiderati.
  3. Dichiarare un foglio di stile e impostarne la proprietà ReferencePath sul nome del file ASCX del controllo utente per ogni pagina mobile in cui si desidera utilizzare il foglio di stile esterno.

In fase di esecuzione tutti gli stili dichiarati nel foglio di stile esterno diventano disponibili per il framework di pagina ASP .NET in riferimento al foglio di stile della pagina mobile. Per ulteriori informazioni sui controlli utente, vedere la sezione UserControls.

Caratteristiche degli oggetti Style e della classe Style

Un oggetto Style non è un vero controllo e non eredita dalla classe base MobileControl. In una pagina può essere dichiarato solo all'interno di un controllo StyleSheet utilizzando l'elemento <Style>.

La classe base Style contiene le caratteristiche di stile comuni a tutti i controlli mobili. Le classi che ereditano dalla classe Style contengono altre caratteristiche di stile specifiche del controllo associato. Il controllo Flowchart, ad esempio, può disporre di una classe FlowchartStyle associata.

Ogni MobileControl include internamente una classe Style. Tuttavia, tale classe non è esposta mediante membri pubblici. Per ogni proprietà di stile, MobileControl dispone invece di una proprietà accessibile pubblicamente che fa riferimento internamente allo stile contenuto in modo privato. Pertanto un MobileControl espone direttamente proprietà di stile quali Font, ForeColor, e Wrapping.

Organizzazione degli stili

È possibile organizzare gli stili anche in un controllo StyleSheet. All'interno di un foglio di stile è possibile dichiarare un numero qualsiasi di oggetti stile. Gli stili vengono dichiarati nello stesso modo dei controlli, con l'eccezione che non è necessario un attributo runat=server. Per ulteriori informazioni, vedere la sintassi descritta nella documentazione dell'elemento <Style>.

Se la proprietà StyleReference viene impostata sul nome dello stile padre, uno stile può ereditare le proprie proprietà da un altro stile presente nel foglio di stile. L'ambito è la pagina mobile, ovvero è possibile fare riferimento solo agli stili del foglio di stile della stessa pagina mobile. Per consentire a un controllo di acquisire i propri stili da un oggetto stile del foglio di stile, impostare la proprietà StyleReference del relativo oggetto stile sul nome dello stile, dichiarando l'attributo StyleReference in una pagina Web Forms mobile di ASP .NET o impostando a livello di codice l'attributo StyleReference.

Vedere anche

Procedura dettagliata: implementazione di un nuovo stile | Creazione di controlli mobili personalizzati | Form | Pagine | Riquadri | Impaginazione | Progettazione e rendering dei contenuti per i controlli mobili | Guida per gli sviluppatori di applicazioni