Hallo Welt : come funziona?

Esaminiamo ora il progetto iniziale creato nella procedura dettagliata precedente per altre informazioni su come usare le associazioni Blazor per dispositivi mobili sperimentali.

Il progetto principale da esaminare è il progetto condiviso che contiene i .razor file. I progetti Android e iOS non contengono codice specifico per le associazioni Blazor per dispositivi mobili sperimentali.

Questi sono i file nel progetto condiviso:

• _Imports.razor - Contiene direttive comuni applicate a tutti gli altri .razor file in questa cartella e alle relative sottocartelle. Le sottocartelle possono avere i propri _Imports.razor file con direttive aggiuntive. Il tipo di direttiva più comune in questo file è la @using direttiva , che viene usata per importare uno spazio dei nomi in .razor file, esattamente come un'istruzione C# using .
• App.cs : contiene il punto di ingresso principale dell'interfaccia utente dell'applicazione, rappresentato da una classe che deriva dalla Xamarin.Forms.Application classe di base. Il costruttore di questa classe crea un'istanza di un host generico, aggiunge servizi all'host (il progetto predefinito non ha nessuna) e quindi usa l'host per aggiungere un componente Blazor denominato HelloWorld all'elemento dell'applicazione (this).
• Counter.razor - Contiene un componente Blazor denominato Counter.
• HelloWorld.razor - Contiene un componente Blazor denominato HelloWorld.

Esaminiamo i due componenti Blazor per vedere come funzionano.

Componente Counter Blazor

Questo componente contiene due sezioni:

1. Markup che definisce gli elementi dell'interfaccia utente e le relative proprietà e gestori eventi associati:

   <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">
   
       <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">
   
           <Button Text="Increment" OnClick="IncrementCount" />
   
           <Label Text="@("The button was clicked " + count + " times")"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" />
   
       </StackLayout>
   
   </Frame>
   

   I tag simili a HTML rappresentano componenti dell'interfaccia utente che corrispondono ai componenti di Xamarin.Forms e alle relative proprietà ed eventi. Alcune proprietà hanno valori calcolati, ad esempio la Label proprietà del componente, il cui valore è impostato su un valore calcolato dal codice C#, indicato dal @( ... ) blocco di Text espressioni.

   Quando viene eseguito un gestore eventi, ad esempio l'evento Button del OnClick componente, il componente esegue automaticamente il rendering, che consente all'interfaccia utente di eseguire l'aggiornamento senza alcuna logica aggiuntiva. Scenari più avanzati possono controllare quali componenti eseguono nuovamente il rendering e quando.

2. Codice che implementa tutti i gestori eventi o altre funzionalità del componente, di cui è stato eseguito il wrapping in un @code { ... } blocco:

   int count;
   
   void IncrementCount()
   {
       count++;
   }
   

   Questo codice incrementa il count campo , usato anche come valore calcolato della Label proprietà del Text componente. Dopo l'esecuzione del IncrementCount() gestore eventi, il nuovo valore di count verrà usato quando viene eseguito di nuovo il rendering dell'interfaccia utente.

Componente Blazor HelloWorld

Il componente HelloWorld contiene solo markup:

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Si noti che al Counter componente viene fatto riferimento in questo componente facendo riferimento come tag <Counter />.

Ogni componente Blazor viene compilato in una classe con lo stesso nome del file. Lo spazio dei nomi è lo spazio dei nomi radice del progetto, oltre ai nomi delle cartelle, se presenti, separati da punti (.). Il tipo può essere fatto riferimento da altro codice C# tramite il nome del tipo (non comune) o in un .razor file usandolo come tag.