{"id":307,"date":"2013-02-06T10:59:56","date_gmt":"2013-02-06T09:59:56","guid":{"rendered":"http:\/\/ree7.fr\/blog\/?p=307"},"modified":"2022-08-08T06:47:41","modified_gmt":"2022-08-08T05:47:41","slug":"tirer-partie-des-ecrans-hd-depuis-une-application-windows-phone-7-1","status":"publish","type":"post","link":"http:\/\/www.ree7.fr\/blog\/2013\/02\/tirer-partie-des-ecrans-hd-depuis-une-application-windows-phone-7-1\/","title":{"rendered":"Tirer partie des \u00e9crans HD depuis une application Windows Phone 7.1"},"content":{"rendered":"<p>Depuis la sortie de Windows Phone 8, les terminaux peuvent avoir diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran, contrairement \u00e0 l&rsquo;obligatoire 800&#215;480 sous Windows Phone 7.<br \/>\nCes hautes r\u00e9solutions sont encore pour l&rsquo;instant r\u00e9serv\u00e9es aux mod\u00e8les haut de gamme (HTC 8X, Nokia Lumia 920), et l&rsquo;on pourrait \u00eatre tent\u00e9 de garder nos habitudes de tester nos applis principalement en 800&#215;480&#8230; mais ce serait dommage de priver les possesseurs d&rsquo;\u00e9crans HD de l&rsquo;extra-crisp pour lequel ils g\u00e9n\u00e9ralement allong\u00e9 100 ou 200\u20ac de plus \ud83d\ude09<\/p>\n<div style=\"width: 547px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"aligncenter\" src=\"http:\/\/i.msdn.microsoft.com\/dynimg\/IC611135.png\" alt=\"\" width=\"537\" height=\"468\" \/><p class=\"wp-caption-text\">Source : MSDN<\/p><\/div>\n<p>La MSDN propose un guide pour supporter les multiples r\u00e9solutions ici : <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windowsphone\/develop\/jj206974(v=vs.105).aspx\">http:\/\/msdn.microsoft.com\/en-us\/library\/windowsphone\/develop\/jj206974(v=vs.105).aspx<\/a><\/p>\n<p>Je vais ajouter quelques tips pour vous permettre de tirer au mieux parti des \u00e9crans HD depuis vos applications existantes (WP7.1).<br \/>\nPremi\u00e8rement, pour ce qui est des nouvelles tuiles (S\/M\/L pour WP7.8 et 8), la librairie <a href=\"http:\/\/mangopollo.codeplex.com\/\">Mangopollo<\/a> de l&rsquo;incontournable Rudy Huyn (disponible via NuGet) vous fera gagner un temps pr\u00e9cieux.<\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que la taille tous les assets \u00e0 chang\u00e9 (oui, c&rsquo;est p\u00e9nible mais c&rsquo;est pour la bonne cause) :<br \/>\n&#8211; L&rsquo;ic\u00f4ne de votre application est d\u00e9sormais en 100&#215;100 pixels<br \/>\n&#8211; La tuile taille Medium est d\u00e9sormais en 336&#215;336 pixels (au lieu de 173&#215;173). (Voir le guide concernant les <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windowsphone\/develop\/jj206971(v=vs.105).aspx\">http:\/\/msdn.microsoft.com\/en-us\/library\/windowsphone\/develop\/jj206971(v=vs.105).aspx<\/a>)<\/p>\n<div style=\"width: 696px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"\" src=\"http:\/\/i.msdn.microsoft.com\/dynimg\/IC619133.png\" alt=\"\" width=\"686\" height=\"393\" \/><p class=\"wp-caption-text\">Source : MSDN<\/p><\/div>\n<p>&#8211; La r\u00e9solution des boutons de l&rsquo;ApplicationBar augmente aussi et passe de 48&#215;48 \u00e0 76&#215;76. Nul besoin de garder les anciennes r\u00e9solutions (si vous faites l&rsquo;analogie avec les @2x des \u00e9crans r\u00e9tina), l&rsquo;OS fera la conversion vers les r\u00e9solutions inf\u00e9rieures de lui m\u00eame. Vous trouverez toutes les ic\u00f4nes classiques du syst\u00e8me en haute r\u00e9solution dans le dossier du SDK Windows Phone 8 : C:\\Program Files (x86)\\Microsoft SDKs\\Windows Phone\\v8.0\\Icons.<\/p>\n<p>Enfin, temps de parler de ce qui fait vraiment votre application : vos images !<br \/>\nDeux approches sont possibles :<br \/>\n&#8211; se baser sur la plus grande r\u00e9solution possible et laisser le t\u00e9l\u00e9phone downsizer l&rsquo;image. C&rsquo;est totalement viable pour les assets de votre application embarqu\u00e9s dans le XAP (cela \u00e9vite de dupliquer les images et par la m\u00eame d&rsquo;augmenter la taille de votre XAP).<br \/>\n&#8211; choisir dynamiquement l&rsquo;image en fonction de la r\u00e9solution de l&rsquo;\u00e9cran : c&rsquo;est la meilleure approche pour les images t\u00e9l\u00e9charg\u00e9es depuis le web, ceux qui ont un \u00e9cran classique ne g\u00e2chent pas leur forfait data pour des pixels qu&rsquo;ils ne verront pas tout en laissant les possesseurs d&rsquo;\u00e9crans HD jouir de tous leurs pixels. Si tant est bien entendu que vous avez en face un webservice qui vous permet de t\u00e9l\u00e9charger vos assets dans diff\u00e9rentes r\u00e9solutions, mais \u00e7a c&rsquo;est une autre histoire.<\/p>\n<p>Et l\u00e0 probl\u00e8me : comment d\u00e9terminer la taille d&rsquo;image ad\u00e9quate dans une application construite avec le SDK 7.1 ?<br \/>\nLa reflection vient \u00e0 la rescousse pour nous permettre d&rsquo;acc\u00e9der aux nouvelles propri\u00e9t\u00e9s du SDK 8.0 si tant est que l&rsquo;application tourne sous Windows Phone 8. Voici une classe vous permettant de transformer des pixels logiques (800&#215;480) en pixels r\u00e9els :<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n\t\/\/\/ &lt;remarks&gt;\r\n\t\/\/\/ This source is subject to the Microsoft Public License (Ms-PL).\r\n\t\/\/\/ By Pierre Belin, @pleasereset - www.ree7.fr\/blog\r\n\t\/\/\/ &lt;\/remarks&gt;\r\n\tpublic class PhoneSDKUtils\r\n\t{\r\n\t\tprivate static readonly Version _targetedVersion8 = new Version(8, 0);\r\n\t\tprivate static readonly Version _targetedVersion78 = new Version(7, 10, 8858);\r\n\r\n\t\tprivate static int ScaleFactor = 100;\r\n\r\n\t\tstatic PhoneSDKUtils()\r\n\t\t{\r\n\t\t\tif (Environment.OSVersion.Version &gt;= _targetedVersion8)\r\n\t\t\t{\r\n\t\t\t\tType hostContentType = App.Current.Host.Content.GetType();\r\n\t\t\t\tobject scaleFactorValue = hostContentType.GetProperty(&quot;ScaleFactor&quot;).GetValue(App.Current.Host.Content, null);\r\n\t\t\t\tScaleFactor = (int)scaleFactorValue;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\/\/\/ &lt;summary&gt;\r\n\t\t\/\/\/ Converts a logical pixels screen (800x480) size to real screen pixels size\r\n\t\t\/\/\/ according to the current device's ScaleFactor\r\n\t\t\/\/\/ &lt;\/summary&gt;\r\n\t\tpublic static int GetScreenPixelSize(int logicalSize)\r\n\t\t{\r\n\t\t\treturn (logicalSize * ScaleFactor) \/ 100;\r\n\t\t}\r\n\r\n\t\t\/\/\/ &lt;summary&gt;\r\n\t\t\/\/\/ Converts a logical pixels screen (800x480) size to real screen pixels size\r\n\t\t\/\/\/ according to the current device's ScaleFactor\r\n\t\t\/\/\/ &lt;\/summary&gt;\r\n\t\tpublic static double GetScreenPixelSize(double logicalSize)\r\n\t\t{\r\n\t\t\treturn (logicalSize * ScaleFactor) \/ 100.0;\r\n\t\t}\r\n\t}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Depuis la sortie de Windows Phone 8, les terminaux peuvent avoir diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran, contrairement \u00e0 l&rsquo;obligatoire 800&#215;480 sous Windows Phone 7. Ces hautes r\u00e9solutions sont encore pour l&rsquo;instant r\u00e9serv\u00e9es aux mod\u00e8les haut de gamme (HTC 8X, Nokia Lumia 920), et l&rsquo;on pourrait \u00eatre tent\u00e9 de garder nos habitudes de tester nos applis principalement en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[7,18],"tags":[52,20],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p19lzH-4X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/posts\/307"}],"collection":[{"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":1,"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":588,"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/posts\/307\/revisions\/588"}],"wp:attachment":[{"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ree7.fr\/blog\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}