Xamarin Forms: Pre visualizando los formularios (Opción 1)

Una de las características más solicitadas por los desarrolladores en Xamarin Forms, es el poder ver en tiempo de diseño sus formularios. Aunque en el evento “Xamarin Evolve 2016” se ha anunciado un pre visualizador oficial, aún se encuentra en estado Alpha.

Una de las opciones para llevar a cabo una previsualización de nuestros formularios (aunque no es en tiempo real), es la utilización del proyecto Windows Phone Forms to Xamarin Forms, el cual nos permite convertir un formulario desarrollado para Windows Phone en un formulario de Xamarin. Aquí van las instrucciones:

1.- Creando el formulario en un proyecto tipo Windows Phone

Debemos crear un nuevo formulario en un proyecto tipo Windows Phone, o bien utilizar uno existente:

Una vez agregado el archivo en el proyecto, podemos comenzar a diseñarlo con ayuda del diseñador integrado para este tipo de proyectos, en mi caso, crearé un formulario que quedará de la siguiente manera:

con el código correspondiente:

<phone:PhoneApplicationPage
    x:Class="JsonWebServices.WinPhone.WeatherPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="XAMARIN" FontSize="20"/>
            <TextBlock Text="Weather App" Margin="9,-7,0,0" FontSize="72" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock>Latitud</TextBlock>
                    <TextBox Width="300" x:Name="txtLatitude"></TextBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock>Longitud</TextBlock>
                    <TextBox Width="300" x:Name="txtLongitude"></TextBox>
                </StackPanel>
                <Button Content="Obtener Datos" Click="ButtonBase_OnClick"></Button>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="130">Ubicación</TextBlock>
                    <TextBlock Text="{Binding StationName}"></TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="130">Elevación</TextBlock>
                    <TextBlock Text="{Binding Elevation}"></TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="130">Temperatura</TextBlock>
                    <TextBlock Text="{Binding Temperature}"></TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="130">Humedad</TextBlock>
                    <TextBlock Text="{Binding Humidity}"></TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

2.- Leer la documentación y descargar la herramienta

El autor de la herramienta es Jonathan Yates, y podemos encontrar la entrada principal de la herramienta aquí. Aunque los enlaces de la página a la página de OneDrive llevan a un link desactualizado, puedes enviarle un mail a pete@petevickers.co.uk para solicitarle una copia de la herramienta, quien, en mi caso particular me respondió mi correo de forma rápida.

3.- Utilizando la herramienta

Una vez que hemos instalado la herramienta, nos aparecerá algo parecido a esto:

Lo que haremos en este caso en particular, será colocarle un espacio de nombres dentro del proyecto donde se alojará el formulario, seleccionaremos la ruta al archivo, y automáticamente nos generará una ruta para un archivo destino:

Posteriormente, debemos dar click en el botón “Generate”, lo cual nos mostrará un mensaje si la conversión es correcta:

El resultado será el siguiente código, que podremos reutilizar para no iniciar nuestros desarrollos desde cero:

<?xml version="1.0" encoding="utf-8" ?>
<!--Code generated by 'WP to XF' created by GUI Innovations Limited-->
<!--For more details, enhancement requests, bugs etc.  please email-->
<!--             pete@gui-innovations.com  - Thanks                -->
<formtype xmlns=|http://xamarin.com/schemas/2014/forms|
             xmlns:x=|http://schemas.microsoft.com/winfx/2009/xaml|
             x:Class=|PageName|>

<StackLayout Orientation="Vertical"
      VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand"
      Padding="10,40,10,30"
      Spacing="10">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" BackgroundColor="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackLayout Grid.Row="0" Padding="12,17,0,28">
            <Label Text="XAMARIN" FontSize="20"/>
            <Label Text="Weather App"  FontSize="72" />
        </StackLayout>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Padding="12,0,12,0">
            <StackLayout Orientation="Vertical">
                <StackLayout Orientation="Horizontal">
                    <Label>Latitud</Label>
                    <Entry WidthRequest="300" x:Name="txtLatitude"></Entry>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label>Longitud</Label>
                    <Entry WidthRequest="300" x:Name="txtLongitude"></Entry>
                </StackLayout>
                <Button Text="Obtener Datos"></Button>
                <StackLayout Orientation="Horizontal">
                    <Label WidthRequest="130">Ubicación</Label>
                    <Label Text="{Binding StationName}"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label WidthRequest="130">Elevación</Label>
                    <Label Text="{Binding Elevation}"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label WidthRequest="130">Temperatura</Label>
                    <Label Text="{Binding Temperature}"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label WidthRequest="130">Humedad</Label>
                    <Label Text="{Binding Humidity}"></Label>
                </StackLayout>
            </StackLayout>
        </Grid>
    </Grid>
</StackLayout>
</ContentPage>

Cabe destacar que la herramienta es una muy buena ayuda para no iniciar desde cero nuestros formularios, o bien, si queremos reutilizar formularios existentes.

Saludos.