Dégrader dans une progressbar

Version imprimable

28/03/2014, 12h12
Locusvok

Dégrader dans une progressbar

Bonjours à tous;

Voilà je cherche a effectué un dégrader dans la progression de ma bar cependant j'ai réussi a mettre le dégrader mais celui si est verticale alors que je le voudrais horizontale. Je me suis servie de visual 2013 pour sa. J'ai placé mon foregrounde en dégrader puis réaliser mon dégrader cependant celui si s'affiche donc de manière verticale

Merci a vous pour vos réponses futur.
01/04/2014, 16h52
toss.net

Tu as essayé de bosser ça dans Blend ?
03/04/2014, 08h23
Locusvok

bonjour;

Oui, j'ai essayé avec blend mais je rencontre le même problème. Le dégrader est verticale donc le vert au dessus le orange au centre et le rouge en bas alors que je voudrais le vert à gauche, rouge à droite.

Je rencontre aussi un deuxième soucis, dans l'idée je voudrais un progressBar en dégrader afin de renseigné l'état d'une pile donc que le dégrader soit complet lorsque la pile est neuve puis que lorsque la pile est la moitié de sa capacité qu'il y est que la couleur orange et rouge du dégrader et ensuite que la couleur rouge lorsque la pile est en dessous de 10%(dans l'idée). J’espère que vous avez compris ;p

Merci pour vos réponses.
03/04/2014, 09h45
DotNET74

Salut,

montre nous ton code ...

Merci

J'ai réussi a trouver pour placer ma progresseBar en horizontale les couleurs son bien placé mais le deuxième soucis persiste.
Voici mon code
Code:

1 2 3 4 5 6 7 8 9 <ProgressBar Width="94" Value="100"> <ProgressBar.Foreground> <LinearGradientBrush EndPoint="1,0" StartPoint="0,0"> <GradientStop Color="#FFF11414" Offset="1"/> <GradientStop Color="#FF0CF50C"/> </LinearGradientBrush> </ProgressBar.Foreground> </ProgressBar>
Ici ma valeur est de 100 pour visualiser ma progressBar mais lorsque je met 50 le dégrader reste intact juste sur 50% de la bar.

Merci pour vos réponce

1 pièce(s) jointe(s)

Faut faire autrement je pense. L'utilisation de Foreground : tu ne remplis que la partie rouge de mon illustration ci-dessous :
Pièce jointe 142145
Il faut que tu creuses plus sur le faite de modifier l'offset d'une des deux couleur via la variation de value

regarde cet exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<phone:PhoneApplicationPage.Resources>
        <local:BgConverter x:Key="BackgroundConverter" />
    </phone:PhoneApplicationPage.Resources>
 
 
<!-- *** -->
 
<StackPanel>
    <ProgressBar x:Name="myProgressBar" Height="32" Minimum="0" Maximum="100" 
                Background="{Binding RelativeSource={RelativeSource Self}, Path=Value, Converter={StaticResource BackgroundConverter}}">
 
    </ProgressBar>
    <TextBox Height="67" HorizontalAlignment="Left" Margin="41,56,0,0" Name="TextBox1" VerticalAlignment="Top" Width="120" TextChanged="TextBox1_OnTextChanged" />
</StackPanel>

puis coté C# :

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
public class BgConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Int32 valeur = System.Convert.ToInt32(value);
            switch (valeur)
            {
                case 0:
                    return new SolidColorBrush(Colors.Red);
                    break;
                case 50:
                    return new SolidColorBrush(Colors.Green);
                    break;
 
                case 75:
                    return new SolidColorBrush(Colors.Orange);
                    break;
                default:
                    return new SolidColorBrush(Colors.Blue);
                    break;
            }
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

Code:

1
2
3
4
5
6
7
 private void TextBox1_OnTextChanged(object sender, TextChangedEventArgs e)
        {
            double valeur = 0.0;
            Double.TryParse(TextBox1.Text, out valeur);
            this.myProgressBar.Value = valeur;
 
        }

ca te permettra de trouver une meilleure idée

Allez, c'est mon après midi de bonté :

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
 public class BgConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var id = System.Convert.ToDouble(value);
            id = 1-(id/100);
            LinearGradientBrush brush = new LinearGradientBrush();
            brush.StartPoint = new Point(0, 0);
            brush.EndPoint = new Point(1, 0);
            brush.GradientStops.Add(new GradientStop()
            {
                Color = Colors.Red,
                Offset = 0.0
            });
            brush.GradientStops.Add(new GradientStop()
            {
                Color = Colors.Green,
                Offset = id
 
            });
 
            return brush;
 
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

08/04/2014, 13h35
Locusvok

Bonjour;

Merci beaucoup pour ton aide sa ma bien aidé.