Mulai cepat Win2D "Halo, Dunia!"

Dalam topik ini Anda akan membuat proyek "Halo, Dunia!" yang sangat sederhana untuk Win2D.

Di Visual Studio, buat proyek baru dari salah satu templat proyek berikut:

• WinUI 3 (SDK Aplikasi Windows). Untuk membuat proyek WinUI 3 baru, gunakan templat proyek Aplikasi Kosong, Dipaketkan (WinUI 3 di Desktop). Anda dapat menemukan templat proyek tersebut dengan memilih bahasa: C# atau C++; platform: Windows; jenis proyek: Desktop.
• Platform Windows Universal (UWP). Untuk membuat proyek UWP baru, gunakan templat proyek Aplikasi Kosong (Universal Windows) atau Aplikasi Kosong (C++/WinRT) atau Aplikasi Kosong (Universal Windows - C++/CX). Untuk bahasa, pilih: C # atau C++; platform: Windows; jenis proyek: UWP.

Untuk menghosting konten Win2D, Anda harus menambahkan Win2D CanvasControl ke proyek MainWindow.xaml Anda (atau MainPage.xaml, untuk proyek UWP).

Pertama, tambahkan deklarasi namespace xml berikut:

xmlns:win2dcanvas="using:Microsoft.Graphics.Canvas.UI.Xaml"

Lalu tambahkan CanvasControl, diawali dengan namespace xml tersebut. Misalnya, Anda dapat menambahkan Grid sebagai akar tata letak Anda, seperti ini:

<Grid>
    <win2dcanvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
</Grid>

Proyek tidak akan dibangun saat ini, karena penanganan aktivitas Draw yang direferensikan tetapi tidak diimplementasikan. Jadi kita akan memperbaikinya selanjutnya, sementara kita menambahkan beberapa kode gambar untuk berinteraksi dengan CanvasControl.

Untuk proyek WinUI 3 (SDK Aplikasi Windows)

Untuk proyek C#, tambahkan penanganan aktivitas berikut ke MainWindow.xaml.cs:

// MainWindow.xaml.cs
...
public sealed partial class MainWindow : Window
{
    ...
    void CanvasControl_Draw(
        Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
        Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
    {
        args.DrawingSession.DrawEllipse(155, 115, 80, 30, Microsoft.UI.Colors.Black, 3);
        args.DrawingSession.DrawText("Hello, Win2D World!", 100, 100, Microsoft.UI.Colors.Yellow);
    }
}
...

Untuk proyek C++/WinRT, tambahkan penanganan aktivitas berikut ke MainWindow.xaml.h dan MainWindow.xaml.cpp:

// MainWindow.xaml.h
...
void CanvasControl_Draw(
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args);
...

// MainWindow.xaml.cpp
...
namespace winrt::MYPROJECT::implementation
{
    ...
    void MainWindow::CanvasControl_Draw(
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args)
    {
        args.DrawingSession().DrawEllipse(155, 115, 80, 30, winrt::Microsoft::UI::Colors::Black(), 3);
        args.DrawingSession().DrawText(L"Hello, Win2D World!", 100, 100, winrt::Microsoft::UI::Colors::Yellow());
    }
}

Anda sekarang dapat membangun dan menjalankan proyek. Anda akan melihat beberapa konten Win2D—elips hitam dengan pesan kuning "Halo, Dunia!" di depannya.

Untuk proyek UWP

Untuk proyek C#, Anda dapat menggunakan kode C# yang sama seperti untuk proyek WinUI 3 (lihat bagian Untuk proyek WinUI 3 di atas). Satu-satunya perbedaan adalah Anda akan mengedit MainPage.xaml.cs alih-alih MainWindow.xaml.cs. Dan Anda harus mengubah Microsoft.UI.Colors ke Windows.UI.Colors.

Untuk proyek C++/WinRT, tambahkan kode berikut ke pch.h, MainPage.h, dan MainPage.cpp:

// pch.h
...
#include <winrt/Microsoft.Graphics.Canvas.UI.Xaml.h>

// MainPage.h
...
void CanvasControl_Draw(
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args);
...

// MainPage.cpp
...
namespace winrt::MYPROJECT::implementation
{
    ...
    void MainPage::CanvasControl_Draw(
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args)
    {
        args.DrawingSession().DrawEllipse(155, 115, 80, 30, winrt::Windows::UI::Colors::Black(), 3);
        args.DrawingSession().DrawText(L"Hello, Win2D World!", 100, 100, winrt::Windows::UI::Colors::Yellow());
    }
}

Untuk proyek C++/CX, tambahkan penanganan aktivitas berikut ke MainPage.xaml.h dan MainPage.xaml.cpp:

// MainPage.xaml.h
...
void CanvasControl_Draw(
	Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
	Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args);
...

// MainWindow.xaml.cpp
...
void MainPage::CanvasControl_Draw(
    Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
    Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args)
{
    args->DrawingSession->DrawEllipse(155, 115, 80, 30, Windows::UI::Colors::Black, 3);
    args->DrawingSession->DrawText("Hello, Win2D World!", 100, 100, Windows::UI::Colors::Yellow);
}

Lihat Juga

• Ringkasan Win2D
• Mulai cepat Win2D