Popup personalizado en Xamarin Forms

En este post veremos cómo crear un Popup personalizado en Xamarin Forms. Crea un nuevo proyecto Xamarin.Forms como se muestra en la siguiente imagen.


Xamarin Forms Popup Personalizado

Ahora, seleccione la Aplicación en blanco, .Net Standard y das clic en Aceptar.

Loading Xamarin Forms personalizado

Se generará el proyecto y tendremos una aplicación básica de Xamarin Forms. Podemos ejecutarla para probar cómo se ve.

Configuración de la interfaz de usuario.

Primero abre la página MainPage.Xaml y escribe el siguiente código.

<StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                    <Label Text="Estrada Web Group" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"></Label>
                    <Image x:Name="imgEstradaWebGroup" Source="logoEstradaVF.png" HeightRequest="200" WidthRequest="200"></Image>
                    <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Mostrar Popup"></Button>
                </StackLayout>
            </StackLayout>

Popup - Cargando

Aquí crearemos un popup que nos muestre que está cargando datos. Crearemos una ventana emergente personalizada utilizando ContentView.

La ventana emergente personalizada es solo una vista de contenido, se debe ocultarla de manera predeterminada. Después del evento click, se mostrará el ContentView.

Escribe el siguiente código para el popup.

<ContentView x:Name="popupLoadingView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
                        <ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="30" HeightRequest="30" ></ActivityIndicator>
                        <Label x:Name="lblLoadingText" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Cargando..."></Label>
                    </StackLayout>
                </StackLayout>
            </ContentView>

Ahora, agrega en el evento clic del botón el siguiente código para mostrar ventana emergente.

private void btnPopupButton_Clicked(object sender, EventArgs e)
        {
            popupLoadingView.IsVisible = true;
            activityIndicator.IsRunning = true;

        }

El código completo de la página MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PopupPersonalizado"
             x:Class="PopupPersonalizado.MainPage">
    <ContentPage.Content>
        <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                    <Label Text="Estrada Web Group" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"></Label>
                    <Image x:Name="imgEstradaWebGroup" Source="logoEstradaVF.png" HeightRequest="200" WidthRequest="200"></Image>
                    <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Mostrar Popup"></Button>
                </StackLayout>
            </StackLayout>
            <ContentView x:Name="popupLoadingView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                    <StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
                        <ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="30" HeightRequest="30" ></ActivityIndicator>
                        <Label x:Name="lblLoadingText" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Cargando..."></Label>
                    </StackLayout>
                </StackLayout>
            </ContentView>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

 

Artículos relacionados
Custom Popup in Xamarin Forms
Custom Popup in Xamarin Forms

In this post we will see how to create a custo

Tab control de pestañas en Xamarin dentro de una página
Tab control de pestañas en Xamarin dentro de una página

Xamarin Forms cuenta con un control llamado Ta

Cómo crear Mapas bindable en Xamarin.Forms (Parte 3)
Cómo crear Mapas bindable en Xamarin.Forms (Parte 3)

Si estas desarrollando una plicación Xamarin.F

0 Comentarios
Enviame un comentario