title: Binding ProgressBar to MediaElement Value Issues
body: <p>I am creating a WPF application which has a <code>MediaElement</code> that plays video. I didn't like the way the <code>Slider</code> control looked. I therefore I attempted, mostly successfully to use a <code>ProgressBar</code> in its place.</p>
  
  <p>I have implemented functionality for clicking the <code>ProgressBar</code> to set the value of both itself and that of the position of the <code>MediaElement</code>. However when I also implemented a <code>DispatcherTimer</code> to increment the value of the <code>ProgressBar</code> alongside this functionality I am getting an oddity that I cannot work out where it is coming from.</p>
  
  <p>Basically when I click on the <code>ProgressBar</code>, the fill correctly updates to where the cursor is (I am setting it directly in <code>setProgressBarPosition</code>), but then moves back a bit (I am guessing, when the <code>_Tick</code> method call is made of the <code>DispatcherTimer</code>, which is setting the <code>ProgressBar.Value</code> based on the position of <code>meVideo</code>).</p>
  
  <p>The MSPaint arrow shows where I clicked, the red fill shows where it updated to, the gap between the cursor click and the position of the fill gets larger the later in the timeline I click which makes me think I have made a mistake in a calculation somewhere:</p>
  
  <p><img src="https://i.stack.imgur.com/DysJH.png" alt="Screenshot"></p>
  
  <p>I am thinking I have probably done something wrong in the setting of <code>meVideo.Position</code> in <code>pgbVideo_MouseUp</code> but I can't see it. Here is my code:</p>
  
  <pre><code>private void videoTimer_Tick(object sender, EventArgs e)
  {
      if (!isDragging)
      { 
          pgbVideo.Value = meVideo.Position.TotalSeconds;
      }
  }
  
  /*
  * Handles the clicking of the video timeline.
  */
  private void pgbVideo_MouseDown(object sender, MouseButtonEventArgs e)
  {
      double mousePosition = e.GetPosition(pgbVideo).X;
      setProgressBarPosition(mousePosition);
  
      isDragging = true;
  }
  
  /*
  * Handles the dragging of the mouse over the video timeline.
  */
  private void pgbVideo_MouseMove(object sender, MouseEventArgs e)
  {
      if (e.LeftButton == MouseButtonState.Pressed)
      {
          double mousePosition = e.GetPosition(pgbVideo).X;
          setProgressBarPosition(mousePosition);
      }
  }
  
  /*
  * Sets the position of the video timeline progressbar.
  */
  private void setProgressBarPosition(double mousePosition)
  {
      if (meVideo.Source != null)
      {
          double progressBarPosition = mousePosition / pgbVideo.ActualWidth * pgbVideo.Maximum;
  
          pgbVideo.Value = progressBarPosition;
      }
  }
  
  /*
  * Sets the position of the media element.
  */
  private void pgbVideo_MouseUp(object sender, MouseButtonEventArgs e)
  {
      if (meVideo.Source != null)
      {
          double videoPositon = meVideo.NaturalDuration.TimeSpan.Ticks * (pgbVideo.Value / pgbTime.Maximum);
  
          meVideo.Position = new TimeSpan((int)videoPositon);
      }
  
      isDragging = false;
  }
  </code></pre>
  
  <p>Thanks for reading, any help appreciated!</p>
  
  <p>EDIT: Here is my <code>_MediaOpened</code> method where I set the maximum value of the <code>ProgressBar</code>:</p>
  
  <pre><code>private void meVideo_MediaOpened(object sender, RoutedEventArgs e)
  {
      pgbVideo.Maximum = meVideo.NaturalDuration.TimeSpan.TotalSeconds;
  
      videoTimer.Start();
  
      isPlaying = true;
  }
  </code></pre>