Windows 10 – Icon control

FontIcon, SymbolIcon, BitmapIcon

Tuy đã xuất hiện trong Windows/Windows phone 8.1, nhưng những icon control này thường ít được sử dụng trong xaml. Giờ đây khi đến với môi trường Windows 10, mình khuyên các bạn nên sử dụng chúng với mục đích tối ưu giao diện của mình với các hỗ trợ có sẵn, đồng thời đồng bộ với giao diện tổng thể của Windows 10.

FontIcon

Sẽ được sử dụng mạnh mẽ trong Windows 10, control này dùng để hiển thị các icon ở dạng font. Bộ icon font này là Segoe MDL2 Assets (Microsoft Design Language), đã được Microsoft hỗ trợ sẵn trong Win10.

Chi tiết về bộ font gồm tên, hình, mã hex, mã dec tại đây:

FontIcon in Windows10 App
FontIcon in Windows 10 App

Cách sử dụng cũng khá đơn giản: bạn tìm hình ảnh mình cần ở link trên, chép mã hex (hoặc dec cũng được).

Format: &#[dec] hoặc [hex];

Lưu ý: Nếu là mã hex sẽ có kí tự ‘x’ phía trước số hex.

FontIcon XAML
FontIcon XAML

Chép nguyên mã vào thuộc tính Glyph là có ngay icon tương ứng. Do đây là 1 kí tự trong bộ font, không phải là hình ảnh nên ta sẽ chỉnh kích thước của icon bằng thuộc tính FontSize.

Note: Các icon trong bộ Segoe MDL2 Assets đều đã được thiết kế theo Magic number của Windows 10 là 4. Do đó ta cũng nên để FontSize theo magic number này để đạt hiệu quả giao diện tốt nhất. Microsoft đã khuyên các developer nên dùng FontIcon để hiển thị các icon trong app.

Windows 10 Magic number is 4
Windows 10 Magic number is 4

Một số icon thường dùng trong app:

Mostly used Icon
Mostly used Icon

SymbolIcon

Control này thực ra là 1 bộ thu gọn của FontIcon ở trên, tuy nhiên nó hỗ trợ thêm hệ thống enum Symbol giúp xác định icon nhanh gọn trực quan hơn.

Chi tiết các symbol xem tại đây

SymbolIcon XAML
SymbolIcon XAML

Result

Lưu ý: SymbolIcon hình như không có thuộc tính nào điều chỉnh kích cỡ icon, do đó có trick là đặt vào 1 Viewbox để nó giúp ta scale mọi thứ lên.

BitmapIcon

Có tác dụng như 1 Image. Ở WP 8.1 control này được đặt trong AppBar để hiện thị icon theo hình ảnh mình muốn. Chỉ nên dùng khi bộ icon có sẵn không có, hoặc ta muốn tùy biến thêm, nên khi dùng cần chú ý đến chất lượng hình ảnh đưa vào để tránh dùng ảnh chất lượng quá kém.

BitmapIcon XAML
Add BitmapIcon XAML

Đưa vào thuộc tính UriSource 1 đường dẫn đến file hình để hiển thị. Có thể dùng Width, Height để điểu chỉnh kích thước.

Merge icon

Đối với FontIcon và SymbolIcon, các Icon hiển thị ra đều có nền trống (Opacity = 0). Do đó ta có thể chồng nhiều icon lên nhau để tạo 1 icon mới.

Ví dụ:

Chồng lần lượt icon hình trái tim màu đỏ, icon viền tim đen, icon dấu x:

Merge Icon XAML
Merge Icon XAML

Sẽ cho ra icon sau:

Merge
Merge result

Bộ Segoe MDL2 Assets này có hơn 1000 icons thỏa sức cho bạn sử dụng và sáng tạo.

Code demo cho phần này xem tại đây

Happy coding… 😀

Leave a Reply

Your email address will not be published. Required fields are marked *