[WPF] Leds clignotantes

Version imprimable

2 pièce(s) jointe(s)

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:

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 :

Pièce jointe 552452

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 :

Pièce jointe 552454

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

Bonne journée :)

02/04/2020, 18h28
Pol63

timer avec interval bindé au slider
02/04/2020, 19h57
Earthw0rm

1 pièce(s) jointe(s)

Citation:

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 " :?

Pièce jointe 552462

Ais-je peut-être oublié d'installer un composant ?
02/04/2020, 21h10
Pol63

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

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:

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

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:

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

18/04/2020, 17h11
ourscherche

bonjour

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
18/04/2020, 17h27
Earthw0rm

Citation:

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 ! :D
Maintenant reste plus qu'à m'occuper du slider qui modifie la durée d'affichage, je repost en cas de problèmes ;)

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:

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}"/>

19/04/2020, 11h27
ourscherche

Bonjour

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

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:

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:

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.