Experimentelle Mobile Blazor-Bindungen

Experimentelle Mobile Blazor-Bindungen ermöglichen Es Entwicklern, native und hybride mobile Apps mit C# und .NET für Android, iOS, Windows, macOS und Tizen mithilfe vertrauter Webprogrammierungsmuster zu erstellen. Experimentelle Mobile Blazor-Bindungen verwenden Razor-Syntax, um Ui-Komponenten und -Verhalten einer Anwendung zu definieren. Die zugrunde liegenden Ui-Komponenten basieren auf nativen Xamarin.Forms-UI-Komponenten und werden in Hybrid-Apps mit HTML-Elementen gemischt.

Blazor wird unter .NET Standard 2.0 ausgeführt, sodass Sie Ihren .NET-Code für die meisten anderen .NET-Apps freigeben können.

Mit Mobile Blazor Bindings ist es einfach, eine native Benutzeroberfläche mit Bezeichnungen, Schaltflächen und anderen nativen UI-Komponenten zu erstellen:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Und hier wird es im Android-Emulator ausgeführt:

Außerdem können Sie Hybrid-Apps erstellen, die native Benutzeroberfläche und HTML-Benutzeroberfläche auf demselben Bildschirm kombinieren und alle die gleiche App-Logik und denselben Zustand verwenden:

• /Main.razor: (native Benutzeroberfläche)

  @inject CounterState CounterState
  
  <ContentView>
      <StackLayout>
  
          <StackLayout Margin="new Thickness(20)">
              <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
              <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
          </StackLayout>
  
          <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
              <FirstBlazorHybridApp.WebUI.App />
          </BlazorWebView>
  
      </StackLayout>
  </ContentView>
  
  @code {
      // initialization code
  }
  

• /WebUI/App.razor: (HTML-Benutzeroberfläche)

  @inject CounterState CounterState
  
  <div style="text-align: center; background-color: lightblue;">
      <div>
          <span style="font-size: 30px; font-weight: bold;">
              You pressed @CounterState.CurrentCount times
          </span>
      </div>
      <div>
          <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
      </div>
  </div>
  
  @code
  {
      private void ClickMe()
      {
          CounterState.IncrementCount();
      }
  
      // initialization code
  }
  

Und hier wird es im iOS-Simulator ausgeführt, mit der nativen Benutzeroberfläche oben und der HTML-Benutzeroberfläche unten, wobei die App-Logik und der Zustand freigegeben werden:

Um Ihre ersten Apps zu erstellen, lesen Sie die folgenden Themen:

• Erste Schritte beim Einrichten Ihrer Entwicklungsumgebung.
• Erstellen Sie Ihre erste App mit nativen Ui-Komponenten.
• Erstellen Sie Ihre erste Hybrid-App mit einer Mischung aus nativen UI-Komponenten und HTML-Benutzeroberfläche.

Wenn Sie weitere Informationen benötigen, sehen Sie sich die exemplarischen Vorgehensweisen an:

• Todo-App
• Wetter-App

Dann einige der erweiterten Themen:

• Abhängigkeitsinjektion : Registrieren und Freigeben von Diensten zwischen Teilen der Anwendung
• Schreiben von benutzerdefinierten Komponenten – Erstellen wiederverwendbarer Komponenten in Ihren Apps
• Xamarin.Essentials : Bietet Entwicklern plattformübergreifende APIs für ihre mobilen Anwendungen

Und wenn Sie einen Beitrag leisten möchten, lesen Sie die folgenden Themen:

• Roadmap
• Feedback