Cũng giống như lập trình Web, trong lập trình WPF hay Windows 8 Modern UI, Windows Phone 8 bạn có thể  tận dụng các Font có các ký tự được thiết kế với các hình ảnh cụ thể mà bạn mong muôn. Đây cũng chỉ là dùng ký tự được chúng ta làm nhãn cho control. Ví dụ như nhãn của một Button chẳng hạn, chắc nó là phổ biến nhất. Bởi vì là ký tự nên bạn có thể tùy chỉnh các định dạng cho font , màu sắc của nó

     Hình bên là 5 button, sử dụng font Seo UI Symbol  để sử dụng các ký tự có hình ảnh tương tự .
Để sử dụng, bạn gán giá trị FontFamily bằng tên font bạn muốn. Sau đó nhập nội dung  bằng mã ký hiệu đó

Để biết mã của các ký tự mình muốn bạn có thể vào Symbol trên MS Word hoặc có thể vào Geek Champ để xem các symbol của font Seo UI Symbol. Bạn Click vào icon sẽ có mã code XAML cho bạn. Ngoài loại font này, có thể xem thêm mẫu font Wingdings

<Button Content="&#xe105;" FontFamily="Segoe UI Symbol" FontSize="100"  Foreground="CornflowerBlue" Background="Transparent"/>
<Button Content="&#xe106;" FontFamily="Segoe UI Symbol"  FontSize="100" Foreground="Black" Background="Transparent" />
<Button Content="&#x1f0a1;" FontFamily="Segoe UI Symbol"  FontSize="100" Foreground="OrangeRed" Background="Transparent" />
<Button Content="&#x1f43e;" FontFamily="Segoe UI Symbol" FontSize="100"  Foreground="Green" Background="Transparent" />
<Button Content="&#x1f383;" FontFamily="Segoe UI Symbol" FontSize="100" Foreground="Red" Background="Transparent"/>

Một cách khác, chúng ta có thể sử dụng Canvas trong XAML. Các hình ảnh được thiết kế dưới dạng vector, thật ra chẳng khác font là mấy nhưng nhiều lúc bạn chỉ muốn dùng 1 vài hình ảnh làm icon hoặc bạn tự thiết kế nó mà các font khác  không có hình ảnh này. Nếu tạo mới một bộ font thì không cần thiết lắm.
Ta có thể tạo một resource riêng để sử dụng. Tìm kiếm internet cách thiết kế font, vector . . . hoặc convert hình ảnh thành Canvas

Một hình ảnh Canvas đại loại như thế này

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_adobe_acrobat" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="40.9131" Height="42.7219" Canvas.Left="19.254" Canvas.Top="16.6412" Stretch="Fill" Fill="#FF000000" Data="F1 M 27.7221,48.2991C 22.1667,50.6667 21.4941,56.8336 22.766,55.4523C 30.2426,47.0743 34.4269,40.2614 36.76,35.125C 31.6002,25.9387 31.8796,14.635 37.9093,16.9458C 42.5866,18.7382 40.3545,23.0832 40.3545,23.0832C 40.3545,23.0832 39.7309,17.771 36.8125,18.6042C 36.116,18.7783 35.2582,25.4654 38.0971,31.8382C 40.0108,26.4778 39.6257,23.694 39.6257,23.694C 39.6257,23.694 44.4664,24.9554 40.0649,35.2833C 40.6006,36.0286 41.2037,36.7499 41.8815,37.4343C 42.8865,38.5858 43.894,39.5811 44.8903,40.4409C 47.8562,39.3684 50.7859,38.5921 53.0717,38.5921C 60.3583,38.5921 60.1667,45.9167 60.1667,45.9167C 58.5426,42.2264 53.5996,41.9021 48.2032,42.8653C 54.5071,46.7006 59.6426,45.6317 59.6426,45.6317C 59.106,50.0635 52.0743,50.4677 44.1396,43.7901C 39.8148,44.9614 35.6532,46.619 33.0903,47.7215C 26.4927,57.8007 20.6758,62.7377 19.4259,56.8004C 17.8425,49.2796 27.7221,48.2991 27.7221,48.2991 Z M 39.7906,39.4675L 38.7217,38.1415L 37.6342,40.1754C 36.7219,41.8103 35.8082,43.3751 34.9025,44.8555C 36.7884,43.9056 39.2316,42.725 41.8117,41.6458C 41.1395,40.9716 40.4646,40.2461 39.7906,39.4675 Z "/>
</Canvas>

Bạn có thể vào trang Modern UI Icons để tìm kiếm tài nguyên về canvas.

[WPF] Sample: Sử Dụng Font Để Thay Thế Icon

Related Tags :
WritingObsolete