Novedades en Xamarin.Forms presentadas en el Build 2020

El //Build 2020

En estos días, del 19 al 21 de Mayo se está celebrando el Build 2020, el mayor evento de Microsoft centrado en el desarrollo del año.

//Build 2020

Y se han presentado una gran variedad de novedades relacionadas con Xamarin.Forms.

Novedades anunciadas para Xamarin.Forms

Shell 2.0

Shell llegó en Xamarin.Forms con el objetivo de simplificar la creación de la estructura de la aplicación. Tener un Flyout, pestañas, etc.

Shell hacía muchas cosas bien, como simplificar la creación de estructuras, simplificar la navegación o la gestión de la barra de búsqueda. Sin embargo, sabemos que también hay cosas que se debían mejorar. Por poner algunos ejemplos: la abstracción de nombres hacía que aprender Shell fuese más complejo de lo necesario, había escenarios no cubiertos, etc. Con la llegada de Shell 2.0 se busca mejorar todas estas opciones.

<App>
    <App.Routes>
        <Route = "Foo">
            <TabBar Location="Bottom"  IsNavigationRoot="true">
                <TabBar Location="Top" Name="Your Library">
                    <TabBar Location="Top" Name="Music" Route = "Music">
                        <Tab Name="PlayLists" Route="Login">
                        <Tab Name="Artists">
                        <Tab Name="Albums">
                        <NavigationButton Route="Foo">
                    </TabBar>
                    <TabBar Location="Top" Name="Podcasts" Route = "Podcasts">
                        <Tab Name="Episodes">
                        <Tab Name="Downloads">
                        <Tab Name="Shows">
                    </TabBar>
                </TabBar>
                <Tab Name="Home" />
                <Tab Name="Search" />
            </TabBar>
        </Route>
        <Route="Login">
            <MyLoginPage />
        </Route>
    </App.Routes>
    <FlyoutNavigation />
</App>

Shapes

Con la evolución de Xamarin.Forms las posibilidades creando interfaces de usuario o controles personalizados ha ido incrementando. Sin embargo, no tenemos aún la posibilidad de dibujar formas básicas (rectángulo, línea o círculo). Llegan Shapes a Xamarin.Forms.

  • Rectangle: Es una forma con cuatro lados cuyos lados opuestos son iguales. Para crear un rectángulo básico, se debe especificar las propiedades WidthRequest, HeightRequest y Fill.
  • Ellipse: Una elipse es una forma con un perímetro curvo. Para crear una elipse básica, hay que especificar el WidthRequest, HeightRequest y Fill.
  • Line: Permite dibujar una línea entre dos puntos.
  • Polyline: es similar a un polígono ya que el límite de la forma está definido por un conjunto de puntos, pero hay que tener en cuenta que el último punto de la polilínea no está conectado al primero.
  • Polygon: es una forma con un límite definida por un número de puntos arbitrario. El límite se crea conectando una línea desde un punto al siguiente, con el último punto conectado al primero.
  • Path: es ña figura más versátil, ya que se puede usar para definir una geometría arbitraria.

Ejemplo:

<Path
     HeightRequest="100"
     WidthRequest="100"
     Fill="Red"
     Stroke="Red"
     StrokeThickness="3">
     <Path.Data>
          <GeometryGroup>
               <RectangleGeometry
                    Rect="480, 96, 192, 192" />
               <RectangleGeometry
                    Rect="576, 192, 192, 192" />
          </GeometryGroup>
     </Path.Data>
</Path>

Brushes

Un gradiente es la mezcla gradual de un color a otro. En diseño móvil, es un recurso habitual por lo que contar con soporte en Xamarin.Forms era necesario.

En Xamarin.Forms, todas las Views (esto incluye páginas, layouts y vistas) tendrán soporte a Brushes.

Tendremos tres tipos de Brushes:

  • SolidColorBrush: Pinta un colo sólido.
  • LinearGradientBrush: Pinta un degradado que se define a lo largo de una línea. Esta línea se llama eje de gradiente. Puede especificar los colores del degradado y sus ubicaciones a lo largo del eje del degradado utilizando objetos GradientStop.
  • RadialGradientBrush: Pinta un área con un degradado radial que tiene un círculo, junto con un punto focal, para definir el comportamiento del degradado. El punto focal define el centro del gradiente y tiene el valor predeterminado 0.0.

Veamos un ejemplo usando XAML:

<Grid>
    <Grid.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </Grid.Background>
<Grid>

También se podrá utilizar CSS para definir gradientes:

#RootContainer{
    background: linear-gradient(45deg, rgba(218, 64, 244, 0.26) 0%, rgba(218, 64, 244, 0.26) 3%,rgba(184, 81, 207, 0.26) 3%, rgba(184, 81, 207, 0.26) 26%,rgba(149, 97, 169, 0.26) 26%, rgba(149, 97, 169, 0.26) 27%,rgba(115, 114, 132, 0.26) 27%, rgba(115, 114, 132, 0.26) 46%,rgba(80, 130, 94, 0.26) 46%, rgba(80, 130, 94, 0.26) 87%,rgba(46, 147, 57, 0.26) 87%, rgba(46, 147, 57, 0.26) 100%),linear-gradient(0deg, rgba(247, 80, 105, 0.26) 0%, rgba(247, 80, 105, 0.26) 1%,rgba(223, 84, 119, 0.26) 1%, rgba(223, 84, 119, 0.26) 11%,rgba(199, 88, 133, 0.26) 11%, rgba(199, 88, 133, 0.26) 46%,rgba(174, 91, 147, 0.26) 46%, rgba(174, 91, 147, 0.26) 54%,rgba(150, 95, 161, 0.26) 54%, rgba(150, 95, 161, 0.26) 73%,rgba(126, 99, 175, 0.26) 73%, rgba(126, 99, 175, 0.26) 100%),linear-gradient(90deg, rgb(74, 13, 231) 0%, rgb(74, 13, 231) 18%,rgb(96, 13, 230) 18%, rgb(96, 13, 230) 21%,rgb(119, 13, 229) 21%, rgb(119, 13, 229) 26%,rgb(141, 13, 228) 26%, rgb(141, 13, 228) 32%,rgb(163, 12, 226) 32%, rgb(163, 12, 226) 44%,rgb(185, 12, 225) 44%, rgb(185, 12, 225) 56%,rgb(208, 12, 224) 56%, rgb(208, 12, 224) 64%,rgb(230, 12, 223) 64%, rgb(230, 12, 223) 100%)
}

Usando Brushes

TabView

Podemos tener pestañas usando Shell. Sin embargo, ¿qué sucede si queremos tener pestañas anidadas dentro de una sección específica (Ejemplo: dentro de un Grid)?, ¿qué pasa si queremos personalizar completamente cada pestaña?. En estos casos, necesitaríamos un Custom Renderer, hasta ahora …

TabView es una forma de mostrar un conjunto de pestañas, útil para mostrar varios contenidos al tiempo que ofrece al usuario la capacidad de personalizar todo.

Las características principales de este nuevo control son:

  • Posibilidad de personalizar cada pestaña, el tabstrip y el contenido.
  • Poder personalizar transiciones entre pestañas, etc.
  • Pestañas cíclicas.
  • Lazy loading.
  • Soporte a Badge.
  • Etc.

Veamos algunos ejemplos.

Pestañas básicas

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

Pestañas básicas

Usando TabItemsSource

Se pueden tener Tabs desde una fuente de información directamente:

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

TabItemsSource

Pestañas personalizadas

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

Personalizar pestañas

Pestañas cíclicas

<TabView
    IsCyclical="True">
    ...
</TabView>

Pestañas cíclicas

Se pueden personalizar transiciones, animaciones, estados visuales, etc.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

Personaliza animaciones, transiciones, etc

AppBar

Una AppBar consiste en una barra de navegación y potencialmente otras vistas además de poder exponer una o más acciones.

El principal beneficio de usar AppBar son las opciones de personalización como:

  • Altura de barra personalizada.
  • Incluir cualquier contenido sin restricciones ni limitaciones (márgenes, tamaño, etc.).
  • Barra transparente.
  • Etc.

Veamos un ejemplo:

<AppBar 
     BarHeight="120"
     BarBackgroundColor="Transparent">
     <AppBar.TitleView>
     ...
     </AppBar.TitleView>
</AppBar>

Personalizar la barra de navegación

Roadmap

Se continuarán lanzando nuevas releases cada 6 semanas (como hasta ahora). De modo que:

  • Xamarin.Forms 4.7 llegará en Junio 2020
  • Xamarin.Forms 4.8 llegará en Agosto de 2020
  • Xamarin.Forms 4.9 llegará en Septiembre 2020

[Quedada Virtual] CartujaDotNet

Quedada

En CartujaDotNet, grupo de usuarios .NET de Sevilla solemos realizar quedadas informales de forma periódica. Se trata de sencillamente quedar para charlar abiertamente sobre próximos eventos, tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. En estos momentos difíciles donde todos debemos ser responsables y el distanciamiento social es sumamente importante no podemos hacer este tipo de actividades…

Quedada virtual

Por supuesto que podemos hacer este tipo de actividades de forma virtual!. Mañana Sábado 09 de Mayo, tendremos nuestra quedada virtual de 12:00h a 14:00h.

¿Te animas?

Tanto si eres desarrollador .NET de Sevilla como si no, estas invitado!.

Más información

  • ¿Quieres unirte a la quedada?. Tan solo tienes que usar este enlace.

Cancelación Sevilla Net Conf 2020

Tras las últimas noticias acerca del coronavirus que tod@s conocemos y en un acto de responsabilidad compartida, nos vemos obligados a tomar una decisión triste pero que consideramos necesaria, hemos decidido cancelar la primera edición de la Sevilla .NET
Conf. ¡La seguridad de todos es lo más importante!.

Sevilla Net Conf 2020

Hemos barajado posponerlo al último trimestre del año, pero es posible que tengamos un exceso de eventos en esas fechas y no queremos colisionar con las demás comunidades técnicas o ciudades, que, como nosotros, se han esforzado muchísimo para organizar sus eventos.
También hemos pensado en esperar hasta el último momento posible, pero consideramos que podría ser un problema para aquellos que reserváis vuelos, hoteles, etc. si cancelamos con poca antelación. No queremos cancelar a última hora y que algunos no podáis recuperar vuestro dinero.

Cancelamos, a menos de dos meses del evento, con entorno a 70 entradas asignadas y 13 propuestas presentadas en el Call 4 Paper.
Hay una gran cantidad de esfuerzo y trabajo detrás de la organización de un evento, quizás algo superior al tratarse de la primera edición, pero esperamos que este trabajo también facilite las cosas en próximas ediciones.

Estamos recibiendo muchísimo apoyo y comprensión de nuestros patrocinadores y colaboradores. Todos están ofreciendo ayuda en lo posible. GRACIAS.

Si fuese posible retomar el evento este año sin colisionar o afectar a otroseventos, volveremos a intentarlo. En cualquier otro caso, esperamos veros en la #SvqNetConf2021.

Sevilla Net Conf 2020

Introducción

Tras un tiempo trabajando en dar forma la idea de tener un evento de mayor tamaño en Sevilla, estoy muy contento de poder compartir con todos información detallada de la Sevilla Net Conf 2020.

¿Por qué el evento?

Antes de lanzarme a explicar el evento, detalles, etc. quiero comenzar hablando de como nace la idea y el por qué de un evento así. En Sevilla solemos tener de forma periódica eventos en las comunidades de .NET y Xamarin. Hablamos de eventos pequeños (15-30 asistentes) de una única charla habitualmente, en ocasiones con dos. En los últimos años, algo que ha pasado de forma habitual es que para la mayoría de charlas solemos contar con un número reducido de speakers. Por otro lado, aunque se van sumando más miembros a la comunidad en asistencia y/o participación, en quedadas donde se hablaba acerca de ideas, cosas a mejorar, etc. un punto habitual y repetido ha sido llegar a más personas.

En base a los dos puntos anteriores, nace el evento. En la comunidad .NET tenemos una variedad y calidad de speakers muy alta. Organizar algo mayor donde poder contar con la participación de alguien que no se ve habitualmente en sesiones en Sevilla es una oportunidad fantástica para comunidad local. Por otro lado, quizás un evento de mayor tamaño llega a más empresas y desarrolladores fomentando la participación no solo en este evento, sino en otros eventos a posteriori.

Sevilla Net Conf

La Sevilla Net Conf 2020 es un evento gratuito que tendrá lugar el próximo 09 de Mayo. Será un evento de un solo día pero de mañana y tarde. Por este motivo, el evento ofrecerá un almuerzo para los asistentes.

Sevilla Net Conf 2020

Con una capacidad de asistentes elevada, ya se han abierto las entradas así como el Call 4 Paper.

Más información del evento:

  • Estamos cerrando el lugar. La idea es contar con una capacidad alta y que se encuentre en una zona adecuada teniendo en cuenta varios factores (transporte, hoteles cercanos, etc.). La página web del evento se actualizará con mapa, información de transporte, hoteles, etc. en cuanto tengamos cerrado el lugar.
  • El Call 4 Paper es abierto y cualquiera puede participar. El Call 4 Paper estará abierto hasta el 12 de Abril. A mitad de Abril se actualizará la web con la agenda y cada ponente recibirá confirmación e información detallada.
  • El evento contará con streaming y grabaciones de las sesiones. Sin embargo, si puedes asistir no te pierdas el evento!. No hay nada como poder asistir y compartir momentos de networking entre todos.
  • El evento será gratuito al cubrir costes gracias a sponsors. De momento contamos con 4 sponsors (gracias DevsDNA, Plain Concepts, MetaDev y Everis!), pero tenemos una gran cantidad de ideas que nos encantaría poder llevar a cabo. Contamos con tres niveles de patrocinio; oro, plata y bronce. Cada nivel cuenta con diferentes privilegios. Puedes ver más información al respecto en la web del evento. Si estas interesado en colaborar como patrocinador puedes escribir a contacto@sevillanetconf.es.
  • Sorpresas. Aún tenemos que cerrar algunos detalles pero ya tenemos algunas sorpresas preparadas.

Más información

[Quedada Informal] CartujaDotNet & SVQXDG

Quedada múltiple

Desde CartujaDotNet, grupo de usuarios .NET de Sevilla y SVQXDG, grupo de desarrolladores Xamarin de Sevilla, vamos a realizar una quedada informal para charlar abiertamente sobre tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. Además, se analizarán las próximas charlas ya planteadas hasta final de año y los eventos confirmados entre otros temas de interés. Al ser quedada de dos grupos diferentes creemos que es una gran oportunidad para conocer, intercambiar e interactuar entre ambos permitiendo a miembros de cada uno conocer a los del otro y tratar otros aspectos.

No hace falta confirmar asistencia, y por supuesto será gratuito.

¿Te apuntas?

A continuación tienes disponible la fecha, hora y lugar:

  • Día: 03 de Octubre (Jueves)
  • Horario:  19:00h
  • Lugar: En la Terraza del McDonald’s de Santa Justa

Más información

[Quedada Informal] CartujaDotNet

Quedada múltiple

Desde CartujaDotNet, grupo de usuarios .NET de Sevilla vamos a realizar una quedada informal para charlar abiertamente sobre tecnologías Microsoft, herramientas utilizadas, intercambiar impresiones, etc. Además, se hablará de próximos eventos entre otros temas de interés.

No hace falta confirmar asistencia, y por supuesto será gratuito.

¿Te apuntas?

A continuación tienes disponible la fecha, hora y lugar:

  • Día: 28 de Mayo (Martes)
  • Horario:  19:00h
  • Lugar: En la Terraza del McDonald’s de Santa Justa

Más información

[CartujaDotNet] Nuevo evento: Extender Visual Studio para macOS

El evento

Si vienes usando Visual Studio probablemente sepas acerca de la posibilidad de extensibilidad. Crear extensiones para cubrir o mejorar cierta funcionalidad (plantilla de proyectos, nueva herramienta, etc.). ¿Sabías que es también posible en Visual Studio para macOS?.

En esta sesión, conoceremos como extender Visual Studio para macOS; como depurar una extensión así como ver todos los puntos principales de extensión todo a base de ejemplos.

El lugar

El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula por confirmar
Av. Reina Mercedes s/n
Sevilla Se 41012

La fecha

Será el próximo Jueves, 11 de Abril de 19:00h a 20:00h (GMT+1).

¿Te apuntas?

Más información

[VS4Mac] Lottie Player, nuevo addin para previsualizar animaciones Lottie

Introducción

¿Te imaginas tomar una animación creada por un diseñador y poder utilizarla?.

Lottie es una librería de animaciones creada por Airbnb para iOS y Android que se encarga de tomar animaciones de After Effect exportadas en JSON y renderizarla utilizando APIs de animación nativa en cada plataforma.

Lottie

Las animaciones pueden ser extremadamente complejas pero al final, trabajamos con archivos de imagen y JSONs lo que se traduce en un requisito pequeño en tamaño otorgando unas posibilidades altas. Las animaciones se pueden reproducir, pausar, detener, jugar con la velocidad o cambiar la escala.

Lottie Player

Usar animaciones de Lottie y acabar lanzando la App en depuración o usando herramientas externas para ver el resultado no es lo idóneo, ¿verdad?. Lottie Player es un addin para Visual Studio para macOS que permite previsualizar (e interactuar) con la animación directamente desde el IDE.

¿Cómo instalar?

Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…

Buscamos por “Lottie Player”:

Instalar Lottie Player…

Y pulsamos Install…

¿Qué aporta?

Podremos hacer clic derecho sobre un archivo de animación Lottie (recuerda, formato Json) y acceder a una nueva opción, Preview In Lottie Player…

Lottie Player

Seleccionando la opción, previsualizaremos la animación en bucle además de:

  • Poder pausar y reanudar la animación en cualquier momento.
  • Si pausamos la animación, podremos movernos hacia cualquier frame de la animación.

Veamos el addin en funcionamiento:

Preview in Lottie Player

Lo próximo

La versión actual aporta la funcionalidad básica pero hay una gran cantidad de opciones posibles para futuras versiones:

  • Controlar la velocidad de la animación.
  • Controlar si se reproduce o no en bucle.
  • Poder cambiar el fondo de la animación.
  • Etc.

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!

Más información

[VS4Mac] Git History integrado como addin

Introducción

A la hora de trabajar con un proyecto en Git, Visual Studio para macOS cuenta con soporte integrado. Sin embargo, recientemente probé git-history. Sin duda, una forma intuitiva y muy interesante para ver le historial de cambios en un archivo. Así que, ¿por qué no tenerlo integrado en Visual Studio para macOS?.

Git History

Git History llega como addin para Visual Studio para macOS como una forma alternativa sencilla y rápida de ver el historial de cambios de un fichero.

¿Cómo instalar?

Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…

Buscamos por “Git History”.

Instalar…

Y pulsamos Install…

¿Qué aporta?

Haciendo clic derecho sobre cualquier archivo de un proyecto que use Git tendremos una nueva opción:

Show Git History

Lo que nos abrirá una nueva vista con el historial del archivo:

Viendo el historial del archivo

Veamos como usar el addin directamente:

Usando Git History

Puedes encontrar el código del addin en GitHub:

Ver GitHub

¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!

Más información

[Material] .Net Conf Sevilla 2018

El evento

El pasado 24 de Octubre, teníamos en CartujaDotNet un evento bastante completo donde revisamos las últimas novedades disponibles en Xamarin, C#, .NET Core, ML.Net, Azure, Azure DevOps, etc.

El material

A continuación puedes encontrar la presentación utilizada en el evento:

Una tarde de repaso de una gran variedad de tecnologías, con preguntas interesantes y algo de netwotking asi que, ¿cuándo repetimos?.

Más información