{"id":695,"date":"2014-08-15T21:22:28","date_gmt":"2014-08-15T19:22:28","guid":{"rendered":"http:\/\/dev.bratched.fr\/fr\/?p=695"},"modified":"2014-08-15T21:22:28","modified_gmt":"2014-08-15T19:22:28","slug":"icones-segoe-ui-symbol-et-c","status":"publish","type":"post","link":"https:\/\/bratched.com\/fr\/2014\/08\/15\/icones-segoe-ui-symbol-et-c\/","title":{"rendered":"Icones Segoe UI Symbol et C#"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h1>Les ic\u00f4nes Segoe UI Symbol<\/h1>\n<p>Microsoft depuis Windows 8 recommande d&rsquo;utiliser des ic\u00f4nes provenant d&rsquo;une police de caract\u00e8res \u00ab\u00a0Segoe UI Symbol\u00a0\u00bb.<\/p>\n<p>C&rsquo;est tr\u00e8s pratique, il suffit de choisir cette fonte et de conna\u00eetre ensuite le code pour directement acc\u00e9der \u00e0 l&rsquo;image vectorielle de tr\u00e8s bonne qualit\u00e9, et personnalisable avec de la couleur.<\/p>\n<p>Certains caract\u00e8res ont une largeur nulle permettant \u00e9galement de faire un contour d&rsquo;une autre couleur ou encore de cr\u00e9er un cercle autour de l&rsquo;c\u00f4ne.<\/p>\n<p>Les palettes d&rsquo;ic\u00f4nes Segoe UI Symbol sont consultables sur diff\u00e9rents sites :<\/p>\n<p>exemple :<\/p>\n<ul>\n<li><a title=\"http:\/\/www.adamdawes.com\/windows8\/win8_segoeuisymbol.html\" href=\"http:\/\/www.adamdawes.com\/windows8\/win8_segoeuisymbol.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.adamdawes.com\/windows8\/win8_segoeuisymbol.html<\/a><\/li>\n<li><a href=\"http:\/\/www.kreativekorp.com\/charset\/font.php?font=Segoe+UI+Symbol\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.kreativekorp.com\/charset\/font.php?font=Segoe+UI+Symbol<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/SgoeUiSymbol.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-698\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/SgoeUiSymbol.png\" alt=\"SgoeUiSymbol\" width=\"423\" height=\"319\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/SgoeUiSymbol.png 819w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/SgoeUiSymbol-300x226.png 300w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/SgoeUiSymbol-768x580.png 768w\" sizes=\"(max-width: 423px) 100vw, 423px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>C&rsquo;est assez simple, dans une application XAML, il suffit de codifier le caract\u00e8re avec les tags XML standards.<\/p>\n<p><!--more-->Exemple :<\/p>\n<pre class=\"lang:default decode:true\">&lt;TextBlock Text=\"&#x1F3A8;\" FontFamily=\"Segoe UI Symbol\" FontSize=\"40\" Foreground=\"Red\" \/&gt;<\/pre>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/PaletteCouleur.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-697\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/08\/PaletteCouleur.png\" alt=\"PaletteCouleur\" width=\"58\" height=\"52\" \/><\/a>Va afficher l&rsquo;icone \u00ab\u00a0palette de couleur\u00a0\u00bb\u00a0en\u00a0rouge et en taille 40.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h1>C# , Char et les codes sup\u00e9rieurs \u00e0 0xFFFF<\/h1>\n<p>Comment g\u00e9n\u00e9rer cette ic\u00f4ne c\u00f4t\u00e9 C# ? (dans un objet en DataBinding par exemple)<\/p>\n<p>On trouve pas mal d&rsquo;exemples sur les blog et forums de discussion et ce qui est conseill\u00e9 est d&rsquo;utiliser le Char et le code d&rsquo;\u00e9chappement \u00ab\u00a0\\u\u00a0\u00bb.<\/p>\n<p>Exemple : Si l&rsquo;on veut une ic\u00f4ne dans notre texte, il suffit de coder :<\/p>\n<pre class=\"lang:default decode:true\">string Text = \"\\u2708\";<\/pre>\n<p>L&rsquo;exemple suivant correspondant \u00e0 un avion.<\/p>\n<p>Le probl\u00e8me avec les codes sup\u00e9rieurs \u00e0 FFFF, c&rsquo;est que la syntaxe pr\u00e9c\u00e9dente correspondant \u00e0\u00a0la valeur d&rsquo;un Char\u00a0(16 bits)\u00a0\u00a0n&rsquo;est plus support\u00e9e.<\/p>\n<p>Et dans notre cas pr\u00e9c\u00e9dent, l&rsquo;affichage de l&rsquo;ic\u00f4ne palette ne marche pas !<\/p>\n<pre class=\"lang:default decode:true\">string Text = \"\\u1F3A8\";  \/\/ Bad result<\/pre>\n<p>Deux caract\u00e8res correspondant \u00e0 d&rsquo;autres lettres seront affich\u00e9s au lieu de notre ic\u00f4ne.<\/p>\n<p>En effet, un\u00a0Char ne peut avoir une valeur &gt; FFFF et les codes de type 1F3000 ne sont pas manipulables de cette fa\u00e7on.<\/p>\n<p>Il reste \u00e9galement un autre probl\u00e8me comment parcourir les diff\u00e9rentes ic\u00f4nes pour les afficher (pour proposer un \u00e9cran de choix par exemple), la syntaxe \u00ab\u00a0\\uFFFF\u00a0\u00bb n&rsquo;est pas adapt\u00e9e.<\/p>\n<p>Il existe une autre fa\u00e7on de faire, plus propre je pense et plus \u00e9volutive.<\/p>\n<pre class=\"lang:default decode:true\">string Text = Char.ConvertFromUtf32(0x1F3A8);<\/pre>\n<p>Cette syntaxe accepte un nombre entier en entr\u00e9e et retourne le code en utf32 sans\u00a0contrainte de taille.<\/p>\n<p>Il est alors possible de renvoyer plusieurs ic\u00f4nes en parcourant tous les symboles d\u00e9sir\u00e9s (exemple : les 250 ic\u00f4nes de la tranche 1F400)<\/p>\n<pre class=\"lang:default decode:true\">for (int i = 0; i &lt; 250; i++)\n{\n   Icones.Add(new IconeViewModel\n   {\n        Text = Char.ConvertFromUtf32(0x1F400+i)\n   });\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Les ic\u00f4nes Segoe UI Symbol Microsoft depuis Windows 8 recommande d&rsquo;utiliser des ic\u00f4nes provenant d&rsquo;une police de caract\u00e8res \u00ab\u00a0Segoe UI Symbol\u00a0\u00bb. C&rsquo;est tr\u00e8s pratique, il suffit de choisir cette fonte et de conna\u00eetre ensuite le code pour directement acc\u00e9der \u00e0 l&rsquo;image vectorielle de tr\u00e8s bonne qualit\u00e9, et personnalisable avec de la couleur. Certains caract\u00e8res [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,59,62,63],"tags":[92,4,93,58,7,8],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/695"}],"collection":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/comments?post=695"}],"version-history":[{"count":0,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/695\/revisions"}],"wp:attachment":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/media?parent=695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/categories?post=695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/tags?post=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}