{"id":747,"date":"2014-09-25T22:46:42","date_gmt":"2014-09-25T20:46:42","guid":{"rendered":"http:\/\/dev.bratched.fr\/fr\/?p=747"},"modified":"2014-09-25T22:46:42","modified_gmt":"2014-09-25T20:46:42","slug":"migration-du-longlistselector-en-universal-apps-2eme-partie","status":"publish","type":"post","link":"https:\/\/bratched.com\/fr\/2014\/09\/25\/migration-du-longlistselector-en-universal-apps-2eme-partie\/","title":{"rendered":"Migration du LongListSelector en Universal Apps &#8211; 2\u00e8me Partie"},"content":{"rendered":"<p>Nous poursuivons l&rsquo;article sur <a title=\"Migration du LongListSelector en Universal Apps\" href=\"http:\/\/dev.bratched.fr\/fr\/migration-du-longlistselector-en-universal-apps\/\">la migration du LongListSelector (WP8 et WP8.Silverlight) vers les Universal Apps (WP8 et W8.x)<\/a><\/p>\n<p>Nous avons vu dans le pr\u00e9c\u00e9dent article la migration des listes simples et des listes regroup\u00e9es.<\/p>\n<p>Dans cet article nous allons voir maintenant la migration du \u00ab\u00a0JumpList\u00a0\u00bb.<\/p>\n<p>Le JumpList permet d&rsquo;offrir des raccourcis de navigation lors du clic (ou tap) sur un regroupement.<\/p>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0003.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-753\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0003.png\" alt=\"Migrer le Jumplist en Universal Apps - Liste regtroup\u00e9e\" width=\"100\" height=\"167\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0003.png 768w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0003-180x300.png 180w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0003-614x1024.png 614w\" sizes=\"(max-width: 100px) 100vw, 100px\" \/><\/a>\u00a0<a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0004.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-752\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0004.png\" alt=\"wp_ss_20140925_0004\" width=\"100\" height=\"166\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0004.png 768w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0004-180x300.png 180w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/09\/wp_ss_20140925_0004-614x1024.png 614w\" sizes=\"(max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n<h1><strong>Avant avec le LongListSelector<\/strong><\/h1>\n<p>En WP8.0 Silverlight, la gestion du JumpList passe obligatoirement par la d\u00e9finition du style associ\u00e9 \u00e0 la propri\u00e9t\u00e9 JumpListStyle. Sans cette association, la Jumplist ne fonctionnait pas.<\/p>\n<p><!--more--><\/p>\n<p>Exemple d&rsquo;utilisation (on ajoute juste\u00a0la propri\u00e9t\u00e9 \u00ab\u00a0JumListStyle\u00a0\u00bb \u00e0 l&rsquo;exemple de <a title=\"Migration du LongListSelector en Universal Apps\" href=\"http:\/\/dev.bratched.fr\/fr\/migration-du-longlistselector-en-universal-apps\/\">l&rsquo;article pr\u00e9c\u00e9dent<\/a>)<\/p>\n<pre class=\"lang:default decode:true\">&lt;phone:LongListSelectorItemsSource=\"{Binding MessagesByGroup}\"\n  GroupHeaderTemplate=\"{StaticResource MessageGroupHeader}\"\n  ItemTemplate=\"{StaticResource ItemTemplate}\"\n  IsGroupingEnabled=\"True\"\n  HideEmptyGroups =\"true\"\n  JumpListStyle=\"{StaticResource LongListSelectorJumpListStyle}\" \/&gt;<\/pre>\n<p>Puis le style d\u00e9finit les 3 propri\u00e9t\u00e9s essentielles :<\/p>\n<ul>\n<li>GridCellSize : Hauteur et Largeur d&rsquo;affichage des donn\u00e9es dans la Jump Liste<\/li>\n<li>LayoutMode : Type d&rsquo;affichage en liste ou en grille (ici Grille)<\/li>\n<li>ItemTemplate : L&rsquo;affichage des items de la liste ou Grille.<\/li>\n<\/ul>\n<p>Cet \u00e9tat est g\u00e9r\u00e9 avec la syntaxe suivante\u00a0\u00a0\u00a0 :<\/p>\n<pre class=\"lang:default decode:true\">&lt;Style x:Key=\"LongListSelectorJumpListStyle\" TargetType=\"phone:LongListSelector\"&gt;\n   &lt;Setter Property=\"GridCellSize\" Value=\"113,113\"\/&gt;\n   &lt;Setter Property=\"LayoutMode\" Value=\"Grid\" \/&gt;\n   &lt;Setter Property=\"ItemTemplate\"&gt;\n     &lt;Setter.Value&gt; \n        &lt;DataTemplate&gt; \n            &lt;Border Background=\"Red\" Width=\"113\" Height=\"113\" Margin=\"6\" &gt; \n              &lt;TextBlock Text=\"{Binding Key}\"\/&gt;\n\t&lt;\/Border&gt; \n        &lt;\/DataTemplate&gt;\n     &lt;\/Setter.Value&gt;\n    &lt;\/Setter&gt;\n&lt;\/Style&gt;<\/pre>\n<p>Remarquez que le Binding se fait encore une fois avec \u00ab\u00a0{Binding Key}\u00a0\u00bb<\/p>\n<h1><strong>Maintenant sur les Universal Apps<\/strong><\/h1>\n<p>Le passage d&rsquo;une Jumplist \u00e0 une liste \u00ab\u00a0Normale\u00a0\u00bb va se faire \u00e0 l&rsquo;aide d&rsquo;un SemanticZoom.<\/p>\n<p>Le SemanticZoom d\u00e9finit 2 \u00e9tats : ZoomIn (Etat d\u00e9ploy\u00e9) et ZoomOut (Etat r\u00e9sum\u00e9 &#8211; la Jumplist).<\/p>\n<p>Cet \u00e9tat est g\u00e9r\u00e9 avec la syntaxe suivante :<\/p>\n<pre class=\"lang:default decode:true\">&lt;SemanticZoom&gt;\n    &lt;SemanticZoom.ZoomedInView&gt;\n      \/\/ ListView D\u00e9tail\n   &lt;\/SemanticZoom.ZoomedInView&gt;\n   &lt;SemanticZoom.ZoomedOutView&gt;\n     \/\/ \"JumpList\"\n   &lt;\/SemanticZoom.ZoomedOutView&gt;\n&lt;\/SemanticZoom&gt;\n\n<\/pre>\n<p>Remarque : Il est recommand\u00e9 de positionner la propri\u00e9t\u00e9<\/p>\n<pre class=\"lang:default decode:true\">ScrollViewer.IsHorizontalScrollChainingEnabled=\"False\"<\/pre>\n<p>dans chaque \u00e9l\u00e9ment contenu dans le SemanticZoom afin de ne pas r\u00e9percuter les actions de la liste sur le Zoom (molette de la souris en Windows par exemple).<\/p>\n<p>Dans la partie ZoomInView, on retrouve notre ListView pr\u00e9c\u00e9dente.<\/p>\n<p>Dans la partie \u00ab\u00a0Jumplist\u00a0\u00bb la ZoomOutView, on va d\u00e9finir un GridView pour afficher les raccourcis.<\/p>\n<p>Le Binding se fait toujours sur la liste regroup\u00e9e \u00ab\u00a0{StaticResource ViewSourceMessagesByGroup}\u00a0\u00bb. Les regroupement s&rsquo;affichent en utilisant la propri\u00e9t\u00e9 \u00ab\u00a0CollectionGroups\u00a0\u00bb.<\/p>\n<pre class=\"lang:default decode:true\">&lt;GridView Background=\"Black\"                  \n    ItemsSource=\"{Binding Source={StaticResource ViewSourceMessagesByGroup}, Path=CollectionGroups}\"\n    ItemTemplate=\"{StaticResource JumplistTemplate}\"\n    ScrollViewer.IsHorizontalScrollChainingEnabled=\"False\"&gt;\n    &lt;GridView.ItemsPanel&gt;\n        &lt;ItemsPanelTemplate&gt;\n            &lt;ItemsWrapGrid \n            ItemWidth=\"180\" \n            ItemHeight=\"100\" \n            Orientation=\"Horizontal\"\n            MaximumRowsOrColumns=\"2\"\/&gt;\n        &lt;\/ItemsPanelTemplate&gt;\n    &lt;\/GridView.ItemsPanel&gt;\n&lt;\/GridView&gt;\n<\/pre>\n<ul>\n<li>ItemTemplate permet de d\u00e9finir le mod\u00e8le d&rsquo;affichage utilis\u00e9 pour cette partie. Le pr\u00e9c\u00e9dent template de la Jumplist va pouvoir \u00eatre utilis\u00e9 <strong>presque<\/strong> sans aucun changement. Le \u00ab\u00a0presque\u00a0\u00bb concerne le Binding permettant d&rsquo;afficher les \u00e9l\u00e9ments. Il devra r\u00e9f\u00e9rencer <strong>Group.Key<\/strong> \u00e0 la place de<strong> Key<\/strong> qui \u00e9tait utilis\u00e9 seul auparavant.<\/li>\n<\/ul>\n<p>Exemple :<\/p>\n<pre class=\"lang:default decode:true \">&lt;DataTemplate x:Key=\"JumplistTemplate\"&gt;\n    &lt;Grid Margin=\"10\" Width=\"180\"&gt;\n        &lt;Border Background=\"Red\" CacheMode=\"BitmapCache\"&gt;\n            &lt;TextBlock \n            Text=\"{Binding Group.Key}\" \n            Style=\"{StaticResource SubheaderTextBlockStyle}\"                                               \n            TextTrimming=\"WordEllipsis\"\n            VerticalAlignment=\"Center\"\n            HorizontalAlignment=\"Stretch\" \n            Foreground=\"White\"\n            Margin=\"8\"\/&gt;\n        &lt;\/Border&gt;\n    &lt;\/Grid&gt;\n&lt;\/DataTemplate&gt;\n<\/pre>\n<p>( Text=\u00a0\u00bb{Binding<strong> Group.Key<\/strong>}\u00a0\u00bb remplace la syntaxe Text=\u00a0\u00bb{Binding <strong>Key<\/strong>}\u00a0\u00bb )<\/p>\n<ul>\n<li>ItemsPanelTemplate permet de param\u00e9trer l&rsquo;affichage de la grille : Orientation d\u00e9finit l&rsquo;ordre d&rsquo;affichage (par colonne ou par ligne),<\/li>\n<li>ItemWidth et ItemHeight, les dimensions des \u00e9l\u00e9ments<\/li>\n<li>MaximumRowsOrColumns le nombre d&rsquo;\u00e9lements par colonne (exemple avec Orientation=\u00a0\u00bbHorizontal\u00a0\u00bb).<\/li>\n<\/ul>\n<p>Au final le code source de la liste avec les raccourcis ressemble \u00e0 \u00e7a :<\/p>\n<pre class=\"lang:default decode:true\">&lt;SemanticZoom&gt;\n    &lt;SemanticZoom.ZoomedInView&gt;\n        &lt;ListView\n            ItemsSource=\"{Binding Source={StaticResource ViewSourceMessagesByGroup} }\"    \n            ItemTemplate=\"{StaticResource NotifyItemTemplate}\"\n            ScrollViewer.IsHorizontalScrollChainingEnabled=\"False\"&gt;\n            &lt;ListView.GroupStyle&gt;\n                &lt;GroupStyle \n                    HidesIfEmpty=\"True\" \n                    HeaderTemplate=\"{StaticResource MessageGroupHeader}\"&gt;\n                &lt;\/GroupStyle&gt;\n            &lt;\/ListView.GroupStyle&gt;\n        &lt;\/ListView&gt;\n    &lt;\/SemanticZoom.ZoomedInView&gt;\n\n    &lt;SemanticZoom.ZoomedOutView&gt;\n    &lt;GridView Background=\"Black\"                  \n        ItemsSource=\"{Binding Source={StaticResource ViewSourceMessagesByGroup}, Path=CollectionGroups}\"\n        ItemTemplate=\"{StaticResource JumplistTemplate}\"\n        ScrollViewer.IsHorizontalScrollChainingEnabled=\"False\"&gt;\n        &lt;GridView.ItemsPanel&gt;\n            &lt;ItemsPanelTemplate&gt;\n                &lt;ItemsWrapGrid \n                ItemWidth=\"180\" \n                ItemHeight=\"100\" \n                Orientation=\"Horizontal\"\n                MaximumRowsOrColumns=\"2\"\/&gt;\n            &lt;\/ItemsPanelTemplate&gt;\n        &lt;\/GridView.ItemsPanel&gt;\n    &lt;\/GridView&gt;\n    &lt;\/SemanticZoom.ZoomedOutView&gt;\n&lt;\/SemanticZoom&gt;\n<\/pre>\n<p>Vous savez maintenant comment migrer le LongListSelector d&rsquo;un projet pour qu&rsquo;il fonctionne dans une Universal app qui sera accessible depuis Windows Phone 8.1 et Windows 8.<\/p>\n<p>Le code source complet (avec la gestion de la Jumplist) se trouve ici :<\/p>\n<p><a title=\"T\u00e9l\u00e9chargement de l'exemple\" href=\"http:\/\/1drv.ms\/1rwq30Q\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-633\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/05\/download-10-icon-256.png\" alt=\"T\u00e9l\u00e9chargement du Code\" width=\"100\" height=\"100\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/05\/download-10-icon-256.png 256w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/05\/download-10-icon-256-150x150.png 150w\" sizes=\"(max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous poursuivons l&rsquo;article sur la migration du LongListSelector (WP8 et WP8.Silverlight) vers les Universal Apps (WP8 et W8.x) Nous avons vu dans le pr\u00e9c\u00e9dent article la migration des listes simples et des listes regroup\u00e9es. Dans cet article nous allons voir maintenant la migration du \u00ab\u00a0JumpList\u00a0\u00bb. Le JumpList permet d&rsquo;offrir des raccourcis de navigation lors du [&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":[107,3,108,58,8],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/747"}],"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=747"}],"version-history":[{"count":0,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/747\/revisions"}],"wp:attachment":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/media?parent=747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/categories?post=747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/tags?post=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}