11 December 2012 ~ 0 Comments

Créer une application windows 8

Hi,

j’ai beaucoup aimé l’interface Metro (Modern UI) de la nouvelle version de l’OS de  Microsoft ( Windows 8 )

interface metro windows 8

du coup je voulais créer ma première application pour me familiariser un peu avec la nouvelle plateforme de développement WinRT, j’ai commencé par un tutoriel sur le site MSDN   ” Créer votre première application du Windows Store en C#

mais pour plus de détails, il y a un très bon Hands-on-Lab qui traite la plupart des fonctionnalités de la plateforme (Orientation, Semantic Zoom, Search, Tiles and notifications…)

Dans cet article nous allons voir comment modifier le GridView principal afin qu’il soit comme le Windows store App en utilisant C#/xaml. créer un simple projet windows 8 store et choisissez le Template Application Grille.

Créer une application windows 8  dans Windows 8 storeapp-300x168 firstscreen-300x168 Metro style dans Windows 8

Nous utilisons dans ce tutoriel deux techniques pour arriver a ce résultat :

  1. VariableSized GridView Item
  2. DataTemplateSelector

1. VariableSized GridView Item

Pour attribuer des  tailles différentes aux items du GridView il faut redéfinir la méthode “PrepareContainerForItemOverride” , 1 ère chose a faire on crée une class qui va contenir les différentes tailles

public static class LayoutSizes
    {
        public static Size PrimaryItem = new Size(6, 2);
        public static Size SecondarySmallItem = new Size(3, 1);
        public static Size SecondaryTallItem = new Size(3, 1);
        public static Size OtherSmallItem = new Size(3, 1);

    }

après on crée notre propre class GridView dérivée de GridView

public class MyGridView : GridView
{
        private int rowVal;
        private int colVal;
        private List<Size> _sequence;
        public MyGridView()
        {
            _sequence = new List<Size> {
                LayoutSizes.PrimaryItem,
                LayoutSizes.SecondarySmallItem, LayoutSizes.SecondarySmallItem,
                LayoutSizes.SecondarySmallItem,
                LayoutSizes.SecondaryTallItem,
                LayoutSizes.OtherSmallItem, LayoutSizes.OtherSmallItem, LayoutSizes.OtherSmallItem
            };

        }
    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
    {
            base.PrepareContainerForItemOverride(element, item);
            SampleDataItem dataItem = item as SampleDataItem;

            int index = -1;

            if (dataItem != null)
            {
                index = dataItem.Group.Items.IndexOf(dataItem);
            }

            if (index >= 0 && index < _sequence.Count)
            {
                colVal = (int)_sequence[index].Width;
                rowVal = (int)_sequence[index].Height;
            }
            else
            {
                colVal = (int)LayoutSizes.OtherSmallItem.Width;
                rowVal = (int)LayoutSizes.OtherSmallItem.Height;
            }

            VariableSizedWrapGrid.SetRowSpan(element as UIElement, rowVal);
            VariableSizedWrapGrid.SetColumnSpan(element as UIElement, colVal);
    }
}

il nous reste maintenant une dernière, c’est le fichier xaml, il faut ajouter le namespace de la class GridView qu’on vient de créer par exemple namespace App2.DataModel  et dans le fichier xaml on ajoute ce namespace au autres namespaces qui se trouve dans le 1er nœud xmlns:model=”using:App2.DataModel“ 

namespace-300x165 Modern UI

dans ce même fichier modifier <GridView…. par le votre <model:MyGridView….

gridviewperso variableSized grid item

La prochaine étape porte sur le choix des DataTemplates des  items…

stay tuned we’ll be back soon 8)

Leave a Reply

You must be logged in to post a comment.

aymensoft |
damnexhermann23cooporation |
constructionsurgeogebra |
Unblog.fr | Créer un blog | Annuaire | Signaler un abus | dpine
| radiovoiture
| html0css