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

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

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

UrhoSharp — мощная подсистема 3D для разработчиков 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 NugetAdding the UrhoSharp Nuget packages

Прежде чем использовать UrhoSharp, разработчики должны добавить пакет UrhoSharp Nuget в свое решение.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.

Пакет UrhoSharp.Forms Nuget содержит все объекты, необходимые для создания объектов 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. Чтобы начать, щелкните правой кнопкой мыши пакетов папки в проект библиотеки .NET Standard и выберите добавить пакеты... . Введите условие поиска UrhoSharp.Formsвыберите UrhoSharp для Xamarin.Forms, затем нажмите кнопку Add Package.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.

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

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

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

В следующих шагах описано в примере UrhoSharp в Xamarin.Forms кода:These steps describe the code in the Xamarin.Forms UrhoSharp sample:

  1. Создание структуры на странице Xamarin FormsCreat a Xamarin Forms Page
  2. Добавить UrhoSurfaceAdd the UrhoSurface
  3. Создание приложения UrhoBuild an Urho Application
  4. Добавление класса диаграммы UrhoSurfaceAdd 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 перед любой код с Urho был добавлен: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. Добавить UrhoSurface2. 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. Создание приложения Urho3. Build a Urho Application

Ссылаться на Charts класс для реализации трехмерной графики Urho, используемый в этом примере.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. Добавление класса диаграммы UrhoSurface4. Add the Charts class to the UrhoSurface

Используйте UrhoSurface.Show<T> универсальный метод, чтобы добавить это приложение Urho страницу 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.

Каждая «строка» есть обработчик событий выбора, добавленные после 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 документации Дополнительные сведения о том, как для построения кадром Urho, которые могут быть включены в приложениях Xamarin.Forms с помощью метода, показанного выше.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.