Xamarin.Forms에서 UrhoSharp 사용Using UrhoSharp in Xamarin.Forms

샘플 다운로드 샘플 다운로드Download Sample Download the sample

UrhoSharp 란?What is UrhoSharp?

UrhoSharp 는 Xamarin 및.NET 개발자를 위한 강력한 3D 엔진입니다.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 대화형 3D 차트를 생성 하는 방법을 사용할 수 있습니다 하는 방법을 보여 줍니다.This sample demonstrates how UrhoSharp could be used to construct an interactive 3D chart:

UrhoSharp Nuget 패키지 추가Adding the UrhoSharp Nuget packages

UrhoSharp 사용 하기 전에 개발자가 솔루션에 UrhoSharp Nuget 패키지를 추가 해야 합니다.Before using UrhoSharp, developers need to add the UrhoSharp Nuget package to their solution. 이 가이드에서는 iOS, Android 및.NET Standard를 사용 하 여 Xamarin.Forms 프로젝트 가정 라이브러리 프로젝트.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. UrhoSharp.Forms nuget 패키지에 포함 된 UrhoSurface Xamarin.Forms에서 UrhoSharp 호스팅하는 데 사용 하는 클래스입니다.The UrhoSharp.Forms nuget package includes the UrhoSurface class, which is used to host UrhoSharp in Xamarin.Forms. 시작 하려면 마우스 오른쪽 단추로 클릭 합니다 패키지 선택한.NET Standard 라이브러리 프로젝트 폴더 패키지 추가... . 검색 용어를 입력 UrhoSharp.Forms를 선택 Xamarin.Forms 용 UrhoSharp, 클릭 패키지 추가합니다.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).

연습: 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 Forms 페이지 만들기Creat a Xamarin Forms Page
  2. UrhoSurface 추가Add the UrhoSurface
  3. Urho 응용 프로그램 빌드Build an Urho Application
  4. 에 UrhoSurface 차트 클래스 추가Add the Charts class to the UrhoSurface
  5. UrhoSharp 상호 작용Interacting 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 Forms 페이지 만들기1. 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. UrhoSurface 추가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. Urho 응용 프로그램 빌드3. Build a Urho Application

참조 된 Charts Urho 3D 그래픽이이 샘플에 사용 되는 구현의 클래스입니다.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 설명서 3D 장면 및 작업을 작성 하는 방법에 대 한 자세한 정보를 포함 합니다.The UrhoSharp documentation contains more information on how to build 3D scenes and actions.

4. 에 UrhoSurface 차트 클래스 추가4. Add the Charts class to the UrhoSurface

사용 하 여는 UrhoSurface.Show<T> 제네릭 메서드 Xamarin.Forms 페이지 Urho 응용 프로그램을 추가 합니다.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. UrhoSharp 상호 작용5. Interacting with UrhoSharp

예제 차트 막대를를 선택 하 고 수정할 수 있습니다.The example allows the chart bars to be selected and modified. 합니다 Charts 노출 클래스는 BarsSelectedBar 이 상호 작용할 수 있도록 합니다.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. 3D 차트 이미지를 회전 하는 첫 번째 슬라이더 및 두 번째 슬라이더 선택한 막대의 높이 조정 합니다.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

이 페이지는 Xamarin.Forms에 3D 데이터 시각화를 추가할 UrhoSharp를 사용할 수 있는 방법을 보여 줍니다.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.