Использование UrhoSharp вXamarin.FormsUsing UrhoSharp in Xamarin.Forms

Загрузить образец загрузить примерDownload Sample Download the sample

Что такое UrhoSharp?What is UrhoSharp?

UrhoSharp — это мощный трехмерный механизм для разработчиков Xamarin и .NET.UrhoSharp is a powerful 3D engine for Xamarin and .NET developers. Введение познакомит с библиотекой UrhoSharp, а в этих заметках описывается, как программировать сцены и действия.The introduction explains more about the UrhoSharp library, and these notes describe how to program scenes and actions.

UrhoSharp можно использовать для отрисовки графики в Xamarin.Forms приложениях.UrhoSharp can be used to render graphics in Xamarin.Forms applications. В этом образце показано, как UrhoSharp можно использовать для создания интерактивной трехмерной диаграммы:This sample demonstrates how UrhoSharp could be used to construct an interactive 3D chart:

Трехмерная интерактивная диаграмма UrhoSharp на устройстве iOS  UrhoSharp 3D Interactive в AndroidUrhoSharp 3D Interactive Chart on iOS UrhoSharp 3D Interactive Chart on Android

Добавление пакетов NuGet UrhoSharpAdding the UrhoSharp NuGet packages

Перед использованием UrhoSharp разработчикам необходимо добавить в свое решение пакет NuGet UrhoSharp.Before using UrhoSharp, developers need to add the UrhoSharp NuGet package to their solution. В этом учебнике предполагается наличие Xamarin.Forms проекта с проектом библиотеки iOS, Android и .NET Standard.This guide assumes a Xamarin.Forms project with an iOS, Android, and .NET Standard library project. Весь код будет записан в проект библиотеки .NET Standard; но UrhoSharp NuGet также необходимо добавить в проекты iOS и Android.All of the code will be written in the .NET Standard library project; but the UrhoSharp NuGet must be added to the iOS and Android projects too.

Пакет NuGet UrhoSharp. Forms содержит все объекты, необходимые для создания объектов UrhoSharp.The UrhoSharp.Forms NuGet package contains all of the objects needed to create UrhoSharp objects. Пакет NuGet UrhoSharp. Forms включает UrhoSurface класс, который используется для размещения UrhoSharp в Xamarin.Forms .The UrhoSharp.Forms NuGet package includes the UrhoSurface class, which is used to host UrhoSharp in Xamarin.Forms. Чтобы начать, щелкните правой кнопкой мыши папку packages в проекте библиотеки .NET Standard и выберите пункт Добавить пакеты.... Введите условие поиска UrhoSharp. Forms, выберите **UrhoSharp для Xamarin.Forms **, а затем щелкните Добавить пакет.To begin, right-click on the Packages folder in the .NET Standard library project and select Add Packages.... Enter the search term UrhoSharp.Forms, select UrhoSharp for Xamarin.Forms, then click Add Package.

Диалоговое окно добавления пакетовAdd Packages Dialog

Пакет NuGet UrhoSharp. Forms будет добавлен в проект:The UrhoSharp.Forms NuGet package will be added to the project:

Папка Packages

Повторите описанные выше действия для проектов, связанных с платформой (например, iOS и Android).Repeat the above steps for platform-specific projects (such as iOS and Android).

Пошаговое руководство. Добавление UrhoSharp в Xamarin.Forms приложениеWalkthrough: Adding UrhoSharp to a Xamarin.Forms app

Эти шаги описывают код в Xamarin.Forms образце UrhoSharp:These steps describe the code in the Xamarin.Forms UrhoSharp sample:

  1. Создание страницы Xamarin FormsCreate a Xamarin Forms Page
  2. Добавление УрхосурфацеAdd the UrhoSurface
  3. Создание приложения УрхоBuild an Urho Application
  4. Добавление класса Charts в УрхосурфацеAdd the Charts class to the UrhoSurface
  5. Взаимодействие с UrhoSharpInteracting with UrhoSharp

Обратите внимание, что в примере используются функции C# 6, которые могут не компилироваться в более старых версиях Visual Studio.Note that the sample uses C# 6 features, and may not compile on older versions of Visual Studio.

1. Создание страницы Xamarin Forms1. Create a Xamarin Forms Page

В приведенном ниже коде показана Xamarin.Forms Страница UrhoPage до добавления кода, связанного с Урхо:The code below shows a Xamarin.Forms page UrhoPage before any Urho-related code has been added:

public class UrhoPage : ContentPage
{
  Slider selectedBarSlider, rotationSlider;

  public UrhoPage()
  {
    // we'll add Urho later

    rotationSlider = new Slider(0, 500, 250);

    selectedBarSlider = new Slider(0, 5, 2.5);

    Title = " UrhoSharp + Xamarin.Forms";
    Content = new StackLayout {
      Padding = new Thickness (12, 12, 12, 40),
      VerticalOptions = LayoutOptions.FillAndExpand,
      Children = {
        rotationSlider,
        new Label { Text = "SELECTED VALUE:" },
        selectedBarSlider,
      }
    };
  }

2. Добавьте Урхосурфаце2. Add the UrhoSurface

UrhoSharp может размещаться в, ContentPage как и другие Xamarin.Forms элементы управления.UrhoSharp can be hosted in a ContentPage like other Xamarin.Forms controls. В следующем фрагменте кода показана UrhoSurface страница, добавленная на Xamarin.Forms страницу:The code snippet below shows a UrhoSurface added to the Xamarin.Forms page:

using Urho;
using Urho.Forms;
...
public class UrhoPage : ContentPage
{
  UrhoSurface urhoSurface;

  public UrhoPage()
  {
    urhoSurface = new UrhoSurface();
    urhoSurface.VerticalOptions = LayoutOptions.FillAndExpand;
...
    Content = new StackLayout {
    Padding = new Thickness (12, 12, 12, 40),
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = {
      urhoSurface,  // added
      new Label { Text = "ROTATION:" },
      rotationSlider,
      new Label { Text = "SELECTED VALUE:" },
      selectedBarSlider,
    }
  };

3. Создание приложения Урхо3. Build an Urho Application

ChartsСведения о реализации трехмерной графики Урхо, используемой в этом примере, см. в классе.Refer to the Charts class for the implementation of the Urho 3D graphics used in this sample. Ниже показана базовая структура кода. Обратите внимание, что класс реализует, Urho.Application который отличается от Xamarin.Forms.Application класса, реализованного в app.CS.The basic code outline is shown below - note that the class implements Urho.Application which is different to the Xamarin.Forms.Application class that is implemented in App.cs.

using Urho;
using Urho.Actions;
using Urho.Gui;
using Urho.Shapes;

namespace FormsSample
{
    public class Charts : Urho.Application
    {
    public Charts (ApplicationOptions options = null) : base(options) { }
    protected override void Start ()
    {
      ...
    }
    protected override void OnUpdate(float timeStep)
    {
      ...
    }

Документация по UrhoSharp содержит дополнительные сведения о создании трехмерных сцен и действий.The UrhoSharp documentation contains more information on how to build 3D scenes and actions.

4. Добавьте класс Charts в Урхосурфаце4. Add the Charts class to the UrhoSurface

Используйте UrhoSurface.Show<T> универсальный метод, чтобы добавить приложение Урхо на Xamarin.Forms страницу.Use the UrhoSurface.Show<T> generic method to add the Urho application to the Xamarin.Forms page. В приведенном ниже фрагменте кода показан дополнительный код, необходимый для создания Charts класса:The code snippet below shows the additional code required to create the Charts class:

public class UrhoPage : ContentPage
{
  Charts urhoApp;
  ...
  protected override async void OnAppearing ()
  {
    urhoApp = await urhoSurface.Show<Charts> (new ApplicationOptions(assetsFolder: null)
      { Orientation = ApplicationOptions.OrientationType.Portrait });
  }

Примечание. Show<T> метод является асинхронным и должен вызываться с await ключевым словом.Note: the Show<T> method is asynchronous and should be called with the await keyword.

5. взаимодействие с UrhoSharp5. Interacting with UrhoSharp

В этом примере можно выбрать и изменить гистограммы.The example allows the chart bars to be selected and modified. ChartsКласс предоставляет Bars и SelectedBar для включения этого взаимодействия.The Charts class exposes the Bars and SelectedBar to enable this interaction.

Каждый "Bar" имеет обработчик событий выбора, добавленный после Charts подготовки класса, путем прохода по предоставленной Bars коллекции:Each "bar" has a selection event handler added after the Charts class has been rendered, by iterating over the exposed Bars collection:

protected override async void OnAppearing ()
{
  urhoApp = await urhoSurface.Show<Charts>(new ApplicationOptions(assetsFolder: null) { Orientation = ApplicationOptions.OrientationType.Portrait });
  foreach (var bar in urhoApp.Bars)
  {
    bar.Selected += OnBarSelection;
  }
}

Обработчик событий использует значение Xamarin.Forms Slider элемента управления для настройки высоты данной линейки:The event handler uses the value of the Xamarin.Forms Slider control to adjust the height of the given bar:

private void OnBarSelection(Bar bar)
{
  //reset value
  selectedBarSlider.ValueChanged -= OnValuesSliderValueChanged;
  selectedBarSlider.Value = bar.Value;
  selectedBarSlider.ValueChanged += OnValuesSliderValueChanged;
}

void OnValuesSliderValueChanged(object sender, ValueChangedEventArgs e)
{  // C# 6
  if (urhoApp?.SelectedBar != null)
  {
    urhoApp.SelectedBar.Value = (float)e.NewValue;
  }
}

Наконец, необходимо установить связь между двумя Slider элементами управления, чтобы при изменении их значения UrhoSharp на холсте.Finally, wire up the two Slider controls so that when their value changes the UrhoSharp canvas is affected. Первый ползунок поворачивает изображение трехмерной диаграммы, а второй ползунок корректирует высоту выбранной линии.The first slider rotates the 3D chart image and the second slider adjusts the height of the selected bar.

rotationSlider = new Slider(0, 500, 250);
rotationSlider.ValueChanged += (s, e) => urhoApp?.Rotate((float)(e.NewValue - e.OldValue));

selectedBarSlider = new Slider(0, 5, 2.5);
selectedBarSlider.ValueChanged += OnValuesSliderValueChanged;

В анимации в верхней части страницы показан пример выполнения.The animations at the top of the page show the sample running.

СводкаSummary

На этой странице показано, как можно использовать UrhoSharp для добавления визуализации трехмерных данных в Xamarin.Forms .This page shows how UrhoSharp can be used to add 3D data visualization to Xamarin.Forms. Дополнительные сведения UrhoSharp documentation о создании Урхо сцен, которые можно включить в Xamarin.Forms приложения с помощью метода, показанного выше, см. в документации по UrhoSharp.Read the UrhoSharp documentation for more information on how to build Urho scenes that can be included in Xamarin.Forms apps using the method shown above.