Στυλ και σενάριο για ρυθμιστικά. Γέμισμα της γραμμής προόδου

Αλλαγή έντασης, ισορροπίας, ταχύτητας και θέσης αναπαραγωγής

Για να ελέγξετε την ένταση, την ισορροπία, την ταχύτητα και την τρέχουσα θέση ενός αρχείου πολυμέσων, το MediaElement προσφέρει τις ίδιες ιδιότητες με το MediaPlayer. Παρακάτω είναι ένα απλό παράθυρο που επεκτείνει το παράδειγμα του προγράμματος αναπαραγωγής ήχου από το προηγούμενο άρθρο, με πρόσθετα στοιχείαγια τη διαχείριση αυτών των παραμέτρων.

Τα ρυθμιστικά έντασης και ισορροπίας είναι τα πιο εύκολα στη σύνδεση. Επειδή το Volume και το Balance είναι ιδιότητες εξάρτησης, τα στοιχεία ελέγχου τους μπορούν να προσαρτηθούν στο MediaElement χρησιμοποιώντας μια έκφραση σύνδεσης αμφίδρομης κατεύθυνσης.

Αν και οι αμφίδρομες δεσμευτικές εκφράσεις απαιτούν κάποια επιπλέον επιβάρυνση, παρέχουν ανατροφοδότηση: Εάν οι ιδιότητες του MediaElement αλλάξουν με κάποιον άλλο τρόπο, αυτά τα ρυθμιστικά θα παραμείνουν σε συγχρονισμό με τις τρέχουσες τιμές ιδιοτήτων. Η ιδιότητα SpeedRatio μπορεί να συνδεθεί με παρόμοιο τρόπο:

Όγκος: Υπόλοιπο: Ταχύτητα:

Ωστόσο, υπάρχουν αρκετές αποχρώσεις εδώ. Πρώτον, το SpeedRatio δεν εμπλέκεται σε ήχο ελεγχόμενο με χρονόμετρο (όπου χρησιμοποιείται το MediaTimeline). Για να το χρησιμοποιήσετε, θα πρέπει να ορίσετε την ιδιότητα LoadedBehavior από SpeedRatio σε Manual και να αναλάβετε τον έλεγχο της αναπαραγωγής μέσω των κατάλληλων μεθόδων.

Όταν χρησιμοποιείτε το MediaTimeline, η ενέργεια SetStoryboardSpeedRatio έχει το ίδιο αποτέλεσμα με τη ρύθμιση της ιδιότητας MediaElement.SpeedRatio. Δεύτερον, το SpeedRatio δεν είναι ιδιότητα εξάρτησης και το WPF δεν δέχεται ειδοποιήσεις ότι έχει αλλάξει. Αυτό σημαίνει ότι εάν η ιδιότητα SpeedRatio τροποποιηθεί σε κώδικα, το ρυθμιστικό δεν ενημερώνεται ανάλογα. (Μια λύση θα μπορούσε να είναι η αλλαγή του ίδιου του ρυθμιστικού στον κώδικα αντί της άμεσης τροποποίησης του MediaElement.)

Η αλλαγή της ταχύτητας αναπαραγωγής ήχου μπορεί να παραμορφώσει τον ήχο και να προκαλέσει εφέ όπως ηχώ. Και η τελευταία λεπτομέρεια είναι η τρέχουσα θέση, η οποία αντιπροσωπεύεται από την ιδιότητα Θέση.

Και πάλι, για να ορίσετε την ιδιότητα Στοιχείο θέσηςΤο MediaElement πρέπει να βρίσκεται σε χειροκίνητη λειτουργία, πράγμα που σημαίνει ότι δεν μπορεί να εφαρμοστεί το MediaTimeline. (Όταν χρησιμοποιείτε το TimeLine, σκεφτείτε να χρησιμοποιήσετε την ενέργεια BeginStoryboard μαζί με το Offset για να ορίσετε την επιθυμητή θέση.)

Για να λειτουργήσει αυτό, μην εφαρμόσετε καμία δέσμευση δεδομένων στο ρυθμιστικό:

Για να ορίσετε τη θέση του ρυθμιστικού όταν ανοίγετε ένα αρχείο πολυμέσων, μπορείτε να χρησιμοποιήσετε κώδικα παρόμοιο με τον ακόλουθο:

Ιδιωτικό void media_MediaOpened(αποστολέας αντικειμένου, RoutedEventArgs e) ( sliderPosition.Maximum = media.NaturalDuration.TimeSpan.TotalSeconds; )

Στη συνέχεια, όταν μετακινείτε το ρυθμιστικό, μπορείτε να μεταβείτε σε μια συγκεκριμένη θέση:

Ιδιωτικό void sliderPosition_ValueChanged(object sender, RoutedEventArgs e) ( // Η παύση της αναπαραγωγής πριν μεταβείτε σε άλλη θέση // θα εξαλείψει τον τραυλισμό όταν το ρυθμιστικό μετακινείται πολύ γρήγορα, media.Pause(); media.Position = TimeSpan.FromSeconds(sliderPosition.Value) ; media.Play(); )

Το μειονέκτημα αυτής της λύσης είναι ότι το ρυθμιστικό δεν ενημερώνεται καθώς παίζει. Εάν αυτό είναι απαραίτητο, θα πρέπει να καταφύγετε σε μια λύση (όπως η χρήση ενός στοιχείου DispatcherTimer, το οποίο θα ελέγχει περιοδικά την τρέχουσα θέση κατά την αναπαραγωγή και θα ενημερώνει ανάλογα τη θέση του ρυθμιστικού). Το ίδιο ισχύει όταν χρησιμοποιείτε το MediaTimeline. Με ποικίλοι λόγοιΔεν είναι δυνατή η απευθείας σύνδεση με πληροφορίες MediaElement.Clock. Αντίθετα, θα πρέπει να χειριστείτε το συμβάν Storyboard.CurrentTimeInvalidated.

Συγχρονισμός κινούμενων εικόνων με ήχο

Σε ορισμένες περιπτώσεις, μπορεί να θέλετε να συγχρονίσετε μια άλλη κινούμενη εικόνα σε ένα συγκεκριμένο σημείο του αρχείου πολυμέσων (ήχος ή βίντεο). Για παράδειγμα, εάν υπάρχει ένα μεγάλο αρχείο ήχου που καθοδηγεί ένα σύνολο βημάτων, ίσως αποφασίσετε να το εμφανίσετε διαφορετικές εικόνεςμετά από κάθε παύση.

Ανάλογα με τις απαιτήσεις, η σχεδιαστική λύση μπορεί να είναι πολύ περίπλοκη και μπορεί να χρειαστεί να απλοποιηθεί και να επιτευχθεί καλύτερη απόδοσηΑξίζει να χωρίσετε τον ήχο σε πολλά αρχεία. Αυτό θα σας επιτρέψει να φορτώσετε ένα νέο κομμάτι ήχου και να εκτελέσετε τις αντίστοιχες ενέργειες ταυτόχρονα, απλά απαντώντας στο αντίστοιχο συμβάν MediaEnded. Σε τέτοιες περιπτώσεις, θα χρειαστεί να συγχρονίσετε κάτι με μεγάλη, συνεχή αναπαραγωγή του αρχείου πολυμέσων.

Ένα κόλπο για να συνδέσετε την αναπαραγωγή με άλλες ενέργειες είναι να χρησιμοποιήσετε κινούμενα σχέδια βασικού καρέ. Αυτό το κινούμενο σχέδιο μπορεί να τοποθετηθεί μαζί με το MediaTimeline στο ίδιο storyboard. Ομοίως, μπορείτε να εφαρμόσετε συγκεκριμένες χρονικές μετατοπίσεις σε ένα κινούμενο σχέδιο που θα αντιστοιχούν σε συγκεκριμένα χρονικά σημεία στο αρχείο ήχου. Στην πραγματικότητα, είναι ακόμη δυνατό να χρησιμοποιήσετε ένα πρόγραμμα τρίτου κατασκευαστή που μπορεί να σχολιάσει ήχο και να εξάγει μια λίστα σημαντικά σημείαχρόνος.

Στη συνέχεια, αυτές οι πληροφορίες χρησιμοποιούνται για να ορίσετε την ώρα για το καθένα πλαίσιο κλειδιού. Όταν χρησιμοποιείτε κινούμενα σχέδια βασικού καρέ, είναι σημαντικό να ορίσετε την ιδιότητα Storyboard.SlipBehavior σε Slip. Αυτό θα καθορίσει ότι η κινούμενη εικόνα του βασικού καρέ δεν θα πρέπει να ξεπεράσει τη γραμμή MediaTimeline εάν παρουσιαστεί καθυστέρηση αναπαραγωγής. Αυτό είναι σημαντικό επειδή το MediaTimeline μπορεί να επιβραδύνει λόγω αποθήκευσης στην προσωρινή μνήμη (όταν εξαρτάται από τη ροή από τον διακομιστή) ή, πιο συχνά, λόγω καθυστέρησης στη φόρτωση.

ΣΕ παρακάτω κώδικαεπιδεικνύεται η σήμανση βασικό παράδειγμαχρησιμοποιώντας ένα αρχείο ήχου με δύο συγχρονισμένα κινούμενα σχέδια. Το πρώτο αλλάζει το κείμενο στην ετικέτα όταν φτάσει συγκεκριμένο μέροςσε αρχείο ήχου. Το δεύτερο δείχνει έναν μικρό κύκλο στη μέση της αναπαραγωγής ήχου που πάλλεται στο χρόνο λόγω της αλλαγής στην ιδιότητα Opacity:

Αυτή τη στιγμή εργάζομαι στο πρώτο μου έργο επί πληρωμή. Μεταξύ άλλων, αυτό το έργο απαιτεί να κάνω στυλ και να γράφω σενάρια για τα ρυθμιστικά. Υπάρχουν λίγα ενδιαφέρουσες στιγμέςπου θα ήθελα να επιστήσω την προσοχή σας, όπως ζητήματα εμφάνισης σε IE, Android WebKit και σωστή χρήσηεισαγωγή και αλλαγή συμβάντων. Και σύντομη κριτικήσύνταξη.

Εδώ είναι το παράδειγμά μου. Στη συγκεκριμένη περίπτωση, οι Ολλανδοί χρήστες καλούνται να χρησιμοποιήσουν ρυθμιστικά για να μοιράσουν 100 εκατομμύρια ευρώ κονδυλίων του προϋπολογισμού μεταξύ πολλών τμημάτων. Εν γενική σημασίαΌλα τα ρυθμιστικά δεν πρέπει να υπερβαίνουν τα 100 (εκατομμύρια), κάτι που απαιτεί τη σύνταξη ενός μικρού σεναρίου.

Ρυθμιστικό, κομμάτι και ρυθμιστικό

Εδώ είναι το ρυθμιστικό. Τεχνικά είναι γνωστό ως, και δεν υποστηρίζεται από IE9 και κάτω.

Εδώ είναι ο κώδικας HTML:

Ένα ρυθμιστικό αποτελείται από μια διαδρομή κατά μήκος της οποίας ο χρήστης σέρνει το ρυθμιστικό. Μπορείτε να εφαρμόσετε στυλ στο κομμάτι και το ρυθμιστικό, αλλά όχι σενάρια.

Βασικά Στυλ

Η διαμόρφωση των ρυθμιστικών δεν είναι τόσο δύσκολη. Το ρυθμιστικό και το κομμάτι μπορούν να διαμορφωθούν, αν και τα απαιτούμενα ψευδοστοιχεία διαφέρουν ανάλογα με το πρόγραμμα περιήγησης:

Για το ρυθμιστικό χρησιμοποιήστε -webkit-slider-thumb , -moz-range-thumb ή -ms-thumb .

Το κομμάτι μπορεί να "προσπελαστεί" χρησιμοποιώντας -webkit-slider-runnable-track , -moz-range-track ή -ms-track .

Δεν μπορείτε να συνδυάσετε αυτούς τους επιλογείς σε έναν κανόνα, παρόλο που είναι πιο σωστό να χρησιμοποιείτε τα ίδια στυλ για όλα τα προγράμματα περιήγησης (εκτός από την εσοχή για το ρυθμιστικό). Εάν το πρόγραμμα περιήγησης βρει έναν επιλογέα που δεν αναγνωρίζει, αγνοεί όλους τους άλλους. Έτσι θα πρέπει να επαναλάβετε τον εαυτό σας ή να χρησιμοποιήσετε Γεννήτρια CSSστην πλευρά του διακομιστή.

Το IE και το MS Edge απαιτούν διαφανές χρώμα και χρώμα περιγράμματος στο κομμάτι, διαφορετικά θα εμφανίσουν τα προεπιλεγμένα στυλ κομματιού. Απαιτούν επίσης διαφορετική συμπλήρωση για το ρυθμιστικό από άλλα προγράμματα περιήγησης.

Στο παράδειγμά μου, το ύψος του ρυθμιστικού είναι περίπου 40 pixel. Αποδεικνύεται ότι τα κύρια στυλ ρυθμιστικού έχουν ρυθμιστεί σε ιδιότητα υπερχείλισης: κρυφό , που κρύβει πλέονρυθμιστικό στο Edge και στο IE. Για να το διορθώσω, έπρεπε να ορίσω ρητά το ύψος του ρυθμιστικού.

Στο IE, αλλά όχι στο Edge, το ρυθμιστικό έχει εσοχή. Ρυθμίστε λοιπόν το padding: 0 και γλιτώστε από πονοκέφαλο.

Έχω διαβάσει αρκετές φορές ότι το MS Edge πρέπει να υποστηρίζει ιδιότητες -webkit. Αλλά στην πράξη αποδείχθηκε ότι είναι αδύνατο να εργαστεί κανείς με ένα σύνολο στυλ τόσο για το Edge όσο και για το WebKit/Blink. Συνιστώ να χρησιμοποιείτε ξεχωριστά στυλ -ms-, έστω και μόνο επειδή χρειάζονται για τα IE10 και IE11. Είναι καλύτερο να ορίσετε τα στυλ -ms- μετά το -webkit- : με αυτόν τον τρόπο τα στυλ -ms- θα εκτελεστούν ακριβώς στο Edge.

Σε προγράμματα περιήγησης που είναι κατασκευασμένα στις μηχανές WebKit και Blink, το ρυθμιστικό ορίζει από προεπιλογή το μέγεθος πλαισίου: border-box , ενώ σε όλα τα άλλα προγράμματα περιήγησης, η τιμή αυτής της ιδιότητας είναι content-box . Είναι καλύτερα να ορίσετε ρητά το μέγεθος του κουτιού για το ρυθμιστικό.

Το WebKit και το Blink απαιτούν επίσης -webkit-appearance: κανένα , αλλά με μία εξαίρεση. Δες παρακάτω.

Πρότυπο CSS

Όλα αυτά τα δευτερεύοντα ζητήματα έχουν ως αποτέλεσμα το ακόλουθο πρότυπο CSS:

input ( -webkit-appearance: none; height: 35px; /* set your height */ padding: 0; /* styles your slider */ ) input::-webkit-slider-thumb ( -webkit-appearance: none; box -sizing: content-box; /* διαμορφώνει το στυλ του ρυθμιστικού σας */ ) input::-moz-range-thumb ( /* ρυθμίζει ξανά το ρυθμιστικό σας */ ) εισαγωγή::-ms-thumb ( /* θα πρέπει να ακολουθήσει -webkit- */ /* διαμορφώνει ξανά το ρυθμιστικό σας */ /* μπορεί να χρειάζεται διαφορετική συμπλήρωση */ ) input::-webkit-slider-runnable-track ( /* διαμορφώνει το στυλ του κομματιού σας */ ) input::-moz-range-track ( / * διαμορφώνει ξανά το στυλ του κομματιού σας */ ) input::-ms-track ( /* πρέπει να ακολουθεί το -webkit- */ border-color: transparent; color: transparent; /* διαμορφώνει ξανά το στυλ του κομματιού σας */ )

ιδιότητα εμφάνισης και Σφάλμα Android WebKit

Ένα άλλο μειονέκτημα στα προγράμματα περιήγησης που βασίζονται στο WebKit και στο Blink είναι ότι πρέπει να ορίσετε την ιδιότητα -webkit-appearance: none τόσο στο slider όσο και στο slider (αλλά όχι στο κομμάτι). Αυτό φαίνεται στο Πρότυπο CSSπου δόθηκε παραπάνω.

Το πραγματικό πρόβλημα είναι ότι το Android WebKit απαιτεί από εσάς να μην χρησιμοποιήσετε αυτήν τη δήλωση. Εάν προσθέσετε -webkit-appearance: none , το Android WebKit δεν θα αποδώσει σωστά τα στυλ σας. Η κατάργηση αυτού του κώδικα διορθώνει το σφάλμα, αλλά στη συνέχεια τα στυλ ρυθμιστικού δεν θα εμφανίζονται στο Safari, στο Chrome και σε ορισμένα άλλα προγράμματα περιήγησης. Ας λύσουμε αυτό το πρόβλημα μαζί.

Ορίσαμε -webkit-appearance: none σε CSS, αυτό μόνη απόφασηπου έχει μέλλον. Στο Android WebKit θέλουμε να αλλάξουμε την τιμή σε slider-horizontal. Πώς όμως γνωρίζουμε ότι βρισκόμαστε στο Android WebKit;

Αναγνώριση προγράμματος περιήγησης; Αυτό δεν συνηθίζεται στους κύκλους μας - το οποίο είναι για το καλύτερο: δεν θα λειτουργούσε στο Xiaomi Chromium 34 (ή 35), το οποίο βασίζεται στο Chromium και επομένως απαιτεί την τιμή none, αλλά ταυτόχρονα «μασκάρει» ως Android.

Το αρχικό μου σχέδιο ήταν να αποκτήσω πρόσβαση στα στυλ του ρυθμιστικού και να δω αν ταιριάζουν με το δικό μου. Εάν δεν ταιριάζουν, τότε χρησιμοποιούμε slider-horizontal :

window.getComputedStyle(slider,"::-webkit-slider-thumb").height;

Αποδεικνύεται ότι αυτή η προσέγγιση εξάγει πάντα τα προεπιλεγμένα στυλ, όχι το CSS σας. Μιλώντας μέσα γενικό περίγραμμα, τα σενάρια που προσπαθούν να κάνουν κάτι με ένα κομμάτι ή ένα ρυθμιστικό συνήθως δεν λειτουργούν.

Στη συνέχεια είδα ότι αυτή η χρήση του getComputedStyle() δεν υποστηρίζεται στο Android WebKit. Δεν επιστρέφονται στυλ, ούτε καν προεπιλεγμένα στυλ.

Έγραψα λοιπόν ένα κλασικό κόλπο που χρησιμοποιεί ένα σφάλμα για να απαλλαγεί από ένα άλλο άσχετο. Ευτυχώς, αυτό είναι ένα ασφαλές τέχνασμα, καθώς και τα δύο σφάλματα μπορούν να εμφανιστούν μόνο στο Android WebKit και αυτό το πρόγραμμα περιήγησης δεν είναι πλέον σε εξέλιξη:

var testAndWK = window.getComputedStyle(slider,"::-webkit-slider-thumb").height; if (!testAndWK) ( slider.style.WebkitAppearance = "slider-horizontal"; )

Μπορείτε να εκτελέσετε τη δοκιμή μία φορά και να χρησιμοποιήσετε τα αποτελέσματα για κάθε ρυθμιστικό. Ανεξάρτητα από την ιδιότητα CSS που δοκιμάζετε, ελέγξτε αν υπάρχει πράγματι. Εάν δεν επιστραφεί τιμή, ορίστε -webkit-appearance: slider-horizontal για κάθε slider. Το πρόβλημα λύθηκε. Ακόμα καλύτερα, άλλα προγράμματα περιήγησης μας αγνοούν ενώ χρησιμοποιούμε -webkit- .

Γέμισμα της γραμμής προόδου

Στο παράδειγμά μου, το κομμάτι στα αριστερά του ρυθμιστικού θα πρέπει να έχει διαφορετικό χρώμα φόντου από το κομμάτι στα δεξιά. Το IE/Edge και ο Firefox προτείνουν τη χρήση ψευδοστοιχείων για αυτό, ενώ το WebKit και το Blink όχι. Αυτός ο κώδικας λύνει το πρόβλημα σε όλες τις εκδόσεις του IE, του Firefox και του Edge:

input::-ms-fill-lower ( background-color: #5082e0; ) input::-moz-range-progress ( background-color: #5082e0; )

Όσον αφορά τα προγράμματα περιήγησης που βασίζονται σε WebKit και Blink, απαιτείται λύση με JavaScript. Δανείστηκα το δικό μου από παραδείγματα Ana Tudor. Αυτή η λύση χρησιμοποιεί γραμμική κλίσημε ένα χρώμα στοπ που υπολογίζεται από την τρέχουσα τιμή του ρυθμιστικού. Κοιτάξτε το σενάριο, ειδικά τον κώδικα συνάρτησης handleSlider().

Συμβουλές εργαλείων

Η Ana Tudor έδειξε επίσης πώς το ψευδοστοιχείο :before μπορεί να χρησιμοποιηθεί ως επεξήγηση εργαλείου με στυλ που περιέχει την τρέχουσα τιμή. Δυστυχώς, αποδεικνύεται ότι ο IE/Edge και ο Firefox δεν υποστηρίζουν :before ή :after σε αυτήν την περίπτωση. Το IE/Edge έχει μια ενσωματωμένη επεξήγηση εργαλείου (δείτε παρακάτω), αλλά ο Firefox δεν μπορεί να εμφανίσει συμβουλές εργαλείων.

Δοκίμασα ένα κινούμενο στοιχείο που αντιδρά στην κίνηση του ρυθμιστικού, αλλά η σύνταξη σεναρίων δεν λειτουργεί και είναι αδύνατο να ληφθούν οι τρέχουσες συντεταγμένες του ρυθμιστικού. Προσπάθησα επίσης να χρησιμοποιήσω την τρέχουσα τιμή του ρυθμιστικού αντί για συντεταγμένες, αλλά η προσπάθεια απέτυχε. Τελικά, αποφασίσαμε να χρησιμοποιήσουμε μια στατική επεξήγηση εργαλείου (η οποία στην πραγματικότητα δεν μοιάζει με επεξήγηση εργαλείου).

Το IE/Edge έχει μια ενσωματωμένη επεξήγηση εργαλείου που ως επί το πλείστον δεν μπορεί να διαμορφωθεί. Ευτυχώς, μπορείτε να το κρύψετε:

input::-ms-tooltip (εμφάνιση: καμία; )

Εισαγωγή και αλλαγή συμβάντων

Καθώς ο χρήστης μετακινεί το ρυθμιστικό κατά μήκος της διαδρομής, το ρυθμιστικό μπορεί να ενεργοποιήσει την είσοδο ή να αλλάξει συμβάντα. Ορισμένα προγράμματα περιήγησης "αναπαράγουν" συνεχώς συμβάντα ενώ κινούνται, άλλα μόνο μετά τη διακοπή της κίνησης.

Κατά την παρακολούθηση των ενεργειών χρήστη με ένα ρυθμιστικό, παρεμποδίστε την εισαγωγή και αλλάξτε συμβάντα. Στη συνέχεια, καλέστε το πρόγραμμα χειρισμού συμβάντων όταν ο χρήστης σταματήσει να μετακινεί το ρυθμιστικό. Αυτό δίνει σταθερά αποτελέσματα σε όλα τα προγράμματα περιήγησης.

Τελευταία ενημέρωση: 31/10/2015

TrackBar

Το TrackBar είναι ένα στοιχείο που σας επιτρέπει να εισάγετε αριθμητικές τιμές μετακινώντας ένα ρυθμιστικό.

Μερικοί σημαντικές ιδιότητες TrackBar:

Προσανατολισμός: ορίζει τον προσανατολισμό του ρυθμιστικού - οριζόντια ή κάθετη

TickStyle: ορίζει τη θέση των σημαδιών στο ρυθμιστικό

TickFrequency: Ρυθμίζει τη συχνότητα των σημαδιών στο ρυθμιστικό

Ελάχιστο : Ελάχιστη δυνατή τιμή στο ρυθμιστικό (προεπιλογή 0)

Μέγιστη: μέγιστη δυνατή τιμή στο ρυθμιστικό (προεπιλογή 10)

Τιμή : Η τρέχουσα τιμή του ρυθμιστικού. Πρέπει να είναι μεταξύ ελάχιστου και μέγιστου

Η ιδιότητα TickStyle μπορεί να λάβει διάφορες τιμές:

Κανένα: χωρίς διαιρέσεις

Και τα δύο: τα σημάδια από σημάδια βρίσκονται και στις δύο πλευρές του ρυθμιστικού

Κάτω δεξιά: ένα κατακόρυφο ρυθμιστικό έχει σημάδια επιλογής στα δεξιά, ενώ ένα οριζόντιο ρυθμιστικό έχει σημάδια στο κάτω μέρος

TopLeft: ένα κάθετο ρυθμιστικό έχει σημάδια επιλογής στα αριστερά, ενώ ένα οριζόντιο ρυθμιστικό έχει σημάδια στο επάνω μέρος (προεπιλογή)

Τα πιο σημαντικά συμβάντα στοιχείων περιλαμβάνουν το συμβάν κύλισης, το οποίο σας επιτρέπει να επεξεργάζεστε τη μετακίνηση του ρυθμιστικού από το ένα τμήμα στο άλλο. Το οποίο μπορεί να είναι χρήσιμο εάν χρειαζόμαστε, για παράδειγμα, να ρυθμίσουμε την κατάλληλη ένταση ήχου ανάλογα με την τιμή του ρυθμιστικού ή κάποιες άλλες ρυθμίσεις:

Δημόσια μερική κλάση Form1: Form ( public Form1() ( InitializeComponent(); // ρύθμιση του χειριστή συμβάντων Scroll trackBar1.Scroll+=trackBar1_Scroll; ) private void trackBar1_Scroll(object sender, EventArgs e) ( label1.Text = String.Format(" Τρέχουσα τιμή: (0)", trackBar1.Value); ) )

Μετρών την ώραν

Το χρονόμετρο είναι ένα στοιχείο για την εκτέλεση ενεργειών που επαναλαμβάνονται μετά από μια συγκεκριμένη χρονική περίοδο. Αν και δεν είναι οπτικό στοιχείο, μπορεί επίσης να συρθεί από τη γραμμή εργαλείων στη φόρμα:

Οι πιο σημαντικές ιδιότητες και μέθοδοι χρονοδιακόπτη είναι:

Ενεργοποιημένη ιδιότητα: Πότε αληθήςυποδεικνύει ότι το χρονόμετρο θα ξεκινήσει όταν εκκινηθεί η φόρμα

Ιδιότητα διαστήματος: καθορίζει το διάστημα σε χιλιοστά του δευτερολέπτου στο οποίο θα ενεργοποιηθεί ο χειριστής συμβάντων Tick για το χρονόμετρο

Μέθοδος Start(): ξεκινά το χρονόμετρο

Μέθοδος Stop(): σταματά το χρονόμετρο

Για παράδειγμα, ας ορίσουμε απλή φόρμα, στο οποίο θα προσθέσουμε ένα κουμπί και ένα χρονόμετρο. Στο αρχείο κώδικα φόρμας θα ορίσουμε τον ακόλουθο κώδικα:

Δημόσια μερική κλάση Form1: Form ( int koef = 1; public Form1() ( InitializeComponent(); this.Width = 400; button1.Width = 40; button1.Left = 40; button1.Text = ""; button1.BackColor = Color.Aqua; timer1.Interval = 500; // 500 milliseconds timer1.Enabled = true; button1.Click += button1_Click; timer1.Tick += timer1_Tick; ( if (button1.Left == (this.Width-button1.Width-10)) ( koef=-1; ) other if (button1.Left == 0) ( koef = 1; ) button1.Left += 10 * koef; ) // button click handler void button1_Click(object sender, EventArgs e) ( if(timer1.Enabled==true) (​timer1.Stop(); ) else (timer1.Start(); ) )

Εδώ, ο κατασκευαστής φόρμας ορίζει τις αρχικές τιμές για το χρονόμετρο, το κουμπί και τη φόρμα.

Μετά από κάθε διάστημα χρονοδιακόπτη, θα ενεργοποιηθεί ο χειριστής timer1_Tick, στον οποίο η οριζόντια θέση του κουμπιού αλλάζει χρησιμοποιώντας την ιδιότητα button1.Left. Και χρησιμοποιώντας την πρόσθετη μεταβλητή koef, μπορείτε να ελέγξετε την κατεύθυνση της κίνησης.

Επιπλέον, χρησιμοποιώντας το κουμπί χειρισμού κλικ κουμπιού1_Click, μπορείτε είτε να σταματήσετε το χρονόμετρο (και μαζί του την κίνηση του κουμπιού) είτε να το ξεκινήσετε ξανά.

Γραμμή προόδου

Το στοιχείο ProgressBar χρησιμοποιείται για να παρέχει στον χρήστη πληροφορίες σχετικά με την πρόοδο μιας εργασίας.

Οι πιο σημαντικές ιδιότητες του ProgressBar:

Ελάχιστη: ελάχιστη δυνατή τιμή

Μέγιστη: μέγιστη δυνατή τιμή

Τιμή : τρέχουσα τιμή του στοιχείου

Βήμα : το βήμα με το οποίο θα αλλάξει η τιμή όταν καλείται η μέθοδος PerformStep

Για να προσομοιώσετε την εργασία της γραμμής προόδου, τοποθετήστε ένα χρονόμετρο στη φόρμα και ορίστε τον ακόλουθο κώδικα στον κώδικα φόρμας:

Δημόσια μερική κλάση Form1: Form ( public Form1() ( InitializeComponent(); timer1.Interval = 500; // 500 milliseconds timer1.Enabled = true; timer1.Tick += timer1_Tick; ) // timer Tick handler event void timer(object1_T αποστολέας, EventArgs e) ( progressBar1.PerformStep(); ) )

Το ρυθμιστικό έχει σχεδιαστεί για να εισάγει αριθμούς σε ένα καθορισμένο εύρος, αλλά σε αντίθεση με το πεδίο, έχει διαφορετική διεπαφή και χρησιμοποιείται σε περιπτώσεις όπου δεν είναι ιδιαίτερα σημαντικό να υποδεικνύεται ακριβής αξία. Στο Σχ. 1 δείχνει την εμφάνιση του ρυθμιστικού σε διαφορετικά προγράμματα περιήγησης.

Ρύζι. 1. Προβολή ολίσθησης σε προγράμματα περιήγησης

Η σύνταξη για τη δημιουργία ενός ρυθμιστικού είναι η εξής.

Εδώ το min είναι ο ελάχιστος αριθμός στο εύρος (προεπιλογή 0), το max είναι ο μέγιστος αριθμός (προεπιλογή 100), το βήμα είναι το βήμα αλλαγής αριθμών (προεπιλογή 1), η τιμή είναι η τρέχουσα τιμή. Από προεπιλογή, η τιμή υπολογίζεται χρησιμοποιώντας τον τύπο:

Αν μέγιστη τιμήείναι μικρότερη από την ελάχιστη τιμή, τότε η τιμή είναι ίση με min .

Τα χαρακτηριστικά είναι προαιρετικά, μπορούν να παραλειφθούν, οπότε παίρνουν προεπιλεγμένες τιμές.

Ανεξάρτητα από το ελάχιστο και μέγιστος αριθμόςΤο πλάτος του ρυθμιστικού παραμένει το ίδιο.

Τα ίδια τα ρυθμιστικά χρησιμοποιούνται σπάνια στην «καθαρή» μορφή τους, καθώς δεν παρέχουν την απαραίτητη ανατροφοδότηση στον χρήστη, αλλά σε συνδυασμό με το JavaScript γίνονται ένα ισχυρό και βολικό στοιχείο διεπαφής. Στο παράδειγμα 1, το ρυθμιστικό χρησιμοποιείται για την αλλαγή του μεγέθους της εικόνας· αυτή η δυνατότητα χρησιμοποιείται συχνά σε διάφορες γκαλερί φωτογραφιών.

Παράδειγμα 1: Χρήση ρυθμιστικού

HTML5 IE 10 Cr Op Sa Fx

Λειτουργία ρυθμιστικού sizePic() ( size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )

Μέγεθος μοτίβου:

ΣΕ σε αυτό το παράδειγμαΌταν ελέγχεται το ρυθμιστικό, ενεργοποιείται το συμβάν oninput, το οποίο καλεί τη συνάρτηση sizePic. Αυτή η λειτουργία αλλάζει το μέγεθος της εικόνας ανάλογα με εγκατεστημένος χρήστηςτιμές ρυθμιστικού. Έτσι, το πλάτος της εικόνας, εάν είναι επιθυμητό, ​​μειώνεται ή, αντίθετα, αυξάνεται. Το αποτέλεσμα του παραδείγματος στην ακραία τιμή του ρυθμιστικού in πρόγραμμα περιήγησης Chromeφαίνεται στο Σχ. 2.

Ρύζι. 2. Ελέγξτε το πλάτος της εικόνας χρησιμοποιώντας το ρυθμιστικό

Οι παλαιότερες εκδόσεις προγραμμάτων περιήγησης που δεν υποστηρίζουν μια τιμή εύρους για το χαρακτηριστικό type αποδίδουν το πεδίο φόρμας ως πεδίο κειμένου.