XAML - Construire layout comme application Bing News

Question

Bonjour à tous,

Je galère sur un problème de construction de layout depuis un moment : 

J'aimerai construire une app qui ressemble à l'application "News" de W8 avec

- une grosse image avec du texte sur les deux premiers tiers de l'écran

- puis une serie de tile qu'on peut scroller horizontalement. 

L'image du début est scrollé en même temps du coup.

Je pensais avoir tout dabord un Grid général, puis mettre une GridView pour le scroll horizontal, mais je ne sais pas où mettre mon image dans ce cas: Dans le gridview c'est possible ou pas? Sinon comment faire?

Merci d'avance!

---

Christophe H.

Answer 1

Bonjour

Pouvez-vous ajouter une image pour mieux comprendre votre demande?

Vous devez valider votre compte ici pour avoir la permission d'ajouter une image :

http://social.msdn.microsoft.com/Forums/en-US/9fe32cfb-ed1c-4b9d-93d9-7ff32b0106a3/verify-your-account-16?forum=reportabug

Bien cordialement,

---

Aurel BERA, MSFT
MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

Answer 2

Bonsoir,

Voilà une image pour tenter d'expliciter mon probleme : 

Voilà le layout globale de mon appli. Comme sur l'applications "News" de W8.1 (ou Bing News je ne sais plus), il y a un contenu principal mis en avant à l'ouverture (ce que j'ai appelé "main cover information") puis ensuite des items plus petits (là où j'ai mis "GroupedItems"). On peut scroller toute la page horizontalement évidemment, pas seulement les petits items.

Pour arriver à faire ça, je pensais faire un truc dans le genre : 

<Grid>

    MAIN COVER INFORMATION
    <GridView>
        <Image/>
        <Something />
    </GridView>

    GROUPED ITEMS
    <GridView>
        <GridView.ItemTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
        </GridView.ItemsPanel>
        ....
    </GridView>
</Grid>

Clairement, la solution c'est pas ça, j'ai essayé.

Du coup, comment faire?

Avec un StackPanel dans lequel on mettrai deux grid/gridview?

En espérant que ça vous aide à comprendre.

Merci :)

---

Christophe H.

Answer 3

Voir la solution proposée ici :

Cannot scroll content horizontal in windows store app

Bien cordialement,

---

Aurel BERA, MSFT
MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

Answer 4

Bonjour,

Ma question était plus sur le fait d'utiliser les bons conteneurs ou pas. Ai-je raison d'utiliser deux GridView pour afficher mes infos comme ça?

Je vais essayer d'utiliser les infos fournie sur la page que tu m'as conseillé Aurel. On verra ce que ça donne ;)

Merci!

---

Christophe H.

Answer 5

D'ailleurs, au final, si je résume ce qu'ils disent sur le lien fourni, je devrais faire ça c'est ça?

---

Christophe H.

Answer 6

Je dirais Grid\ScrollViewer\StackPanel et après un autre GridView si besoin (qui contiendra la dernière couche) ..

Bien cordialement,

---

Aurel BERA, MSFT
MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

Answer 7

Parfait! C'était exactement ça! :)

Merci beaucoup!!

---

Christophe H.