- by T
While modifying the standard media player with a new look and feel for Ineta Live I saw a unique opportunity to use their logo with a dotted I with and attached arc as the scrub control.
So I created a PathListBox that I wanted an object to follow when a user did a click and drag action. Below is how I solved the problem. Please let me know if you have improvements or know of a completely different way. I am always eager to learn.
First, I created a path using the pen tool in Expression Blend (see the yellow line in image below). Then I right clicked that path and chose [Path] --> [Make Layout Path]. That created a new PathListBox. Then I chose the object I want to move down the new PathListBox and Placed it as a child in the Objects and Timeline window (see image below). If the child object (the thing the user will click and drag) is XAML, it will move much smoother than images.
Just as another side note, I wanted there to be no highlight when the user selects the “ball” to drag and drop. This is done by editing the ItemContainerStyle under Additional Templates on the PathListBox. Post a question if you need help on this and I will expand my explanation.
Here is a pic of the object and the path I wanted it to follow. I gave the path a yellow solid brush here so you could see it but when I lay this over another object, I will make the path transparent.
To animate this object down the path, the trick is to animate the Start number for the LayoutPath. Not the StartItemIndex, the Start above Span.
In order to enable animation when a user clicks and drags, I put in the following code snippets in the code behind. the DependencyProperties are not necessary for the Drag control.
namespace InetaPlayer
{
public partial class PositionControl : UserControl
{
private bool _mouseDown;
private double _maxPlayTime;
public PositionControl()
{
// Required to initialize variables
InitializeComponent();
//mouse events for scrub control
positionThumb.MouseLeftButtonDown += new MouseButtonEventHandler(ValueThumb_MouseLeftButtonDown);
positionThumb.MouseLeftButtonUp += new MouseButtonEventHandler(ValueThumb_MouseLeftButtonUp);
positionThumb.MouseMove += new MouseEventHandler(ValueThumb_MouseMove);
positionThumb.LostMouseCapture += new MouseEventHandler(ValueThumb_LostMouseCapture);
}
// exposed for binding to real slider using a DependencyProperty enables animation, styling, binding, etc....
public double MaxPlayTime
{
get { return (double)GetValue(MaxPlayTimeProperty); }
set { SetValue(MaxPlayTimeProperty, value); }
}
public static readonly DependencyProperty MaxPlayTimeProperty =
DependencyProperty.Register("MaxPlayTime", typeof(double), typeof(PositionControl), null);
// exposed for binding to real slider using a DependencyProperty enables animation, styling, binding, etc....
public double CurrSliderValue
{
get { return (double)GetValue(CurrSliderValueProperty); }
set { SetValue(CurrSliderValueProperty, value); }
}
public static readonly DependencyProperty CurrSliderValueProperty =
DependencyProperty.Register("CurrSliderValue", typeof(double), typeof(PositionControl), new PropertyMetadata(0.0, OnCurrSliderValuePropertyChanged));
private static void OnCurrSliderValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
PositionControl control = d as PositionControl;
control.OnCurrSliderValueChanged((double)e.OldValue, (double)e.NewValue);
}
private void OnCurrSliderValueChanged(double oldValue, double newValue)
{
_maxPlayTime = (double) GetValue(MaxPlayTimeProperty);
if (!_mouseDown)
if (_maxPlayTime!=0)
sliderPathListBox.LayoutPaths[0].Start = newValue / _maxPlayTime;
else
sliderPathListBox.LayoutPaths[0].Start = 0;
}
//mouse control
void ValueThumb_MouseMove(object sender, MouseEventArgs e)
{
if (!_mouseDown) return;
//get the offset of how far the drag has been
//direction is handled automatically (offset will be negative for left move and positive for right move)
Point mouseOff = e.GetPosition(positionThumb);
//Divide the offset by 1000 for a smooth transition
sliderPathListBox.LayoutPaths[0].Start +=mouseOff.X/1000;
_maxPlayTime = (double)GetValue(MaxPlayTimeProperty);
SetValue(CurrSliderValueProperty ,sliderPathListBox.LayoutPaths[0].Start*_maxPlayTime);
}
void ValueThumb_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_mouseDown = false;
}
void ValueThumb_LostMouseCapture(object sender, MouseEventArgs e)
{
_mouseDown = false;
}
void ValueThumb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_mouseDown = true;
((UIElement)positionThumb).CaptureMouse();
}
}
}
I made this into a user control and exposed a couple of DependencyProperties in order to bind it to a standard Slider in the overall project. This control is embedded into the standard Expression media player template and is used to replace the standard scrub bar. When the player goes live, I will put a link here.
