10.1 I planned to write the scroll bar of the mediaplay control to control the function of media playback. Unfortunately, it is stuck here. My drag-and-drop progress bar is always unsatisfactory. By the end of the evening I saw a video called drag and drop functionality in Silverlight 1.1, I found that I only wrote less than one line. Code .
However, I don't want to write any more about the mediaplay control, because Microsoft provides the ASP: media component in the aspnetfutures component package. This component can be used on the Silverlight page and has more powerful functions than I have written, it also supports skin replacement.
Now, how can I control media playback by dragging the progress bar? You need to use a mediaelement attribute position in Silverlight, which is a timespan. After setting its value, you can locate the time point you want to play.
If you look for the relationship between the progress bar and the position of mediaelement. Let's look at the figure below:
| <-- Left --> | currentposition: X |
| <------------------------------------ Totallength -------------------------> |
The left and the total length of the scroll bar in the middle correspond to the position of the current time point for media playback and the total time required for media playback. naturalduration.
Another point: to obtain the total playback time of the played media, use the naturalduration attribute of mediaelement.
So we can use this formula to represent:
Position = (left/totallength) * naturalduration
Well, we have solved a technical point. How can we drag a scroll bar as a more important technical point? Three mouse events are involved:
Mouseleftbuttondown, mousemove, mouseleftbuttonup.That is to say, when you drag and drop an item with the mouse, you must first press the mouse
Left click, drag and drop, drag and drop to the specified position, then open the left mouse button, fromProgramFrom a point of view, these three events have happened successively.
Note that the capturemouse () method is used to capture the mouse. When the left mouse button is opened, release the mouse releasemousecapture ();
The core code is as follows:
// Click the left mouse button
Void Timethumb_mouseleftbuttondown ( Object Sender, mouseeventargs E)
{
(System. Windows. Media. Visual) sender). capturemouse (); // Mouse capture
This . Timelinepointstart = E. getposition (parent As Uielement). X; // Obtain the X axis of the mouse
Timelinedrag = True ; // Start the drag-and-drop operation
}
// Move the mouse
Void Timethumb_mousemove ( Object Sender, mouseeventargs E)
{
If (Timelinedrag)
{
Timelinepoinxend = E. getposition (parent As Uielement). X;
Double Delta = Timelinepoinxend - Timelinepointstart;
Double Left = ( Double ) Timethumb. getvalue (canvas. leftproperty );
Timelinepointstart = Timelinepoinxend; // I just dropped this code.
This . Timethumb. setvalue (canvas. leftproperty, left + Delta );
}
}
// Open the left mouse button
Void Timethumb_mouseleftbuttonup ( Object Sender, mouseeventargs E)
{
Timelinedrag = False ;
This . Videowindow. Pause (); // Pause playback
Double Left = ( Double ) Timethumb. getvalue (canvas. leftproperty );
Double Rate = Left / ( This . Timeslider. Width - This . Timethumb. width ); // Ratio of the video progress to the new position by dragging the video to the new position
Long Ticks = Convert. toint64 (Rate * This . Videowindow. naturalduration. timespan. ticks );
This . Videowindow. Position = New Timespan (ticks );
This . Videowindow. Play ();
(System. Windows. Media. Visual) sender). releasemousecapture ();
}
Source codeDownload:/files/wangergo/mediaplaycontroldrag.rar
