Custom transport controls in media element. IsFullWindow = true - windows-phone-8.1

I am using mediaElement and IsFullWindow property is set to true.
I need to use some control buttons, but when is fullscreen mode active, my buttons (like play, pause, stop...) are hidden behind mediaElement.
Ok. I can use
AreTransportControlsEnabled="True"
but I want my own controls.
Here is tutorial http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh986967.aspx
but it does not use IsFullWindow property.
I want reach something like this: (custom transport controls in fullscreen mode)
(screenshot from nokia video trimmer)

You'll have to lay out the page manually, which isn't that hard.
Starting with a landscape page, you can resize the MediaElement so that it takes up all of the page.
You are then free to show your own controls above the MediaElement.
However it looks like this will potentially have a battery/performance cost, as it means you won't be able to benefit from the "system level optimizations" that IsFullWindow would give you.
You might be able to toggle between this manual full window and the optimized IsFullWindow version, but I haven't tried to see what this looks like.

In order to use "system level optimization" in IsFullWindow, unlike how the quoted page in MSDN page shows (in the question), using StackPanel for transport controls and making MediaElement stretch to mimic fullscreen, use Popup for transport controls. Because Popups always stay on top of other windows, even MediaElement, they will appear even in fullscreen. Use 'HorizontalOffset' and 'VerticalOffset' property of the popup to move them relative to immediate parent. This is shown in sample at https://code.msdn.microsoft.com/windowsapps/basic-media-playback-003619be.

Related

can the backdrop app be styled, customized or replaced?

On Chromecast, is there any way to customize, style (with CSS), or replace the backdrop application?
(That's the application that runs as a sort of screen saver, when nothing's being cast to the device).
My ideal backdrop app would be an iframe showing something I could control.
No, it cannot be styled or replaced. You have some level of control on what images or information show up there (can be set in your Chromecast app); that is all.

When Media Player's windowlessVideo Param goes bad, now what?

Background:
We have a web "app", where on one web page we have the following:
An embedded Windows Media Player object. It's surrounded by listview's on the left, and some graphical elements on the bottom. The listview's (there are a couple), allow for data entry. Therefore, dialogs pop up to allow you to enter in various text.
Because of these pop-up dialogs (not only the data entry dialogs, but regular alerts/MessageBoxes), one of the params of the embedded Windows Media Player object is:
<param name="windowlessVideo" value="true">
Otherwise, any dialog of any type will fall behind the Media Player object and you won't be able to see it. Here's an example stackoverflow solution to the dialog problem using windowlessVideo.
Here's the issue:
And we didn't see this until more and more people started using Windows 7 and Windows Media Player 12, with the windowlessVideo setting on, it causes performance to degrade. Sort of a lag. Not the type of lag where I type a few words, a second goes by, and then you see the words that I typed finally appear. No. Imagine typing this sentence:
I am typing into a dialog box some text.
When you look up, various characters will be missing and it will look something like:
amtpin int adilg box sme txt.
So, as you can imagine, this is unacceptable. People just can't type into the dialogs anymore.
Of course, when you look at msdn it says this:
In Windows Vista, rendering video in windowless mode can degrade
performance.
OK, yep. I see it. Now what?
Before Windows Media Player 12, I used to be able to go to Tools -> Options -> Performance tab and under Video acceleration there would be a slider, and an Advanced button with a ton of other options. I've fixed a 'flickering' video problem before by turning the slider to None. So, I was hoping there was some Media Player setting I could modify to rectify this. Nope. There are no longer any video acceleration settings, and there are like 4 checkboxes under 'DVD and video playback' that don't affect things.
Meanwhile, if all I do is remove the windowlessVideo setting, I don't get that lag at all. I add it back, I get the lag. I take it away, no lag. But all that does is replace one problem with another. I might fix the lag, but now all my dialogs are behind the Media Player.
OK, Microsoft. Thanks! You win. But, now what? Anybody have any ideas? Thanks!

Why does adding a ManipulationDelta event handler to an Image prevent scrolling?

I'm encountering a problem while attempting to add functionality like pinch-zoom to an application that features an Image control inside of a ScrollView, which is inside a FlipView. The Image control and ScrollView control are in the ItemTemplate of the FlipView.
The idea is that if the user pinch-zooms on the Image it will activate code which will create and display an enlarged version of the image in the Image control. (The Image control in this case contains a PDF page, so we want a bigger version of the PDF page, instead of just an enlarged and fuzzier view of the PDF page).
If I attach a ManipulationDelta event handler to the Image, it will catch ManipulationDelta events produced by the pinch-zoom gesture, which I can then use to create the PDF zoom effect. However...now it will not catch scroll (drag?) gestures. Or rather, these too get caught by the ManipulationDelta event handler. I'd rather avoid having to implement code at this point to handle scrolling programmatically. Do I have any options for somehow bubbling up (or "over"?) the ManipulationDelta events to whatever would handle the scrolling? I would think this would happen already, the event would bubble up to the ScrollView which would then handle scrolling. But it appears to not be happening that way.
I have e.Handled set to false in the ManipulationDelta event handler. And the ManipulationMode on the IMage control is set to "All". I've tried "Scale" but this didn't help.
Thank you!
The ScrollViewer in WinRT is optimized for performance and uses DirectManpulation under the hood. That's why it's tricky to have both scrolling from the ScrollViewer and gestures inside it.
This blog post from Rob Caplan (MS employee) gives more information:
http://blogs.msdn.com/b/wsdevsol/archive/2013/02/16/where-did-all-my-gestures-go.aspx
Unfortunately there is no good solution if the app needs both scrolling and gestures (for example, to detect CrossSlides against the scrolling). In this case the only option to get the Pointer messages everywhere is to disable Direct Manipulation everywhere, but that disables scrolling as well. To get that back the app will need to detect the scrolling gestures itself and then navigate the ScrollViewer to the new location with ScrollToHorizontalOffset or ScrollToVerticalOffset or by updating the SelectedIndex. This is tricky and will be noticeably slower than letting the ScrollViewer do its thing. It should be avoided if at all possible.
Hope this helps

WinRT WebView Control

I have the following control in a Windows Metro App:
string html = "<html><body>test content</body></head>";
myWebView.Opacity = 0.5;
myWebView.NavigateToString(html);
This works okay, but what I end up with is a blank white background with black text. What I actually want is for this to work with the current Metro style (so match the dark or light background depending on the setting). I've played with the Opacity setting, as above, but it seems to make no difference.
Is there a way to get the WebView control to mirror the current Metro style?
This is by design. WebView-Controls don't support any Opacity, cause they are kind of a special control which is rendered on top of everything.
From the MSDN docs:
WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through element name binding and the SourceName property. WebViewBrush does not have this overlay limitation.

Flex Textfield doesnot gain focus when cursor is in text field of iframe

I have a web page which has a SWF file embeded. I have an issue with the focus.
Steps to reproduce:
1)Click on a HTML Text Field which is inside a Iframe
2)Click on a Flex Field.
3)Begin to type some text.
Expected Result is the entered text should go in the Flex TextInput field but the actual Result is it goes into HTML text field.
This is the bug which was filed but closed without any resolution. The workaround suggested there doesnt work. ( bugs.adobe.com/jira/browse/SDK-12377 )
This is happening only in IE 6.0 and IE 7.0. Below is the live example.
http://drumbeatinsight.com/examples/htmlcomponent/iframe/HTMLFrameInApplication.html
Any Suggestions or workaround to solve this problem are requested.
Your browser is maintaining focus instead of giving it back to the flash player. I ran into this issue when trying to 'embed' html content inside my flex app ... accomplished by floating html iframe above the flash player.
I have to hide and restore the iframe if I want to interact with flex because the iframe needs to be on top of the flash player, but all that is easy. I would find, even if I hid the iframe, flash player was never getting keyboard focus back. You need to tell the browser to give keyboard focus back to the flash player.
Now there is no really good way to determine if you need to instruct the browser to give keyboard focus back, I end up executing this javascript on every mouse down, rather inefficient, but it was the only way to gaurentee whenever my user clicked on flash player content, that the browser gave keyboard focus back.
Execute a javascript method that looks up the embeded content by name and call focus().
Basically - document.getElementById('flexEmbedID').focus();
Use the external interface to call that on stage.mouseDown(). Lots of overhead as it executes a lot, but it will fix your problem.