Animer un UserControl

Version imprimable

Bonjour, alors voilà, j'ai fait une "ProgressBar" en tant que UserControl et j'aimerais pouvoir animer le pourcentage visible (en gros voir la progression passée de 0 à 50 en 3 secondes) de celui ci.

j'ai donc :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<UserControl x:Class="CooProgressBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="100" Height="27">
    <Grid>
        <Grid.BitmapEffect>
            <DropShadowBitmapEffect ShadowDepth="7" />
        </Grid.BitmapEffect>
        <Rectangle Stretch="fill" Fill="White" Opacity="0.5"  Stroke="Black" />
        <Rectangle x:Name="pourcentageVisible" Fill="#33CC00" Width="50" HorizontalAlignment="left" Stroke="Black"></Rectangle>
        <Label VerticalAlignment="center" Foreground="White" FontSize="14"  x:Name="percent">%</Label>
    </Grid>
</UserControl>

J'ai créé une propriété "ValueProperty"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
Partial Public Class CooProgressBar
 
    Public Shared ReadOnly ValueProperty As DependencyProperty
 
    Shared Sub New()
        ValueProperty = DependencyProperty.Register("Value", GetType(Double), GetType(CooProgressBar))
    End Sub
 
    Public Property Value()
        Get
            Return DirectCast(GetValue(ValueProperty), Double)
        End Get
        Set(ByVal value)
            SetValue(ValueProperty, CDbl(value))
            pourcentageVisible.Width = value * Me.Width / 100
            percent.Content = Math.Floor(value).ToString & "%"
        End Set
    End Property
 
End Class

enfin pour l'animation (par exemple) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
Dim pb As New CooProgressBar
        pb.SetValue(Canvas.TopProperty, CDbl(0))
        pb.SetValue(Canvas.RightProperty, CDbl(0))
        pb.Width = 150
        pb.Height = 30
 
Dim progressAnimation As New DoubleAnimation
        progressAnimation.From = 0
        progressAnimation.To = 50
        progressAnimation.AccelerationRatio = 0
        progressAnimation.DecelerationRatio = 0.5
        progressAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
 
        pb.BeginAnimation(ProgressBar.ValueProperty, progressAnimation, HandoffBehavior.Compose)

j'ai essayé avec une ProgressBar simple, ça marchait très bien, et je ne sais pas pourquoi ça ne fonctionne pas avec la mienne.

Peut être faudrait il juste que "customise" la ProgressBar fournie ?
Merci pour vos éclaircissements

04/07/2008, 10h11
binoo

Oui ce serait peut-être plus simple d'utiliser le style du progressBar plutôt que de recréer ce controle :D

Voici un poste qui parle d'animation d'une progressBar, ça peut peut_être t'intéresser :
http://www.developpez.net/forums/sho...ht=progressbar
04/07/2008, 10h16
Thomas Lebrun

Etrange, ton code ne me semble pas incorrect pourtant :?

Tu as une exception de déclenchée ou bien juste que la largeur du rectangle ne change pas ?
04/07/2008, 10h26
Marcolinho

Merci Binoo, j'avais déjà vu ce post. Mais comme je l'ai dit, je n'ai pas eu de mal a faire ce que je voulais avec la ProgressBar WPF. Juste que j'ai envie de changer l'apparence.
Je suis entrain d'essayer avec le tuto de Thomas pour "créer notre propre contrôle avec WPF" ;)
(malheureusement je ne connais pas le nom de toutes les propriétés qu'on peut modifier :s)

Sinon pour Thomas, je n'ai aucune erreur, aucune exception déclenchée, la barre reste a 0% et donc je ne vois pas le rectangle vert défiler.
Je débute encore en WPF, j'ai peut être sauté une étape lié à l'animation d'un UserControl ?!

Merci en tout cas
04/07/2008, 11h58
Thomas Lebrun

Citation:

Envoyé par Marcolinho

Je débute encore en WPF, j'ai peut être sauté une étape lié à l'animation d'un UserControl ?!

Techniquement, tu n'animes pas le UC mais une partie du contenu du UC donc cela reste une animation plus ou moins classique ;)

Citation:

Envoyé par Thomas Lebrun

Techniquement, tu n'animes pas le UC mais une partie du contenu du UC donc cela reste une animation plus ou moins classique ;)

C'est exact :)
En attendant j'ai essayé de personnaliser mon contrôle grâce à ton article et à ces deux exemples :

http://www.theamoebaproject.com/blog...el-progressbar

http://msdn.microsoft.com/fr-fr/library/ms750638.aspx

La barre verte s'anime bien, mais je ne sais plus comment remplir la propriété "Content" de mon label

Generic.xaml

Code:

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
27
28
29
30
31
32
 
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestsFondu">
 
    <Style x:Key="{x:Type local:CooProgressBar2}" TargetType="{x:Type local:CooProgressBar2}" BasedOn="{StaticResource {x:Type ProgressBar}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid>
                        <Grid.BitmapEffect>
                            <DropShadowBitmapEffect ShadowDepth="7" />
                        </Grid.BitmapEffect>
                        <Rectangle 
                                Name="PART_Track"
                                Stretch="fill" 
                                Fill="White" 
                                Opacity="0.5"  
                                Stroke="Black" />
                        <Rectangle 
                                Name="PART_Indicator" 
                                Fill="#33CC00" 
                                HorizontalAlignment="left" 
                                Stroke="Black"/>
                        <Label VerticalAlignment="center" Foreground="White" FontSize="14" x:Name="percent" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Va falloir que je bouquine un peu plus ^^

04/07/2008, 12h10
binoo

Citation:

Envoyé par Marcolinho

Juste que j'ai envie de changer l'apparence.

Le style est la solution la plus simple, mais si j'ai bien compris c'est aussi dans le but de comprendre les userControl ;)

Sinon pour ton problème, est-ce qu'en changeant :

Code:

pb.BeginAnimation(CooProgressBar.ValueProperty, progressAnimation, HandoffBehavior.Compose)

;)
04/07/2008, 12h19
Marcolinho

Citation:

Envoyé par binoo

Le style est la solution la plus simple, mais si j'ai bien compris c'est aussi dans le but de comprendre les userControl ;)

Sinon pour ton problème, est-ce qu'en changeant :

Code:

pb.BeginAnimation(CooProgressBar.ValueProperty, progressAnimation, HandoffBehavior.Compose)

;)

En fait c'était un test, à la base j'avais ce que tu as écrit ! ;)
Et sinon, non pas que je voulais comprendre les user controls, mais juste que ça me paraissait plus simple à faire, étant donné que je ne maîtrise pas les styles, le Binding, et les CustomControls :p
Mais bon promis je vais m'y mettre
04/07/2008, 16h20
Marcolinho

Je suis entrain de me dire, que l'animation ne doit pas passer par la propriété "Value" puisque je lui passe seulement la ValueProperty ... Et donc, le redimensionnement et l'affichage du label ne sont pas mis à jour ...

Y'a-t-il un moyen de surcharger le Setter de la dependency property ?

edit : a moins que je dis une bêtise, et qu'il passe bien par la propriété Value car j'ai fait un DependencyPropert.Register ?
04/07/2008, 17h23
Thomas Lebrun

Citation:

Envoyé par Marcolinho

edit : a moins que je dis une bêtise, et qu'il passe bien par la propriété Value car j'ai fait un DependencyPropert.Register ?

Oui, il passe bien par le Value: pour être sur, met un point d'arrêt ;)
04/07/2008, 17h28
Marcolinho

j'en ai mis un, mais je ne sais pas si il peut s'arrêter lorsqu'il passe avec "BeginAnimation"
En tout cas je ne l'ai pas vu s'arrêter... :?

De même, si je fais :

Code:

progress.SetValue(CooProgressBar.ValueProperty, CDbl(50))

La valeur n'est pas affiché sur le control alors qu'avec

Code:

progress.Value = 50

le control s'affiche correctement.

Merci encore pour votre aide
05/07/2008, 12h14
Thomas Lebrun

Normalement, cela revient au même donc je ne comprend vraimetn pas pkoi ca ne marche pas :?

Une solution est de faire l'animation directement dans le controle

Code:

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
27
Imports System.Windows.Media.Animation
 
Partial Public Class UCProgressBar
 
    Public Shared ReadOnly ValueProperty As DependencyProperty ' Valeur défini en tant que propriété de dépendance
 
    Shared Sub New()
        ValueProperty = DependencyProperty.RegisterAttached("Valeur", GetType(Double), GetType(UCProgressBar))
    End Sub
 
    Public Property Value()
        Get
            Return DirectCast(GetValue(ValueProperty), Double)
        End Get
        Set(ByVal value)
            Dim progress As New DoubleAnimation
            progress.To = value * Me.Width / 100
            progress.AccelerationRatio = 0.1
            progress.Duration = New Duration(TimeSpan.FromSeconds(1.5))
            pourcentageVisible.BeginAnimation(WidthProperty, progress)
            'pourcentageVisible.Width = value * Me.Width / 100
            percent.Content = Math.Floor(value).ToString & "%"
            SetValue(ValueProperty, CDbl(value))
        End Set
    End Property
 
End Class

Mais bon, je suis (presque) obligé d'avoir l'animation.
De plus je ne sais pas comment faire animer un texte :p (lui faire changer sa valeur)

C'est bon ça fonctionne !!!! :)
Bon en fait je suis loin de connaitre comment .Net fonctionne avec les propriétés de dépendances et tout ce "bazar", et ça me fait défaut...

Code:

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
27
28
29
30
31
32
 
Imports System.Windows.Media.Animation
 
Partial Public Class UCProgressBar
 
    Public Shared ReadOnly ValueProperty As DependencyProperty ' Valeur défini en tant que propriété de dépendance
 
    Shared Sub New()
        ValueProperty = DependencyProperty.Register("Valeur", GetType(Double), GetType(UCProgressBar), New PropertyMetadata(New PropertyChangedCallback(AddressOf HandleProgressValueChanged)))
    End Sub
 
    Public Property Value()
        Get
            Return DirectCast(GetValue(ValueProperty), Double)
        End Get
        Set(ByVal value)
            SetValue(ValueProperty, CDbl(value))
            init()
        End Set
    End Property
 
    Public Shared Sub HandleProgressValueChanged(ByVal source As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
        CType(source, UCProgressBar).init()
    End Sub
 
    Private Sub init()
        pourcentageVisible.Width = Value * Me.Width / 100
        percent.Content = Math.Floor(Value).ToString & "%"
    End Sub
 
 
End Class

Comme on peut le voir, il faut abonner la DependencyProperty à une méthode de changement de valeur, qui s'occupe d'appeler la méthode qui va mettre à jour ce que l'on veut.

le code XAML pour ceux que ça intéresse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<UserControl x:Class="UCProgressBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="100"
    Height="27">
    <Grid>
        <Grid.BitmapEffect>
            <DropShadowBitmapEffect ShadowDepth="7" />
        </Grid.BitmapEffect>
        <Rectangle Stretch="fill" Fill="White" Opacity="0.5"  Stroke="Black" RadiusX="2" RadiusY="2" />
        <Rectangle x:Name="pourcentageVisible" Fill="#33CC00" Width="0" HorizontalAlignment="left" Stroke="Black" RadiusX="2" RadiusY="2"/>
        <Label VerticalAlignment="center" Foreground="White" FontSize="14"  x:Name="percent">%</Label>
    </Grid>
</UserControl>

Code:

1
2
3
4
5
 
 Dim da As New DoubleAnimation()
            da.To = 100
            da.Duration = New Duration(TimeSpan.FromSeconds(1.5))
            progress.BeginAnimation(UCProgressBar.ValueProperty, da, HandoffBehavior.Compose)

Voilà du coup, même le texte sur la barre défile :)

Merci pour votre aide, et merci au site http://www.nibblestutorials.net/, il y avait un exemple similaire afin de changer une DependencyProperty