Pelatihan
Modul
Membuat UI di aplikasi .NET MAUI dengan menggunakan XAML - Training
Pelajari cara merancang UI untuk aplikasi .NET MAUI menggunakan XAML.
Browser ini sudah tidak didukung.
Mutakhirkan ke Microsoft Edge untuk memanfaatkan fitur, pembaruan keamanan, dan dukungan teknis terkini.
Tampilkan layar splash untuk lebih banyak waktu dengan membuat layar splash yang diperluas untuk aplikasi Anda. Layar yang diperluas ini meniru layar splash yang ditampilkan saat aplikasi Anda diluncurkan, tetapi dapat disesuaikan. Apakah Anda ingin menampilkan informasi pemuatan real time atau hanya memberi aplikasi Anda waktu tambahan untuk menyiapkan UI awalnya, layar splash yang diperluas memungkinkan Anda menentukan pengalaman peluncuran.
Catatan
Frasa "layar percikan yang diperluas" dalam topik ini mengacu pada layar percikan yang tetap berada di layar untuk jangka waktu yang lama. Ini tidak berarti subkelas yang berasal dari kelas SplashScreen .
API berikut digunakan dalam topik ini:
Pastikan layar splash yang diperluas secara akurat meniru layar splash default dengan mengikuti rekomendasi berikut:
Gunakan langkah-langkah berikut untuk membuat layar percikan yang diperluas yang secara efektif meniru layar percikan default.
Topik ini mengasumsikan Anda ingin menambahkan layar percikan yang diperluas ke proyek aplikasi Platform Windows Universal (UWP) yang ada menggunakan C#, Visual Basic, atau C++.
Menambahkan item Halaman Kosong menghasilkan dua file, satu untuk markup (ExtendedSplash.xaml) dan satu lagi untuk kode (ExtendedSplash.xaml.cs).
Ikuti langkah-langkah ini untuk menambahkan gambar dan kontrol kemajuan ke layar splash yang diperluas.
Dalam file ExtendedSplash.xaml Anda:
Contoh berikut menunjukkan Kisi dengan penambahan dan perubahan ini.
<Grid Background="#464646">
<Canvas>
<Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
<ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"></ProgressRing>
</Canvas>
</Grid>
Catatan
Contoh ini mengatur lebar ProgressRing menjadi 20 piksel. Anda dapat mengatur lebarnya secara manual ke nilai yang berfungsi untuk aplikasi Anda, namun, kontrol tidak akan merender dengan lebar kurang dari 20 piksel.
Layar percikan yang diperluas perlu merespons setiap kali ukuran jendela (hanya Windows) atau orientasi berubah. Posisi gambar yang Anda gunakan harus diperbarui sehingga layar splash yang diperluas terlihat bagus tidak peduli bagaimana jendela berubah.
Gunakan langkah-langkah ini untuk menentukan metode untuk menampilkan layar percikan yang diperluas dengan benar.
Menambahkan namespace yang diperlukan
Anda harus menambahkan namespace berikut ke ExtendedSplash.xaml.cs untuk mengakses kelas SplashScreen, struktur Rect, dan peristiwa Window.SizeChanged.
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Core;
Membuat kelas parsial dan mendeklarasikan variabel kelas
Sertakan kode berikut dalam ExtendedSplash.xaml.cs untuk membuat kelas parsial untuk mewakili layar percikan yang diperluas.
partial class ExtendedSplash : Page
{
internal Rect splashImageRect; // Rect to store splash screen image coordinates.
private SplashScreen splash; // Variable to hold the splash screen object.
internal bool dismissed = false; // Variable to track splash screen dismissal status.
internal Frame rootFrame;
// Define methods and constructor
}
Variabel kelas ini digunakan oleh beberapa metode. Variabel splashImageRect
menyimpan koordinat tempat sistem menampilkan gambar layar percikan untuk aplikasi. Variabel splash
menyimpan objek SplashScreen , dan dismissed
variabel melacak apakah layar splash yang ditampilkan oleh sistem telah ditutup atau tidak.
Tentukan konstruktor untuk kelas Anda yang memposisikan gambar dengan benar
Kode berikut mendefinisikan konstruktor untuk kelas layar splash yang diperluas yang mendengarkan peristiwa mengubah ukuran jendela, memposisikan kontrol kemajuan gambar dan (opsional) pada layar splash yang diperluas, membuat bingkai untuk navigasi, dan memanggil metode asinkron untuk memulihkan status sesi yang disimpan.
public ExtendedSplash(SplashScreen splashscreen, bool loadState)
{
InitializeComponent();
// Listen for window resize events to reposition the extended splash screen image accordingly.
// This ensures that the extended splash screen formats properly in response to window resizing.
Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);
splash = splashscreen;
if (splash != null)
{
// Register an event handler to be executed when the splash screen has been dismissed.
splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);
// Retrieve the window coordinates of the splash screen image.
splashImageRect = splash.ImageLocation;
PositionImage();
// If applicable, include a method for positioning a progress control.
PositionRing();
}
// Create a Frame to act as the navigation context
rootFrame = new Frame();
}
Pastikan untuk mendaftarkan handler Window.SizeChanged Anda (ExtendedSplash_OnResize
dalam contoh) di konstruktor kelas Anda sehingga aplikasi Anda memposisikan gambar dengan benar di layar splash yang diperluas.
Tentukan metode kelas untuk memosisikan gambar di layar percikan yang diperluas
Kode ini menunjukkan cara memosisikan gambar pada halaman layar splash yang diperluas dengan splashImageRect
variabel kelas.
void PositionImage()
{
extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
extendedSplashImage.Height = splashImageRect.Height;
extendedSplashImage.Width = splashImageRect.Width;
}
(Opsional) Tentukan metode kelas untuk memposisikan kontrol kemajuan di layar percikan yang diperluas
Jika Anda memilih untuk menambahkan ProgressRing ke layar splash yang diperluas, posisikan relatif terhadap gambar layar splash. Tambahkan kode berikut ke ExtendedSplash.xaml.cs untuk memusatkan ProgressRing 32 piksel di bawah gambar.
void PositionRing()
{
splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
}
Di dalam kelas, tentukan handler untuk peristiwa yang Ditutup
Dalam ExtendedSplash.xaml.cs, respons saat peristiwa SplashScreen.Dismissed terjadi dengan mengatur dismissed
variabel kelas ke true. Jika aplikasi Anda memiliki operasi penyiapan, tambahkan ke penanganan aktivitas ini.
// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
void DismissedEventHandler(SplashScreen sender, object e)
{
dismissed = true;
// Complete app setup operations here...
}
Setelah penyiapan aplikasi selesai, navigasikan menjauh dari layar splash yang diperluas. Kode berikut mendefinisikan metode yang disebut DismissExtendedSplash
yang menavigasi ke MainPage
yang ditentukan dalam file MainPage.xaml aplikasi Anda.
async void DismissExtendedSplash()
{
await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,() => {
rootFrame = new Frame();
rootFrame.Content = new MainPage(); Window.Current.Content = rootFrame;
});
}
Di dalam kelas, tentukan handler untuk peristiwa Window.SizeChanged
Siapkan layar splash yang diperluas untuk memposisikan ulang elemennya jika pengguna mengubah ukuran jendela. Kode ini merespons ketika peristiwa Window.SizeChanged terjadi dengan menangkap koordinat baru dan memposisikan ulang gambar. Jika Anda menambahkan kontrol kemajuan ke layar percikan yang diperluas, reposisikan di dalam penanganan aktivitas ini juga.
void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
{
// Safely update the extended splash screen image coordinates. This function will be executed when a user resizes the window.
if (splash != null)
{
// Update the coordinates of the splash screen image.
splashImageRect = splash.ImageLocation;
PositionImage();
// If applicable, include a method for positioning a progress control.
// PositionRing();
}
}
Catatan
Sebelum Anda mencoba mendapatkan lokasi gambar, pastikan variabel kelas (splash
) berisi objek SplashScreen yang valid, seperti yang ditunjukkan dalam contoh.
(Opsional) Menambahkan metode kelas untuk memulihkan status sesi yang disimpan
Kode yang Anda tambahkan ke metode OnLaunched di Langkah 4: Memodifikasi handler aktivasi peluncuran menyebabkan aplikasi Anda menampilkan layar splash yang diperluas saat diluncurkan. Untuk mengonsolidasikan semua metode yang terkait dengan peluncuran aplikasi di kelas layar splash yang diperluas, Anda dapat mempertimbangkan untuk menambahkan metode ke file ExtendedSplash.xaml.cs Anda untuk memulihkan status aplikasi.
void RestoreState(bool loadState)
{
if (loadState)
{
// code to load your app's state here
}
}
Saat mengubah handler aktivasi peluncuran di App.xaml.cs, Anda juga akan diatur loadstate
ke true jika ApplicationExecutionState sebelumnya dari aplikasi Anda dihentikan. Jika demikian, RestoreState
metode memulihkan aplikasi ke status sebelumnya. Untuk gambaran umum peluncuran, penangguhan, dan penghentian aplikasi, lihat Siklus hidup aplikasi.
Saat aplikasi Anda diluncurkan, sistem meneruskan informasi layar percikan ke penanganan aktivitas aktivasi peluncuran aplikasi. Anda dapat menggunakan informasi ini untuk memposisikan gambar dengan benar di halaman layar percikan yang diperluas. Anda bisa mendapatkan informasi layar splash ini dari argumen peristiwa aktivasi yang diteruskan ke handler OnLaunched aplikasi Anda (lihat args
variabel dalam kode berikut).
Jika Anda belum mengambil alih handler OnLaunched untuk aplikasi Anda, lihat Siklus hidup aplikasi untuk mempelajari cara menangani peristiwa aktivasi.
Di App.xaml.cs, tambahkan kode berikut untuk membuat dan menampilkan layar splash yang diperluas.
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
if (args.PreviousExecutionState != ApplicationExecutionState.Running)
{
bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
Window.Current.Content = extendedSplash;
}
Window.Current.Activate();
}
Kode berikut sedikit berbeda dari cuplikan yang ditunjukkan pada langkah-langkah sebelumnya.
DismissSplash
tombol. Ketika tombol ini diklik, penanganan aktivitas, DismissSplashButton_Click
, memanggil DismissExtendedSplash
metode . Di aplikasi Anda, panggil DismissExtendedSplash
saat aplikasi Anda selesai memuat sumber daya atau menginisialisasi UI-nya.rootFrame
dan menggunakannya untuk mengatur konten jendela aplikasi.Contoh ini mencakup DismissSplash
tombol karena tidak memiliki sumber daya aplikasi untuk dimuat. Di aplikasi Anda, tutup layar splash yang diperluas secara otomatis saat aplikasi Anda selesai memuat sumber daya atau menyiapkan antarmuka pengguna awalnya.
<Page
x:Class="SplashScreenExample.ExtendedSplash"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplashScreenExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="#464646">
<Canvas>
<Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
<ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"/>
</Canvas>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
<Button x:Name="DismissSplash" Content="Dismiss extended splash screen" HorizontalAlignment="Center" Click="DismissSplashButton_Click" />
</StackPanel>
</Grid>
</Page>
Perhatikan bahwa metode dipanggil DismissExtendedSplash
dari penanganan aktivitas klik untuk tombol DismissSplash
. Di aplikasi, Anda tidak memerlukan DismissSplash
tombol. Sebagai gantinya, hubungi DismissExtendedSplash
saat aplikasi Anda selesai memuat sumber daya dan Anda ingin menavigasi ke halaman utamanya.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.ApplicationModel.Activation;
using SplashScreenExample.Common;
using Windows.UI.Core;
// The Blank Page item template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234238
namespace SplashScreenExample
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
partial class ExtendedSplash : Page
{
internal Rect splashImageRect; // Rect to store splash screen image coordinates.
private SplashScreen splash; // Variable to hold the splash screen object.
internal bool dismissed = false; // Variable to track splash screen dismissal status.
internal Frame rootFrame;
public ExtendedSplash(SplashScreen splashscreen, bool loadState)
{
InitializeComponent();
// Listen for window resize events to reposition the extended splash screen image accordingly.
// This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);
splash = splashscreen;
if (splash != null)
{
// Register an event handler to be executed when the splash screen has been dismissed.
splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);
// Retrieve the window coordinates of the splash screen image.
splashImageRect = splash.ImageLocation;
PositionImage();
// Optional: Add a progress ring to your splash screen to show users that content is loading
PositionRing();
}
// Create a Frame to act as the navigation context
rootFrame = new Frame();
// Restore the saved session state if necessary
RestoreState(loadState);
}
void RestoreState(bool loadState)
{
if (loadState)
{
// TODO: write code to load state
}
}
// Position the extended splash screen image in the same location as the system splash screen image.
void PositionImage()
{
extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
extendedSplashImage.Height = splashImageRect.Height;
extendedSplashImage.Width = splashImageRect.Width;
}
void PositionRing()
{
splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
}
void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
{
// Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
if (splash != null)
{
// Update the coordinates of the splash screen image.
splashImageRect = splash.ImageLocation;
PositionImage();
PositionRing();
}
}
// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
void DismissedEventHandler(SplashScreen sender, object e)
{
dismissed = true;
// Complete app setup operations here...
}
void DismissExtendedSplash()
{
// Navigate to mainpage
rootFrame.Navigate(typeof(MainPage));
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
void DismissSplashButton_Click(object sender, RoutedEventArgs e)
{
DismissExtendedSplash();
}
}
}
Proyek ini dibuat menggunakan templat proyek Aplikasi Kosong aplikasi UWP (XAML) di Visual Studio. OnNavigationFailed
Penanganan aktivitas dan OnSuspending
dibuat secara otomatis dan tidak perlu diubah untuk mengimplementasikan layar percikan yang diperluas. Topik ini hanya memodifikasi OnLaunched
.
Jika Anda tidak menggunakan templat proyek untuk aplikasi Anda, lihat Langkah 4: Mengubah handler aktivasi peluncuran untuk contoh yang dimodifikasi OnLaunched
yang tidak menggunakan navigasi Bingkai.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Application template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234227
namespace SplashScreenExample
{
/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
sealed partial class App : Application
{
/// <summary>
/// Initializes the singleton application object. This is the first line of authored code
/// executed, and as such is the logical equivalent of main() or WinMain().
/// </summary>
public App()
{
Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
Microsoft.ApplicationInsights.WindowsCollectors.Session);
this.InitializeComponent();
this.Suspending += OnSuspending;
}
/// <summary>
/// Invoked when the application is launched normally by the end user. Other entry points
/// will be used such as when the application is launched to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
if (System.Diagnostics.Debugger.IsAttached)
{
this.DebugSettings.EnableFrameRateCounter = true;
}
#endif
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
// Set the default language
rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];
rootFrame.NavigationFailed += OnNavigationFailed;
// Display an extended splash screen if app was not previously running.
if (e.PreviousExecutionState != ApplicationExecutionState.Running)
{
bool loadState = (e.PreviousExecutionState == ApplicationExecutionState.Terminated);
ExtendedSplash extendedSplash = new ExtendedSplash(e.SplashScreen, loadState);
rootFrame.Content = extendedSplash;
Window.Current.Content = rootFrame;
}
}
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
}
/// <summary>
/// Invoked when Navigation to a certain page fails
/// </summary>
/// <param name="sender">The Frame which failed navigation</param>
/// <param name="e">Details about the navigation failure</param>
void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}
/// <summary>
/// Invoked when application execution is being suspended. Application state is saved
/// without knowing whether the application will be terminated or resumed with the contents
/// of memory still intact.
/// </summary>
/// <param name="sender">The source of the suspend request.</param>
/// <param name="e">Details about the suspend request.</param>
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
// TODO: Save application state and stop any background activity
deferral.Complete();
}
}
}
Referensi
Pelatihan
Modul
Membuat UI di aplikasi .NET MAUI dengan menggunakan XAML - Training
Pelajari cara merancang UI untuk aplikasi .NET MAUI menggunakan XAML.