Giao diện Metro UI của Windows Phone 7 chỉ đơn giản là các tấm lát hình vuông/chữ nhật trên nền đen hoặc trắng. Màu sắc của các tấm lát cũng xoay quan các màu cơ bản mặc định. Vì vậy, nhiều người dùng cho rằng giao diện của WP7 hơi nhàm chán. Tuy nhiên, mới đây trang Windows Phone Hacker đã cho đăng tải một công cụ giúp tùy biến khá sâu vào giao diện Metro UI và qua đó, mỗi thiết bị sẽ mang tính đặc trưng và giao diện cá nhân hóa hơn.
Tất cả những gì cần làm là tải về bộ công cụ Themes for WP7 (tại đây) sau đó giải nén ra một thư mục. Nhấn đúp vào file ThemeConfig để khởi chạy công cụ và bắt đầu tùy biến theme theo ý muốn. Các tính năng của công cụ được Windows Phone Hacker giới thiệu bao gồm:
Cho phép tùy biến mọi Tile (tấm lát). Trên WP7 thì mỗi Tile tương đương 1 ứng dụng hay 1 hub và công cụ cho phép bạn tùy biến các ứng dụng hệ thống cũng như ứng dụng từ phía thứ 3;
Sử dụng hình ảnh riêng để làm hình nền cho mỗi Tile;
Sử dụng màu sắc cơ bản để điều chỉnh hiệu ứng trong suốt trên mỗi Tile;
Cho phép truy xuất và truy nhập theme;
Và nhiều tính năng khác cho bạn thoải mái tùy biến giao diện Metro UI.
*Lưu ý: để sử dụng công cụ và triển khai (deploy) theme đã tùy biến trên thiết bị thì thiết bị phải được mở khóa lập trình viên (developer unlock) và chạy phiên bản WP7.5 (Mango). Dưới đây là video hướng dẫn của Windows Phone Hacker và một số hình ảnh chụp từ máy mình (LG C900k).
Thử nghiệm tùy biến theme:
Sau khi tải về công cụ và chạy file ThemeConfig thì bạn sẽ vào giao diện chính của công cụ như hình dưới đây:
Giao diện chính của công cụ bao gồm 2 khung. Khung bên trái (ô màu trắng) chúng ta có các nút như Phone, People, Messaging, Marketplace, v.v... Đây chính là các hub cơ bản của WP7 trên giao diện Metro UI. Bên phải (ô màu đen) là giao diện Metro UI trực quan và mọi tùy biến của bạn sẽ được hiển thị ngay trên giao diện này.
Chúng ta có các nút:
Import - nhập các theme mà bạn đã làm, tải về hoặc từ nhiều nguồn khác;
Export - xuất theme ra một vị trí nào đó trên máy, phòng khi bạn muốn biến đổi nữa thì có thể Import lại;
Save XAP - lưu theme đã tùy biến ra một file XAP;
Deploy - cài theme dưới dạng file .xap vào máy ngay sau khi tùy biến;
Default Theme - xóa hết mọi tùy biến và trả lại theme mặc định;
Background Image - cho phép tùy biến hình nền cho các Tile tức các tấm lát như Phone, People, v.v...
Add app - thêm một ứng dụng vào danh sách bên trên;
Remove - gỡ bỏ ứng dụng trong danh sách.
Bây giờ, mình sẽ thử "chế" lại theme mặc định của Metro UI.
I. Thay đổi icon cho Tile (ứng dụng):
Để thay đổi icon cho một ứng dụng, trong danh sách ở ô màu trắng, bạn nhấp đôi vào tên ứng dụng cần thay icon. Ví dụ: mình thay đổi icon cho Phone:
Mình tìm một icon khác có hình cái điện thoại để thay cho icon hình tai nghe màu trắng đơn điệu của WP7. *Lưu ý: nên lấy các icon định dạng .png để chủ thể icon nổi lên giữa ô vuông.
Nhấp đôi vào chữ "Phone", một khung tùy biến sẽ hiện ra, ở đây chúng ta có:
Name: tên của ứng dụng và bạn có thể thay đổi tên nó thành "Điện thoại";
GUID: viết tắt của Globally Unique Idetifier - giá trị của biểu tượng ứng dụng;
Image: biểu tượng của ứng dụng, bạn nhấn vào nút "..." bên cạnh để thay icon cho ứng dụng.
Sau khi tìm đường dẫn tới icon cần thay, icon mới sẽ thay thế icon hình ống nghe màu trắng như trong hình. Bạn tiếp tục nhấn nút "Add" bên dưới.
Ở khung bên phải, bạn có thể thấy icon sau khi thay sẽ như thế nào. Mình đã thay icon ống nghe màu trắng thành icon cái điện thoại màu đỏ rất ngộ nghĩnh .
Tương tự với các ứng dụng khác, Metro UI sau khi tùy biến sẽ như thế này . Để icon đồng đều hơn thì bạn nên tìm một bộ icon set và lựa ra các icon phù hợp.
II. Thay đổi icon ứng dụng từ hãng thứ 3:
Những ứng dụng kể trên đều là các ứng dụng mặc định của WP7. Nếu như bạn muốn thay đổi icon cho một ứng dụng nào đó tải về từ Marketplace thì làm theo cách sau:
Ví dụ, mình muốn thay đổi icon cho ứng dụng Twitter. *Lưu ý: Máy phải được cài sẵn ứng dụng cần đổi icon, ở đây là Twitter. Bạn nhấn vào nút "Add app" bên dưới. Một cửa sổ tùy biến hiện ra và bạn phải tự đặt tên cho ứng dụng.
Name: mình đặt tên là "Twitter";
GUID: để trống;
Image: tìm đường dẫn đến icon cần thay;
Search: phần này rất quan trọng, bạn nhập đúng tên ứng dụng đã cài và cần thay icon vào khung, nhấn nút Search. Hệ thống sẽ tự động tìm trên Marketplace ứng dụng đó để tạo đường dẫn giữa icon và ứng dụng.
Khung trắng bên dưới: sau khi tìm ra ứng dụng, bạn nhấp vào ứng dụng thích hợp trong danh sách, giá trị GUID sẽ tự động được thêm vào.
Tiếp tục nhấn nút "Add", bạn sẽ thấy tên ứng dụng được thêm vào khung màu trắng và bên khung màu đen thể hiện giao diện đã tùy biến, ứng dụng Twitter sẽ xuất hiện với icon được thay thế. Cách làm với các ứng dụng khác tương tự như trên. Nếu bạn muốn thay icon cho ứng dụng Facebook thì tìm từ khóa "Facebook" trong khung Search.
III. Thay hình nền cho ứng dụng:
Để thay hình nền cho ứng dụng thì bạn bấm vào nút "Background Theme". *Lưu ý, đây chỉ là hình nền của Tile, icon của ứng dụng sẽ nằm trên hình nền này và bạn nên chọn hình nên có bề ngang 480 px để có kết quả tốt nhất. Sau khi bấm vào nút "Background Theme", một không tùy biến sẽ hiện ra. Trong danh sách bên trái là những icon nằm trên hình nền. Vì khi bạn thay hình nền thì hình nền sẽ được chia theo số lượng ô vuông tương ứng với số ứng dụng trong danh sách. Bên phải, chúng ta có 1 khung "Image" và bạn nhấn vào nút "..." để chọn hình nền.
Ở ngoài cùng bên phải là các tùy chỉnh về độ trong suốt của icon ứng dụng trên nền. Bạn có thể gõ mã màu vào khung HEX Color hoặc kéo thanh cuộn để tăng giảm độ trong suốt.
Sau khi tùy chỉnh xong, nhấn vào nút "Render from Background" và trên đây là kết quả.
IV. Cài đặt:
Sau khi tùy biến theme, bạn có 2 lựa chọn để cài đặt. *Lưu ý: Máy của bạn phải được mở khóa lập trình viên (developer unlock) và phải chạy phiên bản Windows Phone 7.5 (Mango).
Cách 1: Bạn kết nối điện thoại vào PC và nhấn nút "Deploy" trên giao diện chính của công cụ Themes for WP7. Cách 2: Trong trường hợp không deploy được thì bạn lưu theme đã tạo ra một file .xap bằng nút "Save XAP". Sau đó, dùng một ứng dụng để cài đặt như TomXAP Installer hay Windows Phone Device Manager để cài vào máy.
Dưới đây là một số hình chụp screenshot của máy mình sau khi cài đặt theme tự tạo:
Từ trái qua: Theme vừa tạo sẽ hiện trong danh sách ứng dụng (Theme); nhấp vào Theme để đưa (Pin) các ứng dụng ra ngoài màn hình chính -> Toàn bộ Home Screen với icon ứng dụng đã thay đổi.
.
. Để icon đồng đều hơn thì bạn nên tìm một bộ icon set và lựa ra các icon phù hợp.
