Phát triển Windows 10 - Giao diện người dùng thích ứng
Ứng dụng Universal Windows Platform (UWP) có thể chạy trên nhiều thiết bị khác nhau và mỗi thiết bị có dạng đầu vào riêng, độ phân giải màn hình, mật độ DPI và các đặc điểm độc đáo khác.
Trong Windows 10, với sự trợ giúp của các điều khiển chung, bảng bố cục và công cụ mới, bạn có thể dễ dàng điều chỉnh giao diện người dùng của mình với các thiết bị mà ứng dụng của bạn có thể chạy. Ví dụ: khi ứng dụng UWP của bạn đang chạy trên máy tính để bàn, thiết bị di động hoặc trên máy tính bảng, bạn có thể điều chỉnh giao diện người dùng để tận dụng độ phân giải màn hình, kích thước màn hình và mật độ DPI khác nhau.
Trong Windows 10, bạn có thể dễ dàng nhắm mục tiêu giao diện người dùng của mình đến nhiều thiết bị với các tính năng sau:
Bạn có thể nâng cao giao diện người dùng của mình cho các độ phân giải màn hình và kích thước màn hình khác nhau bằng cách sử dụng các bảng điều khiển và bảng bố cục chung.
Xử lý đầu vào thông thường cho phép bạn nhận đầu vào thông qua bàn di chuột, bút, chuột, bàn phím hoặc bộ điều khiển như bộ điều khiển Xbox của Microsoft.
Với sự trợ giúp của Công cụ, bạn có thể thiết kế giao diện người dùng ứng dụng của mình có thể thích ứng với các độ phân giải màn hình khác nhau.
Tỷ lệ thích ứng điều chỉnh theo sự khác biệt về độ phân giải và DPI trên các thiết bị.
Trong Windows 10, bạn có thể dễ dàng sắp xếp, thay đổi kích thước và định vị các ứng dụng theo bất kỳ cách nào bạn muốn. Nó cũng cung cấp một số loại linh hoạt để người dùng sử dụng ứng dụng của bạn theo cách họ muốn. Trong Windows 10, có nhiều cách khác nhau để triển khai các kỹ thuật đáp ứng trong ứng dụng UWP của bạn, vì vậy ứng dụng này trông rất đẹp bất kể kích thước màn hình hoặc cửa sổ là bao nhiêu.
VisualStateManager
Trong Windows 10, VisualStateManagerlớp có hai cơ chế mới với sự trợ giúp mà bạn có thể triển khai thiết kế đáp ứng trong các ứng dụng UWP của mình. Cái mớiVisualState.StateTriggers cho phép nhà phát triển kiểm tra các điều kiện nhất định như chiều cao cửa sổ hoặc chiều rộng cửa sổ và sau đó VisualState.Setters Các API xác định các trạng thái trực quan để đáp ứng với các điều kiện nhất định đó.
Chúng ta hãy xem ví dụ dưới đây, trong đó một số điều khiển được thêm vào bảng điều khiển ngăn xếp.
<Page
x:Class = "UWPAdaptiveUI.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:UWPAdaptiveUI"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window
width is >=720 effective pixels. -->
<AdaptiveTrigger MinWindowWidth = "720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target = "myPanel.Orientation" Value = "Horizontal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name = "myPanel" Orientation = "Vertical">
<TextBlock Text = "Windows 10 Tutorials: Text block 1. "
Style = "{ThemeResource BodyTextBlockStyle}"/>
<TextBlock Text = "Windows 10 Tutorials: Text block 2. "
Style = "{ThemeResource BodyTextBlockStyle}"/>
<TextBlock Text = "Windows 10 Tutorials: Text block 3. "
Style = "{ThemeResource BodyTextBlockStyle}"/>
</StackPanel>
</Grid>
</Page>Hiện nay VisualStateManager, sẽ điều chỉnh hướng của bảng điều khiển ngăn xếp dựa trên chiều rộng của cửa sổ. Nếu chiều rộng> = 720, thì hướng sẽ trở thành Ngang nếu không nó sẽ vẫn theo chiều dọc. Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy cửa sổ sau chứa ba khối văn bản theo thứ tự dọc.
Hãy để chúng tôi thay đổi kích thước chiều rộng của cửa sổ trên và bạn sẽ thấy cửa sổ sau:
Bây giờ bạn có thể thấy rằng các khối văn bản theo thứ tự ngang.
RelativePanel
RelativePanelcó thể được sử dụng để bố trí các phần tử UI bằng cách thể hiện mối quan hệ không gian giữa các phần tử. Hãy để chúng tôi lấy một ví dụ trong đó một số hình chữ nhật được tạo trong bảng điều khiển tương đối.
<Page
x:Class = "UWPAdaptiveUI.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:UWPAdaptiveUI"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target = "GreenRect.(RelativePanel.RightOf)"
Value = "BlueRect" />
<Setter Target = "GreenRect.(RelativePanel.AlignRightWithPanel)"
Value = "True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel BorderBrush = "Gray" BorderThickness = "10">
<Rectangle x:Name = "RedRect" Fill = "Red" MinHeight = "100"
MinWidth = "100"/>
<Rectangle x:Name = "BlueRect" Fill = "Blue" MinHeight = "100"
MinWidth = "100" RelativePanel.RightOf = "RedRect" />
<!-- Width is not set on the green and yellow rectangles.
It's determined by the RelativePanel properties. -->
<Rectangle x:Name = "GreenRect" Fill = "Green" MinHeight = "100"
RelativePanel.Below = "BlueRect" RelativePanel.AlignLeftWith = "RedRect"
RelativePanel.AlignRightWith = "BlueRect"/>
<Rectangle Fill = "Yellow" MinHeight = "100" RelativePanel.Below = "GreenRect"
RelativePanel.AlignLeftWith = "BlueRect"
RelativePanel.AlignRightWithPanel = "True"/>
</RelativePanel>
</Grid>
</Page>Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy cửa sổ sau.
Khi bạn thay đổi kích thước của cửa sổ trên, bạn sẽ thấy rằng hình chữ nhật màu xanh lá cây hiện đã được điều chỉnh ở hàng trên cùng bên trái của hình chữ nhật màu xanh lam như hình dưới đây.
