Animer un UserControl

**Marcolinho** · 04/07/2008, 09h52

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 xml :

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

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 VB.Net :

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
 
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 VB.Net :

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

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

**binoo** · 04/07/2008, 10h11

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

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

**Thomas Lebrun** · 04/07/2008, 10h16

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 ?

**Marcolinho** · 04/07/2008, 10h26

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

**Thomas Lebrun** · 04/07/2008, 11h58

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

**Marcolinho** · 04/07/2008, 12h09

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 xml :

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
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 ^^

**binoo** · 04/07/2008, 12h10

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 :

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

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

**Marcolinho** · 04/07/2008, 12h19

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 :

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

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

**Marcolinho** · 04/07/2008, 16h20

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 ?

**Thomas Lebrun** · 04/07/2008, 17h23

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

**Marcolinho** · 04/07/2008, 17h28

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 :

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

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

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

Code :

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

progress.Value = 50

le control s'affiche correctement.

Merci encore pour votre aide

**Thomas Lebrun** · 05/07/2008, 12h14

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

**Marcolinho** · 08/07/2008, 16h15

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

Code VB.Net :

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
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)

**Marcolinho** · 09/07/2008, 14h48

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 VB.Net :

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
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 xml :

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

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 VB.Net :

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

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

Animer un UserControl

Windows Presentation Foundation

Discussions similaires

Partager

Partager