建立無障礙且自適應的介面

接著請助理建立該頁面。 請先設定你想要的 WinUI 控制項名稱，這樣它就不會替換其他 UI 框架的控制項。

要求提供 XAML

請使用此提示：

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.

請檢查產生的 XAML 中這些細節。

資料輸入

<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 表示該輸入欄位不會僅依賴預留位置文字作為其唯一標籤。 UpdateSourceTrigger=PropertyChanged 隨著使用者輸入，更新檢視模型，使指令能立即啟用。

任務收集

定義一個型別化的資料範本：

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

使用靜態函式將任務標題包含在刪除按鈕的自動化名稱中，讓螢幕閱讀器能區分各列：

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

接著繫結該集合：

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

ListView 提供捲動功能與使用者介面虛擬化。 用 ScrollViewer 將它包起來會干擾兩者。

了解更多： ListView 與 GridView 以及 使用 XAML 的資料綁定。

狀態與空置狀態

使用 InfoBar 顯示非封鎖式狀態訊息：

<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}" />

使用靜態函數將空狀態布林值 Visibility 轉換為，且不加入轉換類別：

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}" />

在新增資料前執行應用程式，確認空狀態為清除且新增 任務 按鈕被停用：

Task Tally 在空白狀態下，顯示新任務文字方塊、已停用的 [新增任務] 按鈕，以及引導新增第一個任務的說明。

自適應佈局

使用視覺狀態將按鈕移到輸入下方：

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

調整正在執行中的應用程式大小，使其跨越斷點。 提示詞中的回應性主張並不代表該版面設計有效。

了解更多： 搭配 XAML 的響應式版面。

連結特定視角的事件

該頁面載入一次持久化資料，並將任務變更委派給檢視模型：

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);
        }
    }
}

帶有 async void 回傳型別的事件處理程序在此適用，因為 XAML 事件需要 void。 應用程式中其他非同步方法則回傳 Task。

建置並執行

建立應用程式，透過套件啟動，並測試目前實作的每一項接受標準：

  1. 用滑鼠新增任務。
  2. 只用鍵盤新增任務。
  3. 完成並刪除任務。
  4. 關閉並重新啟動應用程式以確認持續性。
  5. 將下方視窗的大小調整到低於及高於 640 個有效像素。
  6. 在淺色、暗色和對比主題之間切換。

揪出 AI 錯誤並驗證已完成的應用程式

  • Last updated on