Lavora con noi

ASP.Net

Siti tematici

Lezioni:

...
<
46
47
48
>
...
Indice

Style: creare regole di stile

Con XAML abbiamo la possibilità di racchiudere le proprietà visuali di un elemento grafico in un oggetto Style. Questo comportamento assomiglia molto a quello svolto dai file CSS, potremmo dire che gli Style stanno a XAML come i file CSS stanno all'HTML. Uno Style se impostato come risorsa può essere riutilizzato su più controlli. Per capire meglio il concetto prendiamo come esempio il seguente codice XAML.

<StackPanel>
  <TextBlock Text="Guida Silverlight" Margin="10"
             FontWeight="Bold" FontFamily="Verdana" FontSize="40" />
  
  <TextBlock Text="HTML.IT" Margin="10"
             FontWeight="Bold" FontFamily="Verdana" FontSize="40" />
</StackPanel>

Per entrambi i controlli TextBlock abbiamo impostato le medesime proprietà, con conseguente (e brutta) duplicazione del codice XAML. Sfruttando il concetto di Style possiamo incapsulare queste proprietà in un unico insieme di elementi Setter, composti dagli attributi Property (nome della proprietà) e Value (valore della proprietà).

<StackPanel>
  <StackPanel.Resources>
    <Style x:Key="myTextStyle" TargetType="TextBlock">
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="FontFamily" Value="Verdana" />
      <Setter Property="FontSize" Value="40" />
      <Setter Property="Margin" Value="10" />
    </Style>
  </StackPanel.Resources>
  
  <TextBlock Text="Guida Silverlight"
             Style="{StaticResource myTextStyle}" />
  <TextBlock Text="HTML.IT"
             Style="{StaticResource myTextStyle}" />
</StackPanel>

Applicare uno stile è molto semplice, basta impostare l'apposita proprietà Style con la risorsa desiderata. Con l'attributo TargetType possiamo dare una restrizione di un tipo ad uno Style, nell'esempio precedente TextBlock. Sfruttando la sintassi XAML Property Element possiamo anche definire oggetti complessi come valore delle proprietà. Vediamo un esempio.

<StackPanel>
  <StackPanel.Resources>
    <Style x:Key="myTextStyle" TargetType="TextBlock">
    ...
      <Setter Property="Foreground">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#FF575757" />
            <GradientStop Color="#FFCDCDCD" Offset="1" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Style>
  </StackPanel.Resources>
  
  <TextBlock Text="Guida Silverlight"
             Style="{StaticResource myTextStyle}" />
  <TextBlock Text="HTML.IT"
             Style="{StaticResource myTextStyle}" />
</StackPanel>

StaticResource può essere utilizzato anche all'interno delle risorse stesse per creare scenari intrecciati di riutilizzo.

<StackPanel>
  <StackPanel.Resources>
    <LinearGradientBrush x:Key="myGradientBrush" 
                         StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="#FF575757" />
      <GradientStop Color="#FFCDCDCD" Offset="1" />
    </LinearGradientBrush>
    
    <Style x:Key="myTextStyle" TargetType="TextBlock">
      ...
      <Setter Property="Foreground"
              Value="{StaticResource myGradientBrush}" />
    </Style>
  </StackPanel.Resources>
  ...
</StackPanel>

Impostando tutti gli stili in file separati possiamo creare differenti Skin per la nostra applicazione, applicabili senza modificare il codice dichiarativo, né quello procedurale.