c# - MediaElement control doesnot display video only plays the audio of the video in the Grid App -
i'm using mediaelement control inside flipview of itemsdetail page of gridapp of windows 8 store app , i'm facing peculiar type of problem using it. mediaelement not displays video there's black screen on intended video output plays audio of video fine.
now peculiar part of problem in grid app there collections of items in group (i know every 1 might know this, sake of getting myself clear) , first item of every group plays video fine mean displays video , audio fine, rest of items of group not displays video plays audio of video. 1 know why happening ?
here xaml code :
<flipview x:name="flipview" automationproperties.automationid="itemsflipview" automationproperties.name="item details" tabindex="1" grid.rowspan="2" itemssource="{binding source={staticresource itemsviewsource}}"> <flipview.itemcontainerstyle> <style targettype="flipviewitem"> <setter property="margin" value="0,137,0,0"/> </style> </flipview.itemcontainerstyle> <flipview.itemtemplate> <datatemplate> <usercontrol loaded="startlayoutupdates" unloaded="stoplayoutupdates"> <scrollviewer x:name="scrollviewer" style="{staticresource verticalscrollviewerstyle}" grid.row="1"> <grid margin="120,0,20,20"> <grid.columndefinitions> <columndefinition width="400" /> <columndefinition width="40" /> <columndefinition width="360" /> <columndefinition width="40" /> <columndefinition /> </grid.columndefinitions> <border borderbrush="black" borderthickness="1" width="350" horizontalalignment="left" grid.row="0"> <mediaelement x:name="videosource" automationproperties.name="videosource" source="/assets/big_buck_bunny.mp4" horizontalalignment="center" verticalalignment="stretch" height="250" width="350" autoplay="false" islooping="true" /> </border> <border borderbrush="black" borderthickness="1" height="65" width="350" horizontalalignment="left" grid.row="1"> <stackpanel orientation="horizontal" horizontalalignment="center" verticalalignment="center"> <button x:name="playbutton" margin="0,0" click="playbutton_click" style="{staticresource playappbarbuttonstyle}" horizontalalignment="center" verticalalignment="center"/> <button x:name="pausebutton" margin="0,0" click="pausebutton_click" style="{staticresource pauseappbarbuttonstyle}" horizontalalignment="center" verticalalignment="center"/> </stackpanel> </border> </grid> </scrollviewer> </usercontrol> </datatemplate> </flipview.itemtemplate> here code behind :
private void playbutton_click(object sender, routedeventargs e) { mediaelement media = findcontrol<mediaelement>(this, "videosource") mediaelement; media.play(); } private void pausebutton_click(object sender, routedeventargs e) { mediaelement media = findcontrol<mediaelement>(this, "videosource") mediaelement; media.pause(); } private void stopbutton_click(object sender, routedeventargs e) { mediaelement media = findcontrol<mediaelement>(this, "videosource") mediaelement; media.stop(); } private dependencyobject findcontrol<t>(dependencyobject controltype, string ctrlname) { int childnumber = visualtreehelper.getchildrencount(controltype); (int = 0; < childnumber; i++) { dependencyobject child = visualtreehelper.getchild(controltype, i); frameworkelement fe = child frameworkelement; // not framework element or null if (fe == null) return null; if (child t && fe.name == ctrlname) { // found control return return child; } else { // not found - search children dependencyobject nextlevel = findcontrol<t>(child, ctrlname); if (nextlevel != null) return nextlevel; } } return null; } i hope made myself clear on problem.
so, trying work. help, though, wrote small prototype.
use code behind:
public sealed partial class mainpage : page { public mainpage() { this.initializecomponent(); } private void button_click_1(object sender, routedeventargs e) { // pause var _media = getmediaelement(sender button); _media.pause(); } private void button_click_2(object sender, routedeventargs e) { // play var _media = getmediaelement(sender button); _media.play(); } mediaelement getmediaelement(button button) { var _parent = button.parent grid; var _grandparent = _parent.parent grid; return _grandparent.children.first() mediaelement; } private void flipview_selectionchanged_1(object sender, selectionchangedeventargs e) { var _flipview = sender flipview; foreach (var item in _flipview.items) { var _container = _flipview.itemcontainergenerator.containerfromitem(item); var _children = allchildren(_container); foreach (var media in _children) media.pause(); } } public list<mediaelement> allchildren(dependencyobject parent) { if (parent == null) return (new mediaelement[] { }).tolist(); var _list = new list<mediaelement> { }; (int = 0; < visualtreehelper.getchildrencount(parent); i++) { var _child = visualtreehelper.getchild(parent, i); if (_child mediaelement) _list.add(_child mediaelement); _list.addrange(allchildren(_child)); } return _list; } } and use xaml:
<flipview selectionchanged="flipview_selectionchanged_1"> <flipview.itemtemplate> <datatemplate> <grid> <mediaelement source="{binding}" autoplay="false" /> <grid margin="20" verticalalignment="bottom" background="black"> <button click="button_click_1" horizontalalignment="left">pause</button> <button click="button_click_2" horizontalalignment="right">play</button> </grid> </grid> </datatemplate> </flipview.itemtemplate> <x:string>ms-appx:/assets/bestsingingvideoever.wmv</x:string> <x:string>ms-appx:/assets/bestsingingvideoever.wmv</x:string> <x:string>ms-appx:/assets/bestsingingvideoever.wmv</x:string> <x:string>ms-appx:/assets/bestsingingvideoever.wmv</x:string> </flipview> be sure , update path own video. of course can databind list, too. code prototype prove wanting possible. luck!
i think might have resolved bug or 2 had in code. part hunt child controls in list. here's reference: http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html
Comments
Post a Comment