Stili

Articolo
09/12/2008

Aggiornamento: novembre 2007

Per ogni controllo mobile ASP.NET sono disponibili proprietà di stile che possono essere utilizzate per personalizzare il rendering del controllo. È possibile raggruppare gli stili per comodità in modo da applicarli in modo uniforme 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:
Non è garantito il supporto delle impostazioni delle proprietà di stile. Se un dispositivo di destinazione non supporta uno stile particolare, ASP.NET lo ignorerà o lo sostituirà con uno stile diverso.

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 del contenitore. Per la maggior parte delle proprietà di stile viene utilizzata come impostazione predefinita un valore null o un 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

Per dichiarare in modo esplicito uno stile di un controllo è possibile procedere in due modi. Un modo consiste nell'impostare una proprietà di stile. Si supponga ad esempio di creare un form e di aggiungervi un controllo Label. L'etichetta diventa un controllo figlio del form. Quando la proprietà Font-Name dell'etichetta viene impostata su "Arial", viene utilizzato il tipo di carattere Arial.

L'altro modo per impostare uno stile in modo esplicito per un controllo figlio consiste nell'impostare la proprietà StyleReference del controllo.

Impostazione degli stili tramite un controllo DeviceSpecific

Per impostare le proprietà di stile è inoltre possibile utilizzare un controllo DeviceSpecific. Nell'esempio riportato di seguito viene illustrata un'etichetta visualizzata con lo stile corsivo per la maggior parte dei dispositivi e con lo stile grassetto in un dispositivo per desktop.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" >
// A custom method to determine if the page 
// is displayed on a mobile device
public bool IsDesktop(System.Web.Mobile.MobileCapabilities 
    capabilities, String argument)
{
    return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet >
  <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

Quando si fa riferimento a uno stile tramite la proprietà StyleReference, viene applicata una particolare sequenza di controlli per determinare lo stile da utilizzare. Per un controllo figlio, ovvero un controllo all'interno di un controllo contenitore padre, le regole per determinare le caratteristiche del controllo figlio sono descritte nell'elenco riportato di seguito, utilizzando Font-Size come esempio:

Se l'attributo Font-Size è stato impostato in modo esplicito per un controllo figlio, nel controllo verrà utilizzata l'impostazione corrispondente.
In caso contrario, se è impostata la proprietà StyleReference del controllo figlio, ad esempio myChild.StyleReference = someStyle, nel controllo verrà utilizzato il valore dell'attributo Font-Size dell'elemento Style a cui viene fatto riferimento, ad esempio someStyle. Il controllo figlio accede al valore effettuando le seguenti operazioni:
1. Il controllo figlio ricerca lo stile a cui si fa riferimento nel foglio di stile dell'istanza corrente della classe 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.
Se lo stile non è direttamente o indirettamente disponibile, la proprietà StyleReference non è stata impostata e il controllo figlio ottiene il valore dell'attributo Font-Size applicando questa procedura al controllo padre in modo ricorsivo.
Se mediante la ricorsione viene raggiunto il livello più alto della gerarchia del controllo senza individuare un valore esplicito per l'attributo 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

Esistono due eccezioni per l'algoritmo di ricerca:

Il valore del colore di sfondo non viene ereditato dall'oggetto padre. Questa eccezione è coerente con i fogli di stile CSS di comportamento.
I controlli DeviceSpecific non ereditano i valori dal controllo padre. Il controllo DeviceSpecific in genere viene 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 classe StyleSheet. È possibile eseguire facilmente l'override dei valori di questi stili predefiniti per applicarne altri. In un unico foglio di stile possono essere contenute più dichiarazioni 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 così riferimento allo 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 e inserirvi un unico controllo StyleSheet con un insieme di stili. Per fare riferimento a questo file, inserire quindi un controllo StyleSheet in una pagina per dispositivi mobili e impostarne la proprietà ReferencePath sull'URL relativo del controllo utente.

Implementazione di fogli di stile esterni

Per l'implementazione di un foglio di stile esterno sono previsti tre passaggi:

Creare un controllo utente mobile Microsoft ASP.NET in un file ascx.
Inserire un unico foglio di stile nel file ascx aggiungendo gli elementi <Style> desiderati.
Dichiarare un foglio di stile e impostarne la proprietà ReferencePath sul nome del file ascx del controllo utente per ogni pagina per dispositivi mobili 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 Controlli utente.

Caratteristiche degli oggetti Style e della classe Style

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

Nella classe base Style sono contenute le caratteristiche di stile comuni a tutti i controlli mobili. Nelle classi che ereditano dalla classe Style sono contenute altre caratteristiche di stile specifiche del controllo associato.

In ogni classe MobileControl è contenuto internamente un oggetto Style. Questo oggetto Style tuttavia non è esposto mediante membri pubblici. Per ogni proprietà di stile, la classe MobileControl dispone invece di una proprietà accessibile pubblicamente che fa riferimento internamente allo stile contenuto in modo privato. Una classe MobileControl pertanto espone direttamente le proprietà di stile quali Font, ForeColor e Wrapping.

Organizzazione degli stili

È possibile organizzare gli stili 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 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 ASP.NET per dispositivi mobili o impostando a livello di codice la proprietà StyleReference.

Vedere anche

Condividi tramite