Comment créer la barre de défilement de WPF pour qu'elle ressemble à la barre de défilement d'iTunes?

Question

Je voudrais créer une barre de défilement dans WPF qui ressemble à celle vue dans le flux de couverture d'iTunes. Voir l'image de la barre de défilement ci-dessous, qui montre également le reflet de la pochette de l'album sous la barre de défilement.

Scrollbar Image http://www.barramsoft.com/pub/images/scrollbar2.jpg

ci-dessous est un contrôle de base scrollbar en XAML. Comment puis-je obtenir à partir de ce qui précède à un regard de barre de défilement de flux de couverture d'iTunes? L'échantillon de code source complet prêt à l'emploi serait préféré.

Answer 1

Démarrer avec le ScrollBar ControlTemplate Exemple dans MSDN de http://msdn.microsoft.com/en-us/library/ms742173.aspx (qui est beaucoup plus facile à modifier que le style de fenêtre, vous pouvez obtenir de Blend ou ShowMeTheTemplate)

commencer à modifier le modèle, changer les couleurs, les modèles pour les boutons fléchés et le pouce jusqu'à ce que cela ressemble à ce que vous voulez.

Answer 2

La première tâche consiste à afficher la zone défilée sous la barre de défilement. Vous devez modifier la structure du contrôle ScrollViewer. Par défaut, il s'agit d'un 2x2 Grid, de sorte que la barre de défilement horizontale se trouve sous la zone défilée. Modifiez son modèle pour placer la zone déroulante et la barre de défilement dans la même cellule, en alignant verticalement la barre de défilement en bas.

La deuxième partie consiste à styliser la barre de défilement elle-même. Je ne crois pas que cela puisse être fait avec des rectangles arrondis.

J'extrait habituellement le modèle pour le modifier en utilisant le mélange, il y a aussi un outil gratuit ShowMeTheTemplate.

Answer 3

Avez-vous Expression Blend? Sinon, je vous recommande de l'installer (il existe une version d'essai de 30 jours si vous n'avez pas de licence MSDN).

Il existe un certain nombre de tutoriels Expression Blend là-bas here's a good place to start par exemple.

Fondamentalement, vous copiez le modèle pour la barre de défilement standard qui vous donnera tous les éléments qui vont le composer. Vous changez ensuite ce à quoi chaque élément ressemble jusqu'à ce que vous le voyiez comme vous le souhaitez. Il y aura une assez grande quantité d'essais et d'erreurs dans ce processus.

Answer 4

Jetez un coup d'œil au code WPF Themes project au codeplex. Le thème Expression Blend (clair/foncé) est très proche de l'exemple que vous avez fourni. Il est publié sous Ms PL.