[WPF] Leds clignotantes

**Earthw0rm** · 02/04/2020, 17h42

Bonjour à tous !
Ayant un TP que je doit rendre bientôt à mon prof, je sollicite votre aide pour m'aider à la deuxième partie

Il est plutôt simple : on a deux images à faire clignoter; l'une à l'aide d'un bouton on/off, jusque la pas de problèmes, et une autre qui doit clignoter toute seule, et où on peut modifier son affichage d'intervalle à l'aide d'un slider

Pour la première partie, je n'ai pas de soucis, c'est plutôt pour la deuxième que je galère

Voici mon code :

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
namespace WPF_Voyants
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void checkBoxMarche_Checked(object sender, RoutedEventArgs e)
        {
            imgMarche1.Visibility = Visibility.Hidden;
        }
 
        private void checkBoxMarche_Unchecked(object sender, RoutedEventArgs e)
        {
            imgMarche1.Visibility = Visibility.Visible;
        }
 
        private void checkBoxAlarme_Checked(object sender, RoutedEventArgs e)
        {
 
            if (imgAlarme2.IsVisible)
            {
                imgAlarme2.Visibility = Visibility.Hidden;
 
            }
            if (imgAlarme1.IsVisible)
            {
                imgAlarme2.Visibility = Visibility.Visible;
            }
 
 
        }
 
        private void checkBoxAlarme_Unchecked(object sender, RoutedEventArgs e)
        {
            imgAlarme2.Visibility = Visibility.Visible;
        }
    }
}

Je pensais pouvoir régler cela avec une boucle while, mais ça ne fonctionne pas

Pareil avec deux if que j'ai ici, même en choisissant plusieurs autre moyens avec les images 1 et 2

Voici une capture d'écran :

Nom : leds.png
Affichages : 616
Taille : 150,3 Ko

L'idéal étant tout d'abord, de faire en sorte que dès que la case on/off est coché, l'image disparaît pour faire apparaître l'image qu'il y a derrière :

Nom : help2.png
Affichages : 589
Taille : 135,5 Ko

Nom : help2.png
Affichages : 589
Taille : 135,5 Ko

Et ainsi de suite...
Je voudrais que quelqu'un m'aide pour cette partie, ça serait très gentil !

Bonne journée

**Pol63** · 02/04/2020, 18h28

timer avec interval bindé au slider

**Earthw0rm** · 02/04/2020, 19h57

Envoyé par Pol63

timer avec interval bindé au slider

Je vois, je voudrais bien ajouter un timer mais il est grisé quand je fais "Afficher tout dans la boite à outils "

Nom : aled.png
Affichages : 610
Taille : 176,1 Ko

Ais-je peut-être oublié d'installer un composant ?

**Pol63** · 02/04/2020, 21h10

tu fais du wpf avec la boite à outils de windows forms ? étrange ...

un timer ca ne se pose pas, ca s'instancie dans le code (dispatchertimer devrait convenir)
sinon une boucle avec de l'async await avec une propriété interval bindée

**MABROUKI** · 02/04/2020, 23h55

bonjour
mmh, storyboard est ton ami pour gérer des feux clignotants ou un gyrophare avertisseur.
Tu dois utiliser ObjectAnimationUsingKeyFrames ,le monstre qui anime toutes sortes d'objet
code xaml exemple wpf qui anime du "rouge" bitmap1.bmp au "jaune" bitmap2.bmp:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<Window x:Class="WpfBooleanAnimation.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Image x:Key="MyImage1" Source="Images/Bitmap1.bmp"/>
        <Image x:Key="MyImage2" Source="Images/Bitmap2.bmp"/>
    </Window.Resources>
    <StackPanel Orientation="Vertical" Margin="20">
 
        <Image Name="image"  HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch" 
                Height="200" Width="200"
                Source="Images/Bitmap1.bmp">
            <Image.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames 
                            BeginTime="00:00:00" 
                            RepeatBehavior="Forever"
                            Duration="0:0:2"
                            Storyboard.TargetName="image"
                            Storyboard.TargetProperty="(Image.Source)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.50">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="Images/Bitmap1.bmp" />
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames 
                            BeginTime="00:00:00.00" 
                            RepeatBehavior="Forever"
                            Duration="0:0:2"
                            Storyboard.TargetName="image"
                            Storyboard.TargetProperty="(Image.Source)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.50">
                                    <DiscreteObjectKeyFrame.Value>
                                        <BitmapImage UriSource="Images/Bitmap2.bmp" />
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </StackPanel>
</Window>

bon code...

**Earthw0rm** · 18/04/2020, 16h42

Alors effectivement, j'utilise un dispatcher timer instanciée

Ca semble se rapprocher du but, mais par contre la leds rouge ne clignote pas en intervalle voulue, et l'image rouge est remplacée par la noire, et ça ne continue pas :/

Je vous met mon nouveau code ci-dessus (le .cs) :

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;
 
namespace WPF_Voyants
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        DispatcherTimer disTime;
        public MainWindow()
        {
            InitializeComponent();
 
        }
 
        private void checkBoxMarche_Checked(object sender, RoutedEventArgs e)
        {
            imgMarche1.Visibility = Visibility.Hidden;
        }
 
        private void checkBoxMarche_Unchecked(object sender, RoutedEventArgs e)
        {
            imgMarche1.Visibility = Visibility.Visible;
        }
 
        private void checkBoxAlarme_Checked(object sender, RoutedEventArgs e)
        {
            disTime = new DispatcherTimer();
            disTime.Interval = TimeSpan.FromSeconds(1);
            disTime.Tick += disTimeTicker;
            disTime.Start();
 
        }
 
        private void disTimeTicker(object sender, EventArgs e)
        {
            imgAlarme2.Visibility = Visibility.Visible;
            imgAlarme2.Visibility = Visibility.Hidden;
        }
 
        private void checkBoxAlarme_Unchecked(object sender, RoutedEventArgs e)
        {
            imgAlarme2.Visibility = Visibility.Visible;
        }
    }
}

Et une capture d'écran de mon soucis :

https://ibb.co/VQsdyf6
https://ibb.co/QJC19KF

De plus, quand je décoche on/off, l'image rouge s'affiche encore une dernière fois et disparaît par la suite :/
Si vous pouviez m'aider à régler ce menu détail...

**ourscherche** · 18/04/2020, 17h11

Sans vouloir trop rentrer dans ton code il faudrait peut-être, dans ton évènement timer, mettre une condition de type
Si image1 visible alors la cacher, sinon la montrer
Ainsi à chaque pulsation il y aurait une alternance

Bon TP

**Earthw0rm** · 18/04/2020, 17h27

Envoyé par ourscherche

Sans vouloir trop rentrer dans ton code il faudrait peut-être, dans ton évènement timer, mettre une condition de type
Si image1 visible alors la cacher, sinon la montrer
Ainsi à chaque pulsation il y aurait une alternance

Bon TP

Un grand merci à toi, le clignotement fonctionne parfaitement !

Maintenant reste plus qu'à m'occuper du slider qui modifie la durée d'affichage, je repost en cas de problèmes

**Earthw0rm** · 18/04/2020, 18h51

Pour binder le slider avec l'interval d'affichage de disTime, il faut le faire dans le xaml c'est bien ça ?
Si oui je ne comprends pas trop, car le timer pour faire clignoter les images est codé dans le .cs, et non dans le xaml.
Peut-être existe une autre alternative en bind en c# ?

EDIT : Voilà mon bind dans le xaml pour donner une idée de ce que j'ai compris en bind :

Code XAML :

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

1
2
<Image x:Name="imgAlarme1" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="17,37,0,0" Source="noir.gif" Visibility="{Binding ElementName=sliderAlarme, Path=Visibility}" />
                        <Image x:Name="imgAlarme2" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="17,37,0,0" Source="rouge.gif" Visibility="{Binding ElementName=sliderAlarme, Path=Visibility}"/>

**ourscherche** · 19/04/2020, 11h27

Bonjour,
Tu pourrais peut-être rajouter un deuxième timer, beaucoup plus lent que le premier, qui consulte le slider et qui change la valeur de l'intervalle du premier timer.

Ainsi ton slider se comporterait comme une source d'information : un thermomètre , une sonde …. que ton système consulte régulièrement.

Bon code

**MABROUKI** · 20/04/2020, 23h26

Boujour
Pour faire ce que tu veux,il faut arrêter de coder en Wpf à la "winforms classique".
La programmation en Wpf est dirigée par "les données" ou "data".

voici un exemple de class data qui fait ce que tu veux sans aucune ligne de code dans le code-behind.cs dans tes divers controls:

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
using System;
using System.ComponentModel ;
using System.Windows.Threading;
 
namespace WpfTimerMVVM
{
    public class DataTimer:INotifyPropertyChanged 
    {
        //props activant visibilité de l'image 
        private bool _visImgMarche;
        public bool VisImgMarche
        {
            get { return _visImgMarche; }
            set { 
                _visImgMarche = value;
                RaisePropertyChanged("VisImgMarche");
            }
        }
 
        private bool _visImgAlarme;
        public bool VisImgAlarme
        {
            get { return _visImgAlarme; }
            set { 
                _visImgAlarme = value;
                RaisePropertyChanged("VisImgAlarme");
            }
        }
        //props activant On/Off
        private bool _marcheChecked;
        public bool MarcheChecked
        {
            get { return _marcheChecked; }
            set {
 
                if ( value)
                   VisImgMarche = true;
                else
                    VisImgMarche = false;
                _marcheChecked = value;
                RaisePropertyChanged("MarcheChecked");
            }
        }
        private bool _alarme_Checked;
        public bool AlarmeChecked
        {
            get { return _alarme_Checked; }
            set {
                if (value)
                    VisImgAlarme = false;
                else
                    VisImgAlarme = true;
                _alarme_Checked = value;
                RaisePropertyChanged("AlarmeChecked");
            }
        }
 
        // les millisecondes doivent etre de  type double
        private double _duration =500.0;
        public double Duration
        {
            get { return _duration; }
            set { 
                _duration = value;
 
                RaisePropertyChanged("Duration");
                //maj du timer
                disTimer.Interval = TimeSpan.FromMilliseconds(_duration);
            }
        }
        private DispatcherTimer disTimer;
        public DataTimer()
        {
            StartTimer();
        }
        private void StartTimer()
        {
            disTimer = new DispatcherTimer();
            disTimer.Interval = TimeSpan.FromMilliseconds(this.Duration);
            disTimer.Tick += new EventHandler(_disTimer_Tick);
            disTimer.Start();
        }
 
        void _disTimer_Tick(object sender, EventArgs e)
        {
            if (AlarmeChecked)
            {
                VisImgAlarme = !VisImgAlarme; 
 
            }
 
            if (MarcheChecked)
            {
                VisImgMarche =!VisImgMarche;
            }
        }
 
 
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
 
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

code xaml du form user (ça pourrait etre un usercontrol) :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<Window x:Class="WpfTimerMVVM.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfTimerMVVM" 
        Title="Window1" Height="300" Width="300">
    <Window.DataContext>
        <local:DataTimer/>
    </Window.DataContext>
        <Window.Resources>
        <Image x:Key="MyImage1" Source="Images/Bitmap1.bmp"/>
        <Image x:Key="MyImage2" Source="Images/Bitmap2.bmp"/>
        <!--BooleanToVisibilityConverter converter API .Net
            true => Visibility.Visible ,false=> Visibility.Collapsed 
            -->
        <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Label Content="Marche" HorizontalAlignment="Center"/>
            <Grid >
 
                <Image 
                    Grid.Row="0" Name="imgMarche2"  HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" 
                    Height="100" Width="100"
                    Source="Images/Bitmap2.bmp"
 
                    >
                    <Image.Clip>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
                    </Image.Clip>
                </Image>
                <Image 
                    Grid.Row="0" Name="imgMarche1"  HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" 
                    Height="100" Width="100"
                    Source="Images/Bitmap1.bmp"
                    Visibility="{Binding VisImgMarche,Converter={StaticResource VisibleIfTrueConverter}}"
                    >
                    <Image.Clip>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
                    </Image.Clip>
                </Image>
            </Grid>
            <CheckBox Grid.Row="1" Name="checkBoxMarche" Content="On/Off" 
                      HorizontalAlignment="Center"
                      IsChecked="{Binding MarcheChecked}" />
 
        </StackPanel>
 
        <StackPanel Grid.Column="1">
            <Label Content="Alarm" HorizontalAlignment="Center"/>
            <Grid >
 
                <Image
                    Grid.Row="0" Name="imgAlarme2"  HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" 
                    Height="100" Width="100"
                    Source="Images/Bitmap2.bmp"
                    >
                    <Image.Clip>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
                    </Image.Clip>
                </Image>
                <Image 
                    Grid.Row="0" Name="imgAlarme1"  HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" 
                    Height="100" Width="100"
                    Source="Images/Bitmap1.bmp"
                    Visibility="{Binding VisImgAlarme,Converter={StaticResource VisibleIfTrueConverter}}"
                    >                    
                    <Image.Clip>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
                    </Image.Clip>
                </Image>
            </Grid>
            <CheckBox Grid.Row="1" Name="checkBoxAlarme" Content="On/Off" 
                      HorizontalAlignment="Center"
                    IsChecked="{Binding AlarmeChecked}"/>
            <Grid>
                <!-- valeur de slider exprimées en milliseconds-->
                <!-- 1000 millisecondes => 1 seconde-->
                <Slider  
 
                    x:Name="Sld" 
                     AutoToolTipPlacement="BottomRight"
                     Maximum="4000"
                     Minimum="300"
                     Background="SkyBlue"
                     Foreground="Yellow" 
                     Value="{Binding Path=Duration,Mode=TwoWay}">
                </Slider>
 
            </Grid>
        </StackPanel>
    </Grid>
</Window>

aucun code behind.cs.
bon code.

[WPF] Leds clignotantes

C#

Discussions similaires

Partager

Partager