Ejemplo en Xamarin multiplataforma: cambiar texto y tamaño de letras usando button, slider y label

Este ejemplo es muy sencillo, consiste en tener un botón que muestre un texto que se encuentre guardado en una lista de frases. Luego con un slider se podrá modificar el tamaño del texto.

Repositorio en Bitbucket

https://bitbucket.org/VALKYRIE7/xamarin-multiplataforma-cambiar-texto-y-tamano-de-letras.git

Primero se entenderán las partes del código.

ContentPage

El ContentPage es una página (Page) que muestra una única vista.
Page es un elemento visual (VisualElement) que ocupa la pantalla completa.
VisualElement es un elemento (Element) que ocupa un área en la pantalla, tiene una apariencia visual y puede obtener entrada táctil.
Element es la clase base para todos los elementos jerárquicos de XamarinForms. Esta clase contiene todos los métodos y propiedades para representar un elemento en la jerarquía de XamarinForms.

En ContenPage solo se puede tener un tipo de elemento. Así que si se tiene <Label Text=»texto 1″/> y <Label Text=»texto 2″/> , solo mostrará el último en la lista.

Colocar botones

Identificador de botón:

x:Name = "nombre_del_identificador"

Nombre en pantalla que llevará el botón:

Text = "Cualquier palabra o frase"

Márgenes alrededor del botón (funciona para todo tipo de elemento)

Margin="0,45,0,0"

Margen es diferente a padding (relleno)

El orden de Margin y Padding es el siguiente: Left, Top, Right, Button ( ← ↑ → ↓ )

Llamar a una función

Clicked="Nombre_de_la_función"

Posición horizontal y vertical

HorizontalOptions="Center"
VerticalOptions="Start

Colocar texto

<Label Text="Hola Mundo"
	   x:Name="label"
	   HorizontalOptions="Center"
	   VerticalOptions="Start" />

Cambiar el tamaño de letra en un label

nombre_del_label.FontSize = 777;

Slider

La clase slider es una vista (View) que controla la entrada de un valor lineal.
La clase View es un elemento visual que es usado para colocar diseños (layout) y controles en la pantalla.
Por defecto el rango de valores que tiene va de 0 a 1.

<Slider></Slider>

Detectar cambio en la posición

ValueChanged="Slider_ValueChanged"

// Método autogenerado para ejecutar código ante el cambio 
private void Slider_ValueChanged(object sender, ValueChangedEventArgs e) { }

Definir el valor con el que empieza el slider

slider.Value = 0.5;

Cambiar el valor inicial, final y de inicio en xml

Maximum="25"
Minimum="1"
Value="12"

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:App2"
             x:Class="App2.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Button x:Name="btn1" 
                Text="Next"
                Margin="0,45,0,0"
                HorizontalOptions="Center"
                Clicked="Btn1_Clicked"></Button>
        
        <Slider Margin="40,0,40,0"
                ValueChanged="Slider_ValueChanged"
                x:Name="slider"
                Maximum="25"
                Minimum="1"
                Value="12"></Slider>
        
        <Label Text="Hola Mundo"
               x:Name="label"
               HorizontalOptions="Center"
               VerticalOptions="Start" />
    </StackLayout>

</ContentPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App2
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Btn1_Clicked(object sender, EventArgs e)
        {
            Hola();
        }

        int contador = 0;

        public void Hola()
        {
            string[] frases = new string[] { "frase 1", "frase 2", "frase 3", "frase 4" };

            //slider.Value = 0.5;

            Console.WriteLine("Mensaje en consola cuando presiona el botón");
            //label.Text = "CAMBIO!!!!";

            label.Text = frases[contador];

            contador = contador + 1;
            if (contador>=4)
            {
                contador = 0;
            }

        }

        private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
        {            
            label.FontSize = e.NewValue;
        }
    }

}

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding

https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.page?view=xamarin-forms
https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.visualelement?view=xamarin-forms
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/contentpage
https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.slider?view=xamarin-forms