Hallo Welt - wie funktioniert es?

Sehen wir uns das erste Projekt an, das in der vorherigen exemplarischen Vorgehensweise erstellt wurde, um mehr über die Verwendung von Experimentellen Mobilen Blazor-Bindungen zu erfahren.

Das Standard zu betrachtenden Projekt ist das freigegebene Projekt, das die .razor Dateien enthält. Die Android- und iOS-Projekte enthalten keinen spezifischen Code für experimentelle Mobile Blazor-Bindungen.

Dies sind die Dateien im freigegebenen Projekt:

• _Imports.razor - Enthält allgemeine Anweisungen, die auf alle anderen .razor Dateien in diesem Ordner und seinen Unterordnern angewendet werden. Unterordner können über eigene _Imports.razor Dateien mit zusätzlichen Anweisungen verfügen. Der häufigste Direktiventyp in dieser Datei ist die @using -Anweisung, die zum Importieren eines Namespaces in .razor Dateien verwendet wird, genau wie eine C#- using Anweisung.
• App.cs– Enthält den Standard Benutzeroberflächeneinstiegspunkt der Anwendung, der durch eine Klasse dargestellt wird, die von der Xamarin.Forms.Application Basisklasse abgeleitet ist. Der Konstruktor dieser Klasse instanziiert einen generischen Host, fügt dem Host Dienste hinzu (das Standardprojekt hat keine), und verwendet dann den Host, um dem Anwendungselement (this) eine Blazor-Komponente mit dem Namen HelloWorld hinzuzufügen.
• Counter.razor - Enthält eine Blazor-Komponente mit dem Namen Counter.
• HelloWorld.razor - Enthält eine Blazor-Komponente mit dem Namen HelloWorld.

Sehen Wir uns die beiden Blazor-Komponenten an, um zu sehen, wie sie funktionieren.

Kontra-Blazor-Komponente

Diese Komponente enthält zwei Abschnitte:

1. Das Markup, das die Ui-Elemente und die zugehörigen Eigenschaften und Ereignishandler definiert:

   <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>
   

   Die HTML-ähnlichen Tags stellen Ui-Komponenten dar, die den Xamarin.Forms-Komponenten und ihren Eigenschaften und Ereignissen entsprechen. Einige Eigenschaften verfügen über berechnete Werte, z. B. die -Eigenschaft der Label Komponente Text , deren Wert auf einen Wert festgelegt ist, der durch C#-Code berechnet wird, der durch den @( ... ) Ausdrucksblock bezeichnet wird.

   Wenn ein Ereignishandler ausgeführt wird, z. B. das Ereignis der Button Komponente OnClick , wird die Komponente automatisch erneut gerendert, sodass die Benutzeroberfläche ohne zusätzliche Logik aktualisiert werden kann. Erweiterte Szenarien können steuern, welche Komponenten wann erneut gerendert werden.

2. Der Code, der alle Ereignishandler oder andere Komponentenfunktionen implementiert, die in einen @code { ... } Block eingeschlossen sind:

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

   Dieser Code erhöht das count Feld, das auch als berechneter Wert der Eigenschaft der Label Komponente Text verwendet wird. Nachdem der IncrementCount() Ereignishandler ausgeführt wurde, wird der neue Wert von count verwendet, wenn die Benutzeroberfläche erneut gerendert wird.

HelloWorld Blazor-Komponente

Die HelloWorld-Komponente enthält nur Markup:

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

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

        <Counter />

    </StackLayout>
</ContentView>

Beachten Sie, dass in dieser Komponente auf die Counter Komponente verwiesen wird, indem sie als Tag <Counter />referenziert wird.

Jede Blazor-Komponente wird in eine Klasse mit demselben Namen wie die Datei kompiliert. Der Namespace ist der Stammnamespace des Projekts und die Ordnernamen, falls vorhanden, durch Punkte (.) getrennt. Auf den Typ kann durch anderen C#-Code über seinen Typnamen (nicht allgemein) oder in einer .razor Datei als Tag verwiesen werden.