Discussion :

[Ldoppea]

Bonjour,

Je cherche à pouvoir effectuer un scroll automatique sur un scrollviewer, le tout dans animé.

Par exemple, mon scrollviewer contient une liste d'objets et je me trouve quelque par au milieu de celui-ci. Lorsqu'un objet est ajouté à la liste, j'aimerais que le scrollviewer scroll jusqu'en bas, en X secondes de façon smoothie.

Savez-vous comment faire?

Merci d'avance.

[Samuel Blanchard]

vu que les propriétés VerticalOffset et HorizontalOffset de ScrollViewer dans un Storyboard sont en lecture seules, tu ne peux pas les utiliser dans un Storyboard. En revanche tu dois pouvoir créer 2 propriétés attachés (snippet propa) Par exemple VOffset et HOffset qui te permetteront de lancer les méthodes ScrollToVerticalOffset et ScrollToHorizontalOffset. Ces 2 propriétés seront accessibles de ton Storyboard.

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
public static double GetHOffset(DependencyObject obj)
        {
            return (double)obj.GetValue(HOffsetProperty);
        }
 
        public static void SetHOffset(DependencyObject obj, double value)
        {
            obj.SetValue(HOffsetProperty, value);
        }
 
        // Using a DependencyProperty as the backing store for HOffset.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HOffsetProperty =
            DependencyProperty.RegisterAttached("HOffset", typeof(double), typeof(ScrollViewerBehaviour), new PropertyMetadata(0.0, OnHOffsetChanged ));
 
        private static void OnHOffsetChanged( DependencyObject sender, DependencyPropertyChangedEventArgs e )
        {
            ScrollViewer s = sender as ScrollViewer;
 
            if( s != null )
                s.ScrollToHorizontalOffset((double)e.NewValue);
        }

coté XAML ça fait un truc du genre :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<UserControl
    x:Class="SilverlightTest.MainPage"
    xmlns:local="clr-namespace:SilverlightTest"
  <Grid x:Name="LayoutRoot">
 
        <ScrollViewer  local:ScrollViewerBehaviour.HOffset="12.0"></Scrollviewer>
 
  </Grid>
</UserControl>

Si tu veux plus d'exemple de propriété attachée tu peux jeter un coup d'oeil ici : http://blog.naviso.fr/wordpress/?p=12

[Ldoppea]

Bonjour,

Merci pour ta réponse.

J'ai bien crée le behavior qui fonctionne parfaitement dans le designer. Par contre je ne sais pas comment y accéder dans le code behind ni dans Blend, et donc faire une animation en conséquence.

Que mettre dans le target property?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Storyboard.TargetProperty="???"

[Samuel Blanchard]

local:ScrollViewerBehaviour.HOffset normalement

[Ldoppea]

Helas il ne veut rien savoir :/

Cannot resolve TargetProperty local:ScrollViewerBehaviour.HOffset on specified object.

[Samuel Blanchard]

tu as déclaré ton local ?

[Ldoppea]

Oui dans le xaml.

[Samuel Blanchard]

Bizarre.
Le Behavior Fonctionne t'il sans Storyboard cad juste en lui fixant une valeur ?

Tu peux me montrer ton code Xaml (juste le storyboard et le ScrollViewer) ?

[Ldoppea]

Le behavior fonctionne bien quand je lui fixe une valeur directement dans le xaml. Mais je n'arrive pas a y accéder depuis le code behind, l'auto-complétion ne me propose rien.

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<phone:PhoneApplicationPage
	x:Class="MonEntreprise.MaSolution.WP7.MainPage"
	xmlns:local="clr-namespace:MonEntreprise.MaSolution.WP7.Behaviors"
	DataContext="{Binding Main, Source={StaticResource Locator}}">
 
	<phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="scrollBottom">
			<DoubleAnimation Duration="10"
                             To="100"
                             Storyboard.TargetProperty="local:ScrollViewerBehaviour.VOffset"
                             Storyboard.TargetName="scroller"
                             />
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>
 
<!-- code divers -->
 
            <ScrollViewer Name="scroller" 
		          local:ScrollViewerBehaviour.VOffset="10.0" >
                <StackPanel>
                    <item />
                    <item />
                    <item />
                    <item />
                </StackPanel>
            </ScrollViewer>

[Samuel Blanchard]

Après quelques tests, effectivement cela ne passe pas.*
Je pense que c'est une spécificité de WP7 car cela doit passer sous SL

Il y a d'autre façon de faire mais avant toute chose j'ai un petit soucis pour faire fonctionner ScrollToVerticalOffset. J'utilise le nouvel emulateur fournit avec le SDK Beta Mango. quelle version du SDK as-tu ? La méthode ScrollToVerticalOffset fonctionne t'elle chez toi ?

[Ldoppea]

J'ai aussi la beta, mais là c'est un projet NoDo. Le ScrollToVerticalOffset() est de toute façon bien accessible. Je l'utilise justement sans animation en attendant.

[Samuel Blanchard]

Sorry je dois avoir un jeton sur mon emulateur et celui ci refuse de scroller. Mais si cela marche pour toi, tant mieux.

Logiquement tu dois pouvoir affecter la TargetProperty de ton animation via du CodeBehind :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
            DoubleAnimation animation = this.ScrollBottom.Children[0] as DoubleAnimation;
            // Fixe le VOffsetProperty comme target de ton DoubleAnimation
            Storyboard.SetTargetProperty(animation, new PropertyPath(ScrollBehavior.VOffsetProperty));
            this.ScrollBottom.Begin();

[Ldoppea]

Ça marche parfaitement, merci beaucoup pour ton aide

Donc pour résumer, en partant du principe que le behavior ScrollViewerBehaviour ai bien été implémenté (cf premier post de Samuel Blanchard).

Voici d'abord le code XAML :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<phone:PhoneApplicationPage
	x:Class="MonEntreprise.MaSolution.WP7.MainPage"
	xmlns:local="clr-namespace:MonEntreprise.MaSolution.WP7.Behaviors"
	DataContext="{Binding Main, Source={StaticResource Locator}}">
 
	<phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="scrollBottom">
			<DoubleAnimation Duration="0:0:1"
                             Storyboard.TargetName="scroller"
                             />
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>
 
<!-- code divers -->
 
            <ScrollViewer Name="scroller" 
		          local:ScrollViewerBehaviour.VOffset="10.0" >
                <StackPanel>
                    <item />
                    <item />
                    <item />
                    <item />
                </StackPanel>
            </ScrollViewer>

Et niveau code behind :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
DoubleAnimation animation = scrollBottom.Children[0] as DoubleAnimation;
 
Storyboard.SetTargetProperty(animation, new PropertyPath(ScrollViewerBehaviour.VOffsetProperty));
 
animation.From = scroller.VerticalOffset;
animation.To = scroller.ScrollableHeight;
 
scrollBottom.Begin();

Merci encore pour ton aide