{"id":765,"date":"2014-10-29T01:03:53","date_gmt":"2014-10-29T00:03:53","guid":{"rendered":"http:\/\/dev.bratched.fr\/fr\/?p=765"},"modified":"2019-07-18T22:46:22","modified_gmt":"2019-07-18T20:46:22","slug":"migration-du-roundbutton-en-universal-app","status":"publish","type":"post","link":"https:\/\/bratched.com\/fr\/2014\/10\/29\/migration-du-roundbutton-en-universal-app\/","title":{"rendered":"Migration du RoundButton en Universal App"},"content":{"rendered":"<h1>Introduction<\/h1>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButtonsScreenshot.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-770\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButtonsScreenshot.png\" alt=\"AppBarButtonsScreenshot\" width=\"692\" height=\"293\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButtonsScreenshot.png 692w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButtonsScreenshot-300x127.png 300w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/a><\/p>\n<p>En Windows Phone, les Round Button (Bouton antour\u00e9 d&rsquo;un cercle) \u00e9taient utilis\u00e9s \u00e0 travers un Framework additionnel le <a href=\"http:\/\/coding4fun.codeplex.com\/\">Coding4Fun Toolkit<\/a>.<\/p>\n<p>Exemple d&rsquo;utilisation en Windows Phone Silverlight :<\/p>\n<p>Ajout de l&rsquo;espace de nommage dans la page<\/p>\n<pre class=\"lang:default decode:true\">xmlns:c4f=\"clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls\"<\/pre>\n<p>Utilisation dans la page Xaml<\/p>\n<pre class=\"lang:default decode:true\">&lt;c4f:RoundButtonImageSource=\"Images\/EditImage.png\"\n    Content=\"Edition\"\n    Command=\"{Binding EditCommand}\" \/&gt;<\/pre>\n<p>Avec les Universal Apps, ce Framework se fait malheureusement encore un peu attendre et de nombreux composants standards peuvent remplacer en natif ce fameux Round Button.<\/p>\n<h1>AppBarButtoon<\/h1>\n<p>Le AppbarButton est un bouton rond qui s&rsquo;affiche normalement dans la barre de t\u00e2che en bas de l&rsquo;\u00e9cran.Mais il est \u00e9galement possible de l&rsquo;utiliser n&rsquo;importe o\u00f9 dans la page comme l&rsquo;ancien RoundButton.<!--more--><\/p>\n<p>La syntaxe est tr\u00e8s proche de l&rsquo;ancien\u00a0Round Button.<\/p>\n<pre class=\"lang:default decode:true \">&lt;AppBarButton   \n        Icon=\"Edit\"\n        Label=\"Edition\"                              \n        Command=\"{Binding EditCommand}\"\n        IsCompact=\"False\"\/&gt;<\/pre>\n<ul>\n<li>Command : permet de \u00ab\u00a0Binder\u00a0\u00bb l&rsquo;ex\u00e9cution du bouton de votre ViewModel (pas de changement).<\/li>\n<li>Label permet d&rsquo;afficher un libell\u00e9 sous le bouton (ancien Content)<\/li>\n<li>IsCompact : Permet d&rsquo;afficher ou non le Label. Si True, la hauteur est limit\u00e9e \u00e0 la taille de l&rsquo;ic\u00f4ne.<\/li>\n<li>Icon permet d&rsquo;afficher un symbole ic\u00f4ne parmi une liste d&rsquo;images pr\u00e9d\u00e9finies.<\/li>\n<\/ul>\n<h1>Les 3 fa\u00e7ons de d\u00e9finir l&rsquo;ic\u00f4ne<\/h1>\n<p>Le composant permet\u00a0de d\u00e9finir l&rsquo;icone suivant\u00a03 syntaxes diff\u00e9rentes\u00a0:<\/p>\n<h2>1-Les styles pr\u00e9d\u00e9finis<\/h2>\n<p>C&rsquo;est las solution la plus simple : utiliser les styles de la propri\u00e9t\u00e9 Icon.<\/p>\n<p>La liste contient 192 styles pr\u00e9d\u00e9finis. <a href=\"http:\/\/msdn.microsoft.com\/fr-fr\/library\/windows\/apps\/xaml\/jj841127.aspx\">http:\/\/msdn.microsoft.com\/fr-fr\/library\/windows\/apps\/xaml\/jj841127.aspx<\/a><\/p>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButton_Icon.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-769\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButton_Icon.png\" alt=\"AppBarButton_Icon\" width=\"322\" height=\"215\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButton_Icon.png 322w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/AppBarButton_Icon-300x200.png 300w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/a><\/p>\n<p>Inconv\u00e9nient, la liste ne contient que les 192 ic\u00f4nes pr\u00e9d\u00e9finis et si vous souhaitez une autre image cette solution n&rsquo;est pas adapt\u00e9e.<\/p>\n<p>Exemple :<\/p>\n<pre class=\"lang:default decode:true \">&lt;AppBarButton Grid.Row=\"1\" Grid.Column=\"0\" Icon=\"Accept\"\/&gt;<\/pre>\n<h2>2-FontIcon<\/h2>\n<p>Il est possible de d\u00e9velopper la propri\u00e9t\u00e9 Icon et d&rsquo;utiliser FontIcon pour pr\u00e9ciser un symbole venant d&rsquo;une fonte sp\u00e9cifique.<\/p>\n<p>Vous pouvez utiliser SegoeUI Symbol (incluse dans Windows 8 et Windows phone 8) pour directement utiliser un symbole.<\/p>\n<pre class=\"lang:default decode:true\">&lt;AppBarButton Grid.Row=\"1\" Grid.Column=\"1\"&gt;\n   &lt;AppBarButton.Icon&gt;\n       &lt;FontIcon Glyph=\"&#xE170;\" FontFamily=\"Segoe UI Symbol\"\/&gt;\n   &lt;\/AppBarButton.Icon&gt;\n&lt;\/AppBarButton&gt;<\/pre>\n<p>Il est \u00e9galement possible d&rsquo;utiliser une autre fonte TTF, non standard dans Windows\/Windows Phone.<\/p>\n<p>Par exemple avec la fonte awesome (<a href=\"http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/#new\">http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/#new<\/a>).<\/p>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/Project-FontAwesame.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-771\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/Project-FontAwesame.png\" alt=\"Project-FontAwesame\" width=\"412\" height=\"110\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/Project-FontAwesame.png 412w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/10\/Project-FontAwesame-300x80.png 300w\" sizes=\"(max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<p>Pour cela il suffit de l&rsquo;incorporer aux ressources du projet sous forme d&rsquo;une ressource \u00ab\u00a0content\u00a0\u00bb (exemple : Assets\/Fonts\/fontawesome-webfont.ttf) et utiliser la syntaxe suivante<\/p>\n<pre class=\"lang:default decode:true\">&lt;AppBarButton Grid.Row=\"1\" Grid.Column=\"2\"&gt;\n   &lt;AppBarButton.Icon&gt;\n       &lt;FontIcon Glyph=\"&#xF085;\" FontFamily=\"Assets\/Fonts\/fontawesome-webfont.ttf#FontAwesome\"\/&gt;   \n   &lt;\/AppBarButton.Icon&gt;\n&lt;\/AppBarButton&gt;<\/pre>\n<h1>3-Bitmap Icon<\/h1>\n<p>Il est \u00e9galement possible d&rsquo;utiliser une ic\u00f4ne bitmap personnelle (exemple Sample.png). C&rsquo;est le m\u00eame proc\u00e9d\u00e9 que celui du RoundButton.<\/p>\n<pre class=\"lang:default decode:true \">&lt;AppBarButton&gt;\n   &lt;AppBarButton.Icon&gt;\n       &lt;BitmapIcon UriSource=\"Assets\/SamplePng.png\" \/&gt;\n   &lt;\/AppBarButton.Icon&gt;\n&lt;\/AppBarButton&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction En Windows Phone, les Round Button (Bouton antour\u00e9 d&rsquo;un cercle) \u00e9taient utilis\u00e9s \u00e0 travers un Framework additionnel le Coding4Fun Toolkit. Exemple d&rsquo;utilisation en Windows Phone Silverlight : Ajout de l&rsquo;espace de nommage dans la page xmlns:c4f=\u00a0\u00bbclr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls\u00a0\u00bb Utilisation dans la page Xaml &lt;c4f:RoundButtonImageSource=\u00a0\u00bbImages\/EditImage.png\u00a0\u00bb Content=\u00a0\u00bbEdition\u00a0\u00bb Command=\u00a0\u00bb{Binding EditCommand}\u00a0\u00bb \/&gt; Avec les Universal Apps, ce Framework se fait [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,62,63],"tags":[70,120,121,122,123,58],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/765"}],"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=765"}],"version-history":[{"count":1,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/765\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/765\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/media?parent=765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/categories?post=765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/tags?post=765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}