Mise en page fluide WPF et une boîte de liste

Question

Je cherche comment faire un effet sur mon application WPF 4.0 où j'ai une liste déroulante qui peut passer de la vue liste (c'est-à-dire une pile verticale de mes propres articles) à une vue grille (liste mosaïque de gauche à droite) via une animation (pas un saut de et vers). J'ai regardé dans Fluid Layout dans le mélange 4, et déconner avec elle, mais pas beaucoup de chance. Est-ce que quelqu'un a des idées sur la façon dont je pourrais créer un état visuel, qui change la disposition de la listbox en une grille (en changeant aussi le modèle d'éléments pour être des versions plus petites de miniatures) avec une belle animation?

Je sais que cela ressemble beaucoup, mais ce serait un grand effet dans mon application!

Merci beaucoup pour toute aide que vous pouvez donner, après Ill revenir si je trouve quelque chose aussi bien :)

Mark

Answer 1

Créer les deux états visuels que vous voulez et utiliser quelque chose comme Largeur = 0 à " cachez "la ListBox ou la Grille que vous ne voulez pas montrer dans l'état donné. Ensuite, il suffit d'ajouter une transition à vos États, ce qui devrait lui donner une animation assez fluide. Vous devrez peut-être jouer avec d'autres options de dimensionnement et de localisation. Les perspectives seraient une bonne possibilité dans ce cas.

Answer 2

J'ai téléchargé une version simple, que vous pouvez télécharger ici: link text

Cela montre les deux états personnalisés avec une transition. Voici un aperçu de ce que j'ai fait:

1. Créez les deux contrôles ListBox et les lier à la même source de données. Vous pouvez créer tous les modèles de données dont vous avez besoin pour chacun, mon échantillon est juste une liste d'images. Pour que cela devienne un effet de grille, j'ai remplacé le ItemsPanel de GridList par un modèle personnalisé. Tout ce que j'ai fait était de remplacer le StackPanel par UniformGrid.

2. Accédez au panneau États et créez un nouveau groupe d'états personnalisé. A l'intérieur, créer deux états personnalisés:

   A. VerticalState - cet état définit la largeur du panneau Grille à 0 et la largeur de la liste verticale à 175.

   B. GridState - cet état inverse que et définit la largeur du panneau Grille à 300 et la liste à 0.

3. Pour fournir l'effet d'animation, définissez une heure de transition par défaut. J'ai utilisé 2 secondes juste pour que vous puissiez vraiment le voir se produire.

4. Pour déclencher les états, je viens d'utiliser un ToggleButton et le comportement GoToState. Lorsque le bouton est coché, je vais à GridState et quand je ne suis pas coché, je vais à VerticalState.

5. Une fois que j'ai eu la transition entre les états de travail, je définir la largeur par défaut du GridPanel à 0 (je reconfiguré la largeur de celui-ci dans le GridState après que je l'ai fait)

C'est un exemple simple, comme toujours, YMMV. Vous aurez besoin de jouer avec les tailles et autres propriétés pour obtenir l'effet final.Et bien sûr, vous pouvez ajouter des facilités à vos transitions.

Malheureusement, l'examen d'une solution terminée ne vous montre pas vraiment comment procéder dans Blend. Découvrez Blend-O-Rama à venir dans quelques semaines, je vais essayer de montrer quelque chose de similaire. Pour l'instant, nous espérons vous emmener plus loin.