2009-05-03 14 views
4

J'ai besoin d'une liste avec des fonctionnalités similaires à IPhone pour Silverlight. C'est, défilement animé, et cliquez et faites glisser pour faire défiler. Le défilement continuera un peu après l'événement de la souris en fonction de la "vitesse" du déplacement. J'ai recherché et trouvé aucun fournisseur de contrôle fournissant ceci. Alors question est comment dois-je le construire? J'ai besoin de quelques conseils pour commencer.IPhone comme le défilement sur Silverlight ListBox

Il y a deux parties à cette question:

Partie 1, Comment obtenir le défilement d'animation de la zone de liste.

Partie 2, Comment construire un défilement "draggable", je suppose que je devrais mettre une toile sur le dessus et suivre le mouseevent, et simuler un peu de physique. Quelques indices ici auraient été géniaux.

Merci Larsi.

Répondre

3

Il ya quelque temps, j'ai fait un contrôle qui a fait quelque chose comme ça. Tout ce que j'ai fait, c'est mettre un panneau de pile dans une toile. Ajustez simplement le canvas.top de l'ensemble du panneau de la pile sur une mousemove (lorsque la souris est enfoncée). Pour animer le défilement après un mouseup, il suffit de suivre la quantité déplacée et d'appliquer une animation à la propriété canvas.top.

+0

Salut! C'était une façon intelligente et simple de le faire. Merci. – Larsi

1

Ce sera plus facile dans Silverlight 3 que Silverlight 2, mais pas impossible à 2.

Cette vidéo de MIX 09, Building Microsoft Silverlight Controls, devrait vous aider.

+0

Merci pour le lien. J'espère que nous aurons également des contrôles semblables à ceux de l'iPhone dans la version 3.0 du Toolkit. – Larsi

0
<ScrollViewer x:Name="sv1" Width="500" Height="285"> 
    <StackPanel x:Name="sp1" Width="450" Height="285"> 
    </StackPanel> 
</ScrollViewer> 

En réglant pos. et nég. marges à la pile dans le scrollviewer vous pouvez créer un effet de défilement.

onScroll_Up() 
{ 
    //Change this based on your scrollviewer dimension 
    if (this.sv1.ScrollableHeight < 300) 
    { 
    Thickness thickness = this.sp1.Margin; 
    thickness.Top += 50; 
    this.sv1.SetValue(StackPanel.MarginProperty, thickness); 
    } 
} 


onScroll_Down() 
{ 
    if (this.sv1.ScrollableHeight > 1) 
    { 
    Thickness thickness = this.sp1.Margin; 
    thickness.Top += -50; 
    this.sv1.SetValue(StackPanel.MarginProperty, thickness); 
    } 
} 
2

Voici un très bon exemple complet pour WPF qui fait à la fois glisser le défilement et le défilement automatique de flick/inertie. Je ne sais pas si quelque chose aurait besoin d'être changé pour le faire fonctionner dans Silverlight.

http://sachabarbs.wordpress.com/2009/12/24/friction-scrolling-now-an-wpf-attached-behaviour-too/

Juste une note que-est que vous ne pouvez pas cliquer et faire glisser la vue si vous cliquez sur un enfant (par exemple boutons) qui capturent l'entrée de la souris. En fait, j'ai fini par modifier cet exemple afin que vous puissiez toujours faire défiler lorsque vous cliquez sur les enfants, tout en permettant aux enfants d'accepter la saisie de la souris lorsque vous ne faites pas glisser.

+0

Je rencontre exactement le même problème. Où les enfants de Listbox capturent l'entrée de la souris avant que je puisse faire quoi que ce soit avec. Comment t'es-tu débrouillé? –

+0

J'ai d'abord changé les gestionnaires d'événements de la souris en versions de prévisualisation pour que je puisse toujours voir l'événement. Puis dans l'aperçu, cliquez gauche, je définirais un drapeau que l'utilisateur pourrait lancer un défilement glisser et enregistré l'emplacement du clic. Ensuite, dans le gestionnaire de déplacement de la souris, j'ai vérifié si le drapeau était défini et si l'utilisateur avait quitté l'emplacement d'origine. Je capture ensuite la souris à la visionneuse de défilement qui empêche et les contrôles enfants capturant la souris. – donovan

1

Un autre poste sur le site Web de Sacha Barber:

http://sachabarber.net/?p=481

Jeremiah Morrill code actions qui implémente le défilement animé d'inertie dans une mesure ContentControl (basé sur un modèle avec un inclus ScrollViewer)