Membangun antarmuka yang dapat diakses dan adaptif

Sekarang minta asisten untuk membuat halaman. Beri nama kontrol WinUI yang Anda inginkan sehingga tidak mengganti kontrol dari kerangka kerja UI lain.

Meminta XAML

Gunakan perintah ini:

Create MainPage.xaml for TaskTally.

- Use a TextBox with a visible Header and an Add task Button.
- Use ListView for the task collection. Don't wrap it in ScrollViewer.
- In each row, use a CheckBox, task title, and delete Button.
- Use InfoBar for save and error status.
- Use x:Bind and specify Mode for every binding that changes.
- For TextBox.Text, use Mode=TwoWay and
  UpdateSourceTrigger=PropertyChanged.
- Add accessible names and tooltips for icon-only commands.
- Add an empty state.
- At widths below 640 effective pixels, move the Add task button
  below the TextBox and stretch it.
- Use theme resources instead of hard-coded colors.
- Build and fix all XAML compiler and analyzer warnings.

Periksa detail ini di XAML yang dihasilkan.

Entri data

<TextBox
    x:Name="NewTaskTextBox"
    Header="New task"
    PlaceholderText="For example, review the generated XAML"
    Text="{x:Bind ViewModel.NewTaskTitle, Mode=TwoWay,
                  UpdateSourceTrigger=PropertyChanged}" />
<Button
    x:Name="AddTaskButton"
    Grid.Column="1"
    VerticalAlignment="Bottom"
    AutomationProperties.Name="Add task"
    Command="{x:Bind ViewModel.AddTaskCommand}"
    Content="Add task" />

Header yang terlihat berarti bahwa input tidak mengandalkan teks placeholder sebagai satu-satunya label. UpdateSourceTrigger=PropertyChanged memperbarui model tampilan saat pengguna mengetik, sehingga perintah dapat langsung diaktifkan.

Kumpulan tugas

Tentukan templat data yang ditik:

<DataTemplate x:Key="TaskTemplate" x:DataType="models:TaskItem">
    <Grid Padding="8" ColumnSpacing="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <CheckBox
            VerticalAlignment="Center"
            AutomationProperties.Name="{x:Bind Title}"
            Click="TaskCheckBox_Click"
            IsChecked="{x:Bind IsComplete, Mode=TwoWay}" />
        <TextBlock
            Grid.Column="1"
            VerticalAlignment="Center"
            Text="{x:Bind Title}" />
        <Button
            Grid.Column="2"
            VerticalAlignment="Center"
            AutomationProperties.Name="{x:Bind local:MainPage.DeleteTaskName(Title),
                                                Mode=OneWay}"
            Click="DeleteButton_Click"
            DataContext="{x:Bind}"
            ToolTipService.ToolTip="Delete task">
            <FontIcon Glyph="&#xE74D;" />
        </Button>
    </Grid>
</DataTemplate>

Gunakan fungsi statis untuk menyertakan judul tugas dalam nama otomatisasi tombol hapus, sehingga pembaca layar dapat membedakan antara baris:

public static string DeleteTaskName(string title) => $"Delete {title}";

Kemudian tautkan koleksi:

<ListView
    AutomationProperties.Name="Tasks"
    ItemTemplate="{StaticResource TaskTemplate}"
    ItemsSource="{x:Bind ViewModel.Tasks, Mode=OneWay}"
    SelectionMode="None" />

ListView menyediakan pengguliran dan virtualisasi UI. Membungkusnya dengan ScrollViewer mengganggu keduanya.

Pelajari selengkapnya: ListView dan GridView dan Pengikatan data dengan XAML.

Status dan keadaan kosong

Gunakan InfoBar untuk pesan status nonblokir:

<InfoBar
    IsClosable="True"
    IsOpen="{x:Bind ViewModel.IsStatusOpen, Mode=TwoWay}"
    Message="{x:Bind ViewModel.StatusMessage, Mode=OneWay}"
    Severity="{x:Bind local:MainPage.StatusSeverity(ViewModel.HasError),
                      Mode=OneWay}" />

Gunakan fungsi statis untuk mengonversi Boolean status kosong menjadi Visibility tanpa menambahkan kelas pengonversi:

public static Visibility BoolToVisibility(bool value) =>
    value ? Visibility.Visible : Visibility.Collapsed;

public static InfoBarSeverity StatusSeverity(bool hasError) =>
    hasError ? InfoBarSeverity.Error : InfoBarSeverity.Success;

<TextBlock
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Text="Add a task to get started."
    Visibility="{x:Bind local:MainPage.BoolToVisibility(ViewModel.HasNoTasks),
                        Mode=OneWay}" />

Jalankan aplikasi sebelum menambahkan data dan konfirmasikan bahwa status kosong sudah jelas dan tombol Tambahkan tugas dinonaktifkan:

Tata letak adaptif

Gunakan status visual untuk memindahkan tombol di bawah input:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="Narrow">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="AddTaskButton.(Grid.Row)" Value="1" />
                <Setter Target="AddTaskButton.(Grid.Column)" Value="0" />
                <Setter Target="AddTaskButton.HorizontalAlignment" Value="Stretch" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Standard">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="640" />
            </VisualState.StateTriggers>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Ubah ukuran aplikasi yang sedang berjalan hingga melewati breakpoint. Klaim responsif dalam perintah bukanlah bukti bahwa tata letak berfungsi.

Pelajari selengkapnya: Tata letak responsif dengan XAML.

Hubungkan event spesifik tampilan

Halaman memuat data yang bertahan sekali dan mendelegasikan perubahan tugas ke model tampilan:

public sealed partial class MainPage : Page
{
    public MainPageViewModel ViewModel { get; } = new();

    public MainPage()
    {
        InitializeComponent();
        Loaded += MainPage_Loaded;
    }

    private async void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        Loaded -= MainPage_Loaded;
        await ViewModel.InitializeAsync();
        NewTaskTextBox.Focus(FocusState.Programmatic);
    }

    private async void TaskCheckBox_Click(object sender, RoutedEventArgs e)
    {
        await ViewModel.TaskCompletionChangedAsync();
    }

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
    {
        if (sender is Button { DataContext: TaskItem task })
        {
            await ViewModel.DeleteTaskCommand.ExecuteAsync(task);
        }
    }
}

Penangan peristiwa dengan tipe pengembalian async void sesuai di sini karena peristiwa XAML memerlukan void. Metode asinkron lainnya dalam aplikasi mengembalikan Task.

Membangun dan menjalankan

Bangun aplikasi, luncurkan melalui paketnya, dan uji setiap kriteria penerimaan yang sekarang diimplementasikan:

1. Tambahkan tugas dengan mouse.
2. Tambahkan tugas hanya menggunakan keyboard.
3. Selesaikan dan hapus tugas.
4. Tutup dan mulai ulang aplikasi untuk memverifikasi persistensi.
5. Ubah ukuran jendela di bawah ini dan di atas 640 piksel efektif.
6. Beralih antara terang, gelap, dan tema kontras.

Menangkap kesalahan AI dan memverifikasi aplikasi yang sudah selesai