En la mayoría de las bibliotecas de terceros en el ecosistema de Xamarin, es muy sencillo de configurar e iniciar el desarrollo accediendo controles a través de instancias y variables, en este ejemplo nos centraremos en la funcionalidad del CheckBox.
Configura la biblioteca con los siguientes pasos:
- Incluye el paquete de Nuget Xamarin.Forms.InputKit en todos tus proyectos.
- Inicialízalo en los proyectos de destino llamando:
- Referencia al namespace de InputKit en el XAML agregando la línea en la declaración de la página xmlns:
- Instancié el namespace input a los controles que desees utilizar
Propiedades de CheckBox - InputKit:
- CheckChanged: Evento que se invoca cuando se cambia el Check.
- CheckChangedCommand: Comando para enlazar el dato, se ejecutado cuando se cambia el dato.
- Key: Valor de tipo int para identificar una clave e iniciar la configuración para definir la verificación como un ID único.
- Texto: Valor de tipo string para mostrar la descripción
- IsChecked: Booleano para marcada situación actual del Check. Funciona con enlace bidireccional por defecto (True / False).
- Color: Color del Check seleccionado.
- TextColor: Color del texto de descripción.
- Typo: Identificación del tipo o estilo de Check (lo más utilizando son Check, Cross, Star y Box)
Ejemplo práctico:
Marca la lista de cursos para visualizar la cantidad total cursos seleccionados y el total de créditos.
XAML completo del archivo PageCheckBox.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:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
x:Class="D02InputKit.Views.PageCheckBox"
Title="Ejemplo
CheckBox">
<ContentPage.ToolbarItems>
<ToolbarItem Priority="1" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="Transparent" Margin="15,0,0,0"
HorizontalOptions="Fill">
<Grid VerticalOptions="CenterAndExpand" Padding="5,5,0,0" BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Frame HasShadow="False" Padding="10,0,0,10" BackgroundColor="Transparent" BorderColor="#6fb7ff">
<StackLayout Grid.Row="0" x:Name="fSecDeterminar" IsVisible="True">
<input:CheckBox x:Name="CUR01" Text="Ecuaciones Diferenciales" Type="Check"/>
<input:CheckBox x:Name="CUR02" Text="Programación Web Distribuido" Type="Cross"/>
<input:CheckBox x:Name="CUR03" Text="Arquitectura de Software" Type="Star"/>
<input:CheckBox x:Name="CUR04" Text="Modelamiento de base de datos" Type="Box"/>
<input:CheckBox x:Name="CUR05" Text="Arquitectura de Software" Type="Material" />
</StackLayout>
</Frame>
</Grid>
<Grid Grid.Row="1">
<StackLayout>
<Button x:Name="btnMatricular" Clicked="mat_Clicked" Text="Matricular" FontSize="Small" TextColor="White"
BackgroundColor="#f50057" CornerRadius="5" WidthRequest="100" HeightRequest="45"/>
</StackLayout>
</Grid>
<Grid Grid.Row="2">
<Frame Padding="10,10,10,10" x:Name="fSecValueCurso" IsVisible="True">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="TOTAL DE CURSOS:" WidthRequest="160" TextColor="#424949" HorizontalOptions="StartAndExpand" FontSize="15" VerticalOptions="Center"/>
<Frame BorderColor="#6fb7ff" HasShadow="False" Padding="0">
<Editor x:Name="totalCursos" WidthRequest="130" FontSize="26" Placeholder="0" Text="" VerticalOptions="StartAndExpand"
HorizontalOptions="StartAndExpand" Keyboard="Numeric" MaxLength="3" HeightRequest="55" IsEnabled="False"/>
</Frame>
</StackLayout>
</Frame>
</Grid>
<Grid Grid.Row="3">
<Frame Padding="10,10,10,10" x:Name="fSecValueCredito" IsVisible="True">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="TOTAL DE CRÉDITOS:" WidthRequest="160" TextColor="#424949" HorizontalOptions="StartAndExpand" FontSize="15" VerticalOptions="Center"/>
<Frame BorderColor="#6fb7ff" HasShadow="False" Padding="0">
<Editor x:Name="totalCreditos" WidthRequest="130" FontSize="26" Placeholder="0" Text="" VerticalOptions="StartAndExpand"
HorizontalOptions="StartAndExpand" Keyboard="Numeric" MaxLength="3" HeightRequest="55" IsEnabled="False"/>
</Frame>
</StackLayout>
</Frame>
</Grid>
</Grid>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Implementar el CodeBehind PageCheckBox.xaml.cs
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace D02InputKit.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PageCheckBox : ContentPage
{
int intCred01 = 6, intCred02 = 5, intCred03 = 4, intCred04 = 6,
intCred05 = 3, intTotalCredito, intTotalCurso;
public PageCheckBox()
{
InitializeComponent();
}
protected override async void OnAppearing()
{
base.OnAppearing();
}
private void mat_Clicked(object sender,
EventArgs e)
{
intTotalCredito = 0;
intTotalCurso = 0;
if (CUR01.IsChecked == true)
{
intTotalCredito = intCred01;
intTotalCurso = 1;
}
if (CUR02.IsChecked == true)
{
intTotalCredito += intCred02;
intTotalCurso += 1;
}
if (CUR03.IsChecked == true)
{
intTotalCredito += intCred03;
intTotalCurso += 1;
}
if (CUR04.IsChecked == true)
{
intTotalCredito += intCred04;
intTotalCurso += 1;
}
if (CUR05.IsChecked == true)
{
intTotalCredito += intCred05;
intTotalCurso += 1;
}
totalCursos.Text =
Convert.ToString(intTotalCurso);
totalCreditos.Text =
Convert.ToString(intTotalCredito);
reset_Controles();
}
void reset_Controles() {
CUR01.IsChecked = false;
CUR02.IsChecked = false;
CUR03.IsChecked = false;
CUR04.IsChecked = false;
CUR05.IsChecked = false;
}
}
}
Resultado:
Documentación:
Documentación Xamarin.Forms.InputKit.
Intalación y comando NuGet Xamarin.Forms.InputKit.
CheckBox Nativo de Microsoft.
Descargar Ejemplo:
Nuevamente gratitud a Dios 😊 y gracias a todos ustedes por la acogida de este nuevo articulo, éxitos y bendiciones 🙏 y un gran abrazo a todos ✌...!!!
0 Comentarios