Controles WinUI 3 C++ – Controles de texto básicos

En esta lección comenzaremos a aprender los controles de WinUI 3 C++. WinUI C++ cuenta con una amplia colección de controles integrados, y empezaremos por los controles fundamentales de visualización e entrada de texto.

A continuación se listan los controles relacionados con texto:

TextBlock：Visualización de texto estático, admite texto enriquecido y estilos en línea

RichTextBlock：Visor de texto enriquecido solo lectura, soporta párrafos, cursiva, negrita e imágenes incrustadas

TextBox：Campo de entrada de texto de una sola línea

RichEditBox：Editor de texto enriquecido multilínea (configuración de fuente, color y párrafos)

PasswordBox：Campo de contraseña, oculta los caracteres introducidos

AutoSuggestBox：Campo de entrada con menú desplegable de autocompletado

NumberBox：Solo admite entrada numérica, con límite de valor máximo/mínimo y soporte para decimales

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="30">
        
        <TextBlock Text="Hello, FoxDevelop!" FontSize="24" Margin="0,0,0,20"/>
        
        <RichTextBlock>
            <Paragraph>
                <Run Text="This is a sample WinUI application."/>
            </Paragraph>
        </RichTextBlock>

        <TextBox x:Name="myTextBox" PlaceholderText="Enter your name" Text="" Margin="0,20,0,0"/>

        <RichEditBox PlaceholderText="Enter some rich text" Margin="0,20,0,0"/>

        <PasswordBox PlaceholderText="Enter your password" Margin="0,20,0,0"/>

        <AutoSuggestBox PlaceholderText="Search..." Margin="0,20,0,0"/>

        <NumberBox PlaceholderText="Enter a number" Margin="0,20,0,0"  Maximum="100" Minimum="0"/>

        <Button Content="Click Me" Margin="0,20,0,0" Click="Button_Click"/>
    </StackPanel>Lenguaje del código: HTML, XML (xml)

Sitúa el cursor sobre el nombre del evento y pulsa F12 para generar automáticamente la función de clic del botón

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif


#include <winrt/Microsoft.UI.Xaml.Controls.h>
#include <winrt/Microsoft.UI.Xaml.h>

using namespace winrt;
using namespace Microsoft::UI::Xaml;
using namespace Microsoft::UI::Xaml::Controls;
using namespace Windows::Foundation;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace winrt::AppWinui::implementation
{
    int32_t MainWindow::MyProperty()
    {
        throw hresult_not_implemented();
    }

    void MainWindow::MyProperty(int32_t /* value */)
    {
        throw hresult_not_implemented();
    }

}

void winrt::AppWinui::implementation::MainWindow::Button_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    myTextBox().Text(L"welcome to foxdevelop.com");//Establecer el texto del TextBox
    hstring inputText = myTextBox().Text(); //Leer el texto del TextBox
    OutputDebugStringW(inputText.c_str());
}
Lenguaje del código: C++ (cpp)

Con myTextBox().Text puedes establecer o leer el valor del texto: si pasas un parámetro de cadena ancha como L"welcome to foxdevelop.com", asignas el contenido; si lo invocas sin argumentos (hstring inputText = myTextBox().Text();), recuperas el texto actual.

Aclaración: incluso si usas myTextBox().Text(L"welcome to foxdevelop.com"); para rellenar un texto predeterminado, el contenido que el usuario escriba manualmente en la interfaz se podrá leer desde el backend al pulsar el botón.

El resto de controles de texto admiten lectura y escritura de valores mediante sintaxis similar, por lo que no los repasaremos uno por uno aquí.