Kontrol WinUI 3 C++ – Kontrol Teks Dasar

Di pelajaran ini kita mulai mempelajari kontrol WinUI 3 C++. WinUI C++ menyediakan banyak sekali kontrol bawaan, kita akan mulai dari kontrol dasar untuk menampilkan dan memasukkan teks.

Berikut adalah daftar kontrol yang berhubungan dengan teks:

TextBlock：Tampilan teks statis, mendukung teks berformat dan gaya inline

RichTextBlock：Penampil teks berformat hanya baca, mendukung paragraf, miring, tebal, penyisipan gambar

TextBox：Kotak input teks satu baris

RichEditBox：Editor teks berformat multi baris (atur font, warna, format paragraf)

PasswordBox：Kotak input kata sandi, menyembunyikan karakter yang diketik

AutoSuggestBox：Kotak input dengan daftar saran pelengkap otomatis

NumberBox：Hanya menerima input angka, batas nilai minimum/maksimum dan mendukung bilangan desimal

    <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>Code language: HTML, XML (xml)

Arahkan kursor ke nama event lalu tekan tombol F12 untuk menghasilkan fungsi klik tombol secara otomatis

#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;

// Referensi WinUI: 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");//Mengatur teks TextBox
    hstring inputText = myTextBox().Text(); //Membaca teks TextBox
    OutputDebugStringW(inputText.c_str());
}
Code language: C++ (cpp)

Kita bisa gunakan myTextBox().Text untuk mengatur atau membaca nilai teks. Jika memberikan parameter string lebar seperti L"welcome to foxdevelop.com", fungsi akan mengisi teks; jika tanpa parameter hstring inputText = myTextBox().Text(); maka akan membaca teks saat ini.

Catatan: Meskipun kita mengisi teks bawaan dengan myTextBox().Text(L"welcome to foxdevelop.com");, teks apapun yang diketik pengguna di layar tetap bisa dibaca oleh kode backend setelah tombol diklik.

Kontrol teks lainnya semua mendukung baca dan tulis nilai dengan sintaks serupa, tidak akan dibahas satu per satu di sini.