Tạo và tùy chỉnh biểu mẫu

Nếu bạn đang tạo một ứng dụng yêu cầu người dùng nhập một lượng thông tin đáng kể, rất có thể bạn sẽ muốn tạo một biểu mẫu để họ điền vào. Bài viết này sẽ cho bạn thấy những gì cần biết để tạo một biểu mẫu hữu ích và mạnh mẽ.

Đây không phải là một hướng dẫn. Nếu bạn muốn, hãy xem adaptive layout tutorial hướng dẫn này sẽ cung cấp cho bạn trải nghiệm hướng dẫn từng bước.

Chúng ta sẽ thảo luận về những control XAML đi vào một biểu mẫu, cách sắp xếp chúng tốt nhất trên trang của bạn và cách tối ưu hóa biểu mẫu để thay đổi kích thước màn hình. Nhưng vì một biểu mẫu là về vị trí tương đối của các phần tử trực quan, trước tiên hãy thảo luận về layout trang với XAML.

Những điều bạn cần biết là gì?

UWP không có control biểu mẫu rõ ràng mà bạn có thể thêm vào ứng dụng của mình và định cấu hình. Thay vào đó, bạn cần phải tạo biểu mẫu bằng cách sắp xếp tập hợp các phần tử giao diện người dùng trên một trang.

Để làm như vậy, bạn sẽ cần hiểu layout panels (bảng bố cục) . Đây là những vùng chứa các phần tử giao diện người dùng của ứng dụng, cho phép bạn sắp xếp và nhóm chúng. Việc đặt các bảng bố cục trong các bảng bố cục khác sẽ cho bạn rất nhiều quyền kiểm soát vị trí và cách các mục của bạn hiển thị liên quan đến nhau. Điều này cũng giúp bạn dễ dàng điều chỉnh ứng dụng của mình để thay đổi kích thước màn hình.

Đọc tài liệu này trên bảng bố cục. Bởi vì các biểu mẫu thường được hiển thị trong một hoặc nhiều cột dọc, bạn sẽ muốn nhóm các mục tương tự trong một StackPanel và sắp xếp chúng trong một RelativePanel nếu cần. Bắt đầu tập hợp một số bảng ngay bây giờ – nếu bạn cần tham chiếu, dưới đây là framework layout cơ bản cho biểu mẫu hai cột:


<RelativePanel>
<StackPanel x:Name="Customer" Margin="20">
<!--Content-->
</StackPanel>
<StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
<!--Content-->
</StackPanel>
<StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
<!--Save and Cancel buttons-->
</StackPanel>
</RelativePanel>

Những gì bên trong một biểu mẫu?

Bạn sẽ cần phải điền vào biểu mẫu của bạn với một phân loại XAML Controls. Bạn có thể quen thuộc với những điều đó, nhưng cảm thấy tự do để đọc nếu bạn cần một người bồi dưỡng. Đặc biệt, bạn sẽ muốn các control cho phép người dùng nhập văn bản hoặc chọn từ danh sách giá trị. Đây là danh sách cơ bản các tùy chọn bạn có thể thêm – bạn không cần phải đọc mọi thứ về chúng, chỉ đủ để bạn hiểu chúng trông như thế nào và cách chúng hoạt động.

  • TextBox cho phép người dùng nhập văn bản vào ứng dụng của bạn.
  • ToggleSwitch cho phép người dùng lựa chọn giữa hai tùy chọn.
  • DatePicker cho phép người dùng chọn một giá trị ngày tháng.
  • TimePicker cho phép người dùng chọn một giá trị thời gian.
  • ComboBox mở rộng để hiển thị danh sách các mục có thể chọn. Bạn có thể tìm hiểu thêm về họ tại đây

Bạn cũng có thể muốn thêm các nút, vì vậy người dùng có thể lưu hoặc hủy.

Control format trong layout của bạn

Bạn biết cách sắp xếp các bảng layout và có các mục bạn muốn thêm vào, nhưng chúng sẽ được định dạng như thế nào? Các hình thức trang có một số hướng dẫn thiết kế cụ thể. Đọc qua các phần về Các loại biểu mẫu và layout để được tư vấn hữu ích.

Với lời khuyên đó, bạn nên bắt đầu thêm control lựa chọn vào bố cục của bạn, chắc chắn rằng chúng được cung cấp nhãn và đặt cách nhau đúng cách. Ví dụ, đây là phác thảo bare-bones cho một biểu mẫu một trang đơn sử dụng layout trên, các control và hướng dẫn thiết kế:


<RelativePanel>
<StackPanel x:Name="Customer" Margin="20">
<TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
<TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
<TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
<RelativePanel>
<TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
<ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
<!--List of valid states-->
</ComboBox>
</RelativePanel>
</StackPanel>
<StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
<TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
<DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
<TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
</StackPanel>
<StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
<Button Content="Save" Margin="24" />
<Button Content="Cancel" Margin="24" />
</StackPanel>
</RelativePanel>

Vui lòng tùy chỉnh các control của bạn với nhiều thuộc tính hơn để có trải nghiệm hình ảnh tốt hơn.

Làm cho layout của bạn phản hồi

Người dùng có thể xem giao diện người dùng của bạn trên nhiều thiết bị có độ rộng màn hình khác nhau. Để đảm bảo rằng họ có trải nghiệm tốt bất kể màn hình được sử dụng, bạn nên sử dụng thiết kế đáp ứng.

Các trang Responsive layouts with XAML đưa ra một cái nhìn tổng quan chi tiết về làm thế nào để thực hiện điều này. Hiện tại, sẽ tập trung vào các fluid layout và visual states in XAML (trạng thái trực quan trong XAML).

Phác thảo biểu mẫu cơ bản mà chúng tôi đã đặt cùng nhau đã là fluid layout, vì nó phụ thuộc chủ yếu vào vị trí tương đối của các control chỉ sử dụng tối thiểu các kích thước và vị trí pixel cụ thể. Tuy nhiên, hãy lưu ý hướng dẫn này cho nhiều giao diện người dùng hơn mà bạn có thể tạo trong tương lai.

Quan trọng hơn đối với bố cục đáp ứng là trạng thái trực quan. Trạng thái trực quan xác định các giá trị thuộc tính được áp dụng cho một phần tử đã cho khi một điều kiện được đưa ra là đúng. Đọc về cách làm điều này trong xaml, và sau đó thực hiện chúng vào biểu mẫu của bạn. Dưới đây là những hình ảnh rất cơ bản như trong mẫu trước đó.


<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>

<VisualState.Setters>
<Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
<Setter Target="Associate.(RelativePanel.Below)" Value=""/>
<Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<RelativePanel>
<!--Previous 3 stack panels-->
</RelativePanel>

Việc tạo trạng thái trực quan cho một loạt các kích thước màn hình cũng không thực tế, cũng không phải là một vài khả năng có tác động đáng kể đến trải nghiệm người dùng của ứng dụng của bạn. Bạn có thể đọc thêm tại đây.

Thêm hỗ trợ khả năng tiếp cận

Giờ đây bạn đã có layout được xây dựng tốt đáp ứng những thay đổi về kích thước màn hình, điều cuối cùng bạn có thể làm để cải thiện trải nghiệm người dùng là làm cho ứng dụng của bạn có thể truy cập được. Có rất nhiều thứ có thể đi vào điều này, nhưng trong một hình thức như thế này thì nó dễ nhìn hơn. Tập trung vào những điều sau:

  • Hỗ trợ bàn phím – đảm bảo thứ tự các phần tử trong bảng giao diện người dùng của bạn khớp với cách các phần tử được hiển thị trên màn hình, do đó người dùng có thể dễ dàng duyệt qua chúng.
  • Hỗ trợ trình đọc màn hình – đảm bảo tất cả các control của bạn có tên mô tả.

Khi bạn tạo layout phức tạp hơn với nhiều yếu tố hình ảnh hơn, bạn sẽ muốn tham khảo danh sách kiểm tra khả năng tiếp cận để biết thêm chi tiết. Hơn hết, trong khi khả năng tiếp cận là không cần thiết cho một ứng dụng, giúp nó tiếp cận và thu hút một lượng khán giả lớn hơn.

Xa hơn nữa

Mặc dù bạn đã tạo biểu mẫu ở đây, các khái niệm layout và control được áp dụng trên tất cả các giao diện người dùng XAML mà bạn có thể xây dựng. Vui lòng quay lại các tài liệu mà chúng tôi đã liên kết với bạn và thử nghiệm với biểu mẫu bạn có, thêm các tính năng giao diện người dùng mới và tùy chỉnh thêm trải nghiệm người dùng. Nếu bạn muốn hướng dẫn từng bước thông qua các tính năng layout chi tiết hơn, hãy xem hướng dẫn bố cục thích nghi.

Các biểu mẫu cũng không phải tồn tại trong chân không – bạn có thể tiến lên một bước và nhúng của bạn vào một master/details pattern hoặc một control xoay vòng. Hoặc nếu muốn làm việc trên code-behind cho biểu mẫu của mình, bạn có thể muốn bắt đầu với tổng quan về sự kiện.

API và tài liệu hữu ích

Dưới đây là tóm tắt nhanh về các API và các tài liệu hữu ích khác để giúp bạn bắt đầu làm việc với Ràng buộc dữ liệu.

API hữu ích

API Mô tả
Các control hữu ích cho các biểu mẫu Một danh sách các control đầu vào hữu ích để tạo biểu mẫu và hướng dẫn cơ bản về nơi sử dụng chúng.
Lưới Bảng điều khiển để sắp xếp các phần tử trong layout nhiều hàng và nhiều cột.
RelativePanel Một bảng điều khiển cho các mục arraging liên quan đến các yếu tố khác và ranh giới của bảng điều khiển.
StackPanel Một bảng điều khiển để sắp xếp các phần tử thành một đường ngang hoặc dọc.
VisualState Cho phép bạn đặt giao diện của các thành phần giao diện người dùng khi chúng ở trạng thái cụ thể.

 

Tài liệu hữu ích

Đề tài Mô tả
Tổng quan về khả năng tiếp cận Tổng quan quy mô rộng về các tùy chọn khả năng tiếp cận trong ứng dụng.
Danh sách kiểm tra khả năng tiếp cận Danh sách kiểm tra thực tế để đảm bảo ứng dụng của bạn đáp ứng các tiêu chuẩn khả năng tiếp cận.
Tổng quan về sự kiện Chi tiết về việc thêm và cấu trúc các sự kiện để xử lý các hành động UI.
Các hình thức Hướng dẫn chung để tạo biểu mẫu.
Bảng layout Cung cấp tổng quan về các loại bảng bố cục và nơi sử dụng chúng.
Mẫu chính / chi tiết Một mẫu thiết kế có thể được triển khai xung quanh một hoặc nhiều biểu mẫu.
Control xoay vòng Một điều khiển có thể chứa một hoặc nhiều biểu mẫu.
Thiết kế đáp ứng Tổng quan về nguyên tắc thiết kế đáp ứng quy mô lớn.
Layout đáp ứng với XAML Thông tin cụ thể về trạng thái trực quan và các triển khai khác về thiết kế đáp ứng.
Kích thước màn hình cho thiết kế đáp ứng Hướng dẫn về kích thước màn hình mà bố cục đáp ứng nên được sắp xếp.

 

Các code sample hữu ích

Code sample Mô tả
Hướng dẫn bố cục thích ứng Trải nghiệm hướng dẫn từng bước thông qua bố cục thích nghi và thiết kế đáp ứng.
Cơ sở dữ liệu đơn hàng Xem layout và biểu mẫu đang hoạt động trên sample doanh nghiệp multi-page.
Thư viện điều khiển XAML Xem lựa chọn các điều khiển XAML và cách chúng được triển khai.
Các code sample bổ sung Chọn Controls, layout, and text trong danh sách thả xuống danh mục để xem các code sample có liên quan.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *