Fala, galera!

Hoje lhes trago um artigo que se não acharem útil, acharão, no minimo, curioso. Vamos criar um site ASP.Net Core com Xamarin Forms!

Não, você não leu errado. Essa “doideira” é possível graças a incrível biblioteca cross-platform Ooui. Ela simplifica o desenvolvimento Web utilizando o XAML, o mesmo que estamos acostumados no Xamarin.

Mas pra quê falar se posso mostrar? Vamos lá!

1 –  Novo projeto

Crie um projeto Asp.Core no Visual Studio (Windows ou Mac):

Agora vamos adicionar os pacotes nuget. Devemos adicionar os seguintes pacotes :

• Ooui
• Ooui.Forms
• Ooui.ASPNetCore
• Xamarin.Forms

Precisamos instalar o Xamarin.Forms também – porém, a versão 2.4:

Simples, não?

2 – Configurando e codificando

Ooui oferece várias maneiras de renderizar a interface, incluindo o uso de Xamarin.Forms XAML ou C#. Você pode usar qualquer ContentPage e diversos controles são suportados (clique aqui para saber os controles suportados).

Vamos criar uma página simples xaml como exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="OouiAspCore.Pages.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Minha Nossa!" FontSize="Large" 
                   HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
            <Button Text="Me aperta ( ͡° ͜ʖ ͡°)" Clicked="Handle_Clicked" HeightRequest="50"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace OouiAspCore.Pages
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            InitializeComponent();
        }

        int count = 0;
        void Handle_Clicked(object sender, System.EventArgs e)
        {
            var button = sender as Button;

            if (button == null)
                return;

            count++;
            button.Text = $"Você clicou {count} vezes!";
        }

    }
}

Agora precisamos configurar o asp.core. Para ele entender o componente é necessário adicionar o UseOoui() e Forms.Init();. Deixe o arquivo Startup.cs da seguinte forma:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace OouiAspCore
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseBrowserLink();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();

            app.UseOoui();

            Xamarin.Forms.Forms.Init();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

Agora precisamos alterar o HomeController para abrir nossa page ao invés da cshtml. Por padrão, o asp.core mvc abre as páginas razor, então precisamos alterá-lo:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using OouiAspCore.Models;
using OouiAspCore.Pages;
using Ooui.AspNetCore;
using Xamarin.Forms;

namespace OouiAspCore.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var page = new MainPage();
            var element = page.GetOouiElement();
            return new ElementResult(element, "Minha Nossa!");
        }

     

        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

Vamos rodar nosso app (site):

Muito louco, né? Se quiser saber mais sobre as possibilidades do Ooui, acesse o site oficial ou o GitHub do projeto.

O projeto que criei está disponível neste link.

Espero ter ajudado, galera. Aquele abraço!