Im working with a MediaElement object and SurfaceSlider object, I use the SurfaceSlider to control the Video position and also want the SurfaceSlider to show the current position of the video, like youtube does.
I use this code to control the position of the video, this function is called when the ValueChanged event of the SurfaceSlider object occurs...
private void SeekToMediaPosition(object sender, RoutedPropertyChangedEventArgs<double> args)
{
int SliderValue = (int)mySurfaceSlider.Value;
TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue);
myMediaElement.Position = ts;
}
I use this code to show the current position of the video...
DispatcherTimer ticks = new DispatcherTimer();
private void Element_MediaOpened(object sender, EventArgs e)
{
mySurfaceSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
ticks.Interval = TimeSpan.FromMilliseconds(1);
ticks.Tick += ticks_Tick;
ticks.Start();
myMediaElement.Play();
}
void ticks_Tick(object sender, object e)
{
mySurfaceSlider.Value = myMediaElement.Position.TotalMilliseconds;
}
The problem is when the SurfaceSlider value is changed showing the current position of the video, the ValueChanged event is called too, and the position of the video is changed, creating a loop I guess.
Is there any other event to be used when the user changes the SurfaceSlider value, or a way to handle this issue?
Thanks
Esteban,
I think there are a few things I would try.
1... Increase your TimeSpan.FromMilliseconds(1) to TimeSpan.FromMilliseconds(100) or higher. I don't think your slider needs to be polling your video so continuously.
2... I think you could set a flag in SeekToMediaPosition (SeekInProgress=true) before you set myMediaElement.Position. Then in ticks_Tick, if SeekInProgress==true, set SeekInProgress=false and don't set mySurfaceSlider.Value for one timer cycle.
I believe the original version of the code you are using comes from here: http://msdn.microsoft.com/en-us/library/ms748248.aspx ... Perhaps there is something that code was doing to prevent your problem that has been omitted from your implementation?
If the slider is jumping around, maybe there is lag between when the user places their finger down on the slider and when they move it (causing SeekToMediaPosition to fire). What you need to do is detect if the user is currently touching mySurfaceSlider in ticks_Tick (maybe there is a collection of touch points to query for intersection with mySurfaceSlider? Or does mySurfaceSlider have touchdown and touchup events?) In any case, if the user is even TOUCHING mySurfaceSlider, you shouldn't let ticks_Tick update mySurfaceSlider.Value (or for a few milliseconds after).
Related
I am making a UWP app which is supposed to be on xbox for now and maybe in future ill release it on pc and other platforms. I know that on PC and for mobile we can enable this feature with following 2 properties on the GridView or ListView.
CanReorderItems=True
CanDrop=True
But according to Microsoft Docs, drag and drop feature is not available or supported on xbox.
So what are any other options to achieve this reorder feature on xbox GridView?
UPDATE 1
So here is my backend code for the gridview. selection mode is single but I am not using selectionchanged event because that just creates lot of confusion and for now just assume that we always need to swap the items I will set the boolean later once the swapping in working perfectly.
private void SamplePickerGridView_ChoosingItemContainer(Windows.UI.Xaml.Controls.ListViewBase sender, ChoosingItemContainerEventArgs args)
{
if (args.ItemContainer != null)
{
return;
}
GridViewItem container = (GridViewItem)args.ItemContainer ?? new GridViewItem();
//should be xbox actually after pc testing
if (DeviceTypeHelper.GetDeviceFormFactorType() == DeviceFormFactorType.Desktop)
{
container.GotFocus += Container_GotFocus;
container.LostFocus += Container_LostFocus;
//container.KeyDown += Container_KeyDown;
}
args.ItemContainer = container;
}
private TVShow GotItem, LostItem;
private void Container_LostFocus(object sender, RoutedEventArgs e)
{
LostItem = OnNowAllGridView.ItemFromContainer(e.OriginalSource as GridViewItem) as TVShow;
GotItem = null;
}
private void Container_GotFocus(object sender, RoutedEventArgs e)
{
GotItem = OnNowAllGridView.ItemFromContainer(e.OriginalSource as GridViewItem) as TVShow;
if (GotItem != null && LostItem != null)
{
var focusedItem = GotItem;
var lostitem = LostItem;
var index1 = ViewModel.Source.IndexOf(focusedItem);
var index2 = ViewModel.Source.IndexOf(lostitem);
ViewModel.Source.Move(index1, index2);
}
LostItem = null;
}
u can try the code with adaptivegridview or just normal gridview of uwp if it works with that it should work with adaptivegridview as well.
Current Bheaviour items are swaped but the focus remains at same index.
Expected the focus should also move along with the item.
Your finding is true, drag and drop is not supported on Xbox out of the box (although when mouse support comes to Xbox in the future, I guess it will work).
So if you need this functionality, you will have to implement it manually from the start. One option would be to add a button, that will display on Xbox only and will read like Reorder Grid.
When this "reorder" mode were enabled, you have several solutions available.
The easiest solution for you would be to set the SelectionMode to Single and when a item is selected, you would bring it to fromt of the underlying collection.
collection.Remove( selectedItem );
collection.Insert( 0, selectedItem );
This bring to front solution was implemented on the Xbox One dashboard for reordering tiles.
Second option would be to set the SelectionMode to Multiple, where user would first select one item and then a second one. After that you could move the first selected item before the second selected:
collection.Remove( firstSelectedItem );
var targetIndex = collection.IndexOf( secondSelectedItem );
collection.Insert( targetIndex, firstSelectedItem );
The last solution is the most complex. With SelectionMode = Single you would select a single item and then observe the direction in which the user focus moves and move the tile "in real time". This is the most user friendly, but hardest to implement reliably.
Just as an outline of the third solution - you could capture the GotFocus event if you implement a custom template of the GridView:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"
GotFocus="GridViewItem_GotFocus"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Now within this GotFocus handler you could retrieve the item that has currently focus from the EventArgs.OriginalSource. This way you could know which item got the focus and you could swap it with the item the user selected.
Update - hacky solution
I have come up with a hacky approach that solves the GotFocus/LostFocus mess.
The problem with GotFocus is that when we move the item in collection, the focus gets confused. But what if we didn't physically move the items at all?
Suppose your item type is TVShow. Let's create a wrapper around this type:
public class TVShowContainer : INotifyPropertyChanged
{
private TVShow _tvShow;
public TVShow TvShow
{
get => _tvShow;
set
{
_tvShow = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Now change the collection item type to this new "wrapper" type. Of course, you also have to update your GridView DataTemplate to have the right references. Instead of "{Binding Property}" you will now need to use "{Binding TvShow.Property}", or you can set the DataContext="{Binding TvShow}" attribute to the root element inside the DataTemplate.
But you may now see where I am going with this. Currently you are using Move method to move the items in the collection. Let's replace this with a swap:
var item1 = focusedItem.TvShow;
focusedItem.TvShow = LostItem.TvShow;
LostItem.TvShow = item1;
This is a big difference, because we no longer change the collection itself, but just move the references to items that are wrapped in a "static" container. And thanks to bindings the items will properly display where they should.
This is still a hacky solution, because it requires you to wrap your items just for the sake of the reordering, but it at least works. I am however still interested in finding a better way to do this.
I am trying to move an object in a page form top to down on user finger movement using translate transform. we should see page contents as the bar goes down the page and sits at bottom.
Just like Action Center in windows phone 8.1.
Please let me know any ideas how we can design. Thanks.
Good question!
My first thought was to do something like this.
You could get the touch input location and then move a rectangle from the top of the screen and translate it down according to they Y Cord of the Touch Input.
EDIT:
Okay so here is what you can do.
Create a Canvas and position it somewhere at the top ( i gave it the height of 14 in collapsed state).
Then create a private void cn_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) event and make it set the height of the Canvas. I also included a float i to later make it snap back or cover the entire screen if the user lets go during the pull-event.
private void cn_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
cn.Height += e.DeltaManipulation.Translation.Y;
i = (float)e.CumulativeManipulation.Translation.Y;
}
And thats it. You can also add this event to make it snap back or go cover the full screen when the user lets go.
private void cn_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
if(i < 100)
{
cn.Height = 14;
}
else
{
cn.Height = Application.Current.Host.Content.ActualHeight;
}
}
Of course you can add smoother animations so it slowly goes back into the collapsed view or fills the entire page.
I hope this helps!
From the docs:
Note When a user flips through FlipView content using touch
interaction, a SelectionChanged event occurs only when touch
manipulations are complete. This means that when a user flips through
content quickly, individual SelectionChanged events are not always
generated for every item because the manipulation is still occurring.
Is there a way to configure the FlipView control to fire SelectionChanged for each flip? This behavior makes implementing paging interesting as the user, if flipping fast enough, can flip to the end of the list before more items can be added.
One solution to the problem is to extend the FlipView and monitor its ScrollViewer. Here is a quick sample of what I'm suggesting. Seems to work on horizontal flip view (haven't handled any other cases, and haven't tested too much).
public class FixedFlipView : FlipView {
public ScrollViewer ScrollViewer {
get;
private set;
}
protected override void OnApplyTemplate() {
base.OnApplyTemplate();
this.ScrollViewer = (ScrollViewer)this.GetTemplateChild("ScrollingHost");
this.ScrollViewer.ViewChanged += ScrollViewer_ViewChanged;
}
void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) {
var index = (int)this.ScrollViewer.HorizontalOffset - 2;
if (this.SelectedIndex != index) {
this.SelectedIndex = index;
}
}
}
Some things to note:
You may want to get the ScrollViewer in a different way that does not depend on its name. Like using the method in my answer here. Although, I'd guess this is fine, too.
It may be a better idea to use a separate event for this. In the code above I set the SelectedIndex property, which raises the SelectionChanged event, but it is also very likely to be doing other stuff as well, so it may be a problem in some cases.
The default behavior for the Slider.ValueChanged event is to trigger ValueChanged multiple times as the user drags the control. Is there a way to only trigger this event when the drag is over?
One thing I already tried was binding to the Thumb.DragStarted and Thumb.DragCompleted events, and adding some flags to control the process, but these events aren't fired if the user clicks in the body of the slider, outside the thumb.
If you don't want to customize the control you can handle the KeyUp event and the PointerCaptureLost events instead of handling the ValueChanged event.
private void slider_PointerCaptureLost(object sender, PointerRoutedEventArgs e)
{
HandleSliderValueChange();
}
private void slider_KeyUp(object sender, KeyRoutedEventArgs e)
{
//Make sure an arrow key, Home, or End was pressed
//either explicitly perform the flag checks
//if(e.Key.HasFlag(VirtualKey.Up & VirtualKey.Down & VirtualKey.Left & VirtualKey.Right & VirtualKey.Home & VirtualKey.End))
//or check the int values
int keyVal = (int)e.Key;
if(keyVal >= 35 && keyVal <= 40)
HandleSliderValueChange();
}
private void HandleSliderValueChange()
{
//your value changed code
}
This should call the HandleSliderValueChange method when the user finishes dragging, clicks on the slider itself, or uses the arrow, Home, or End keys to change the value.
Working on a Metro style app in C#. I have a custom control which inherits from Grid. MyGrid contains some other custom controls. I'm trying to do hit testing on those controls in the PointerReleased handler:
void MyGrid_PointerReleased(object sender, PointerRoutedEventArgs e)
{
PointerPoint pt = e.GetCurrentPoint(this);
var hits = VisualTreeHelper.FindElementsInHostCoordinates(pt.Position, this);
int breakhere = hits.Count();
}
After this code executes, hitCount is 0. If I move the PointerReleased handler one control higher in the visual tree heirarchy then hitCount is correct the first time and 0 after that. I set up a test project with similar XAML layout to try to reproduce the problem and it works correctly every time. So I'm not sure what bad thing I have done that is preventing VisualTreeHelper from working. I'm not really sure how to proceed debugging this. Any ideas what would cause this function to return no results?