Экспериментальные мобильные привязки Blazor

Экспериментальные мобильные привязки Blazor позволяют разработчикам создавать собственные и гибридные мобильные приложения с помощью C# и .NET для Android, iOS, Windows, macOS и Tizen, используя знакомые шаблоны веб-программирования. Экспериментальные мобильные привязки Blazor используют синтаксис Razor для определения компонентов пользовательского интерфейса и поведения приложения. Базовые компоненты пользовательского интерфейса основаны на компонентах собственного пользовательского интерфейса Xamarin.Forms, а в гибридных приложениях они смешиваются с элементами HTML.

Blazor работает на .NET Standard 2.0 , поэтому вы можете поделиться кодом .NET с большинством других приложений .NET.

С помощью мобильных привязок Blazor можно легко создать собственный пользовательский интерфейс с метками, кнопками и другими собственными компонентами пользовательского интерфейса:

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

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

И здесь он выполняется в Android Emulator:

Кроме того, вы можете создавать гибридные приложения, которые смешивают собственный пользовательский интерфейс и пользовательский интерфейс HTML на одном экране с одинаковыми логикой и состоянием приложения:

• /Main.razor: (собственный пользовательский интерфейс)

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

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

И здесь он выполняется в симуляторе iOS с собственным пользовательским интерфейсом поверх, а пользовательский интерфейс HTML в нижней части с общими логикой приложения и состоянием:

Чтобы создать свои первые приложения, проверка следующие разделы:

• Начните, чтобы настроить среду разработки.
• Создайте свое первое приложение с помощью собственных компонентов пользовательского интерфейса.
• Создайте свое первое гибридное приложение , используя сочетание собственных компонентов пользовательского интерфейса и пользовательского интерфейса HTML.

Когда вы будете готовы к дополнительным действиям, проверка пошаговые руководства:

• Приложение Todo
• Прогноз погоды

Затем некоторые из расширенных тем:

• Внедрение зависимостей — регистрация и совместное использование служб между частями приложения
• Создание настраиваемых компонентов — создание повторно используемых компонентов в приложениях
• Xamarin.Essentials — предоставляет разработчикам кроссплатформенные API для мобильных приложений.

И, наконец, если вы хотите внести свой вклад, проверка следующие темы:

• Схема действий
• Отзывы