How to create LibVLCSharp custom playback controls in Xamarin Forms?

Question

I've been searching for days now for a guide on how to create the custom playback controls for LibVLCSharp that everyone seems to talk about, which I never found a guid for.

I simply want to create other buttons with event handlers for the bottom playback control panel, I tried this but throws a System.NullReferenceException exception on startup while getting into break mode...

<vlc:MediaPlayerElement MediaPlayer="{Binding MediaPlayer}" LibVLC="{Binding LibVLC}">
    <vlc:MediaPlayerElement.PlaybackControls>
        <vlc:PlaybackControls>
            <vlc:PlaybackControls.ControlTemplate>
                <ControlTemplate>
                    <Grid>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                            <Button Grid.Column="0" Text="Test 1"/>
                            <Button Grid.Column="1" Text="Test 1"/>
                            <Button Grid.Column="2" Text="Test 1"/>
                        </StackLayout>
                    </Grid>
                </ControlTemplate>
            </vlc:PlaybackControls.ControlTemplate>
        </vlc:PlaybackControls>
    </vlc:MediaPlayerElement.PlaybackControls>
</vlc:MediaPlayerElement>

I want it to act just like the original one (Auto hides, overlays on tapping, etc...) but with my own layout and controls. I also thought about using the existing one and try to override their handler to implement my own code and override the text property for each button to change its icon but no luck of finding any help.

Thanks in advance ^_^

"throws an exception on startup" - instead of this vague description, why don't you tell **which specific exception** is being thrown? — Jason, Apr 13 '20 at 21:47
Sorry about that, it gets into break mode with **System.NullReferenceException**... — Mohamed Ashraf, Apr 13 '20 at 21:52
I can't tell, it gets into break mode and I can't really find which line caused the exception... — Mohamed Ashraf, Apr 13 '20 at 22:03
That's because the Call Stack is empty... Break Mode occurs when and error happens while threads are executing external code... The Call Stack is empty... — Mohamed Ashraf, Apr 13 '20 at 22:27
Can you try to create an “exception catchpoint” and see where the exception is caught? — Saamer, Apr 14 '20 at 01:50
Nope, I can't get it, it just gets into break mode on because of the xaml file... — Mohamed Ashraf, Apr 14 '20 at 13:05

score 5 · Answer 1 · answered Apr 14 '20 at 07:22

5

The code you are interested in is here: https://code.videolan.org/videolan/LibVLCSharp/-/blob/3.x/src/LibVLCSharp.Forms/Shared/Themes/Generic.xaml

I also thought about using the existing one and try to override their handler to implement my own code and override the text property for each button to change its icon

That'd be the way to go.

This previous SO question might answer your question: https://stackoverflow.com/a/14217500/4064749

Just create a new Style based on PlaybackControlsStyle, override what you want and then set it on the PlaybackControls element.

I created https://code.videolan.org/videolan/LibVLCSharp/-/issues/309 recently to track the need of a tutorial to customize the MediaElement.

Further docs on style inheritance: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/inheritance

answered Apr 14 '20 at 07:22

mfkl

1,914
1
11
21

I don't really understand what you've done, I tried to create a quick thing style with target type `TemplatedView` where its control template property is set to an empty stacklayout with red background (Just testing with dummy elements). I set the playbackcontrols style to the style key and nothing worked, the old playback controls is showing up like if I did nothing... What am I missing ?! – Mohamed Ashraf Apr 14 '20 at 12:47
Same exception occurs also if I changed the style name to anything else but the one you provided. I just want to explain that I want to create the whole playbackcontrols panel contents and I think it's possible as the documentation mentions that the whole playbackcontrols is customizable ... – Mohamed Ashraf Apr 14 '20 at 13:09

score 1 · Accepted Answer · answered Apr 15 '20 at 14:18

I finally found the problem which was making exceptions, when I create custom control template which completely correct, the MediaPlayerElement code behind by LibVLCSharp developers itself cannot find the elements with the names defined anymore as they used hardcoded names for the buttons and views instead of using bindings and dynamic setters.

Thus, several workarounds could be made to fix such issue, here are some of my ideas:

Use the generic style documented here and modify it without removing any elements but rather hide them out or overlay them.
Create your own style with controls obtaining the same names of the original ones.
Find a way to modify or maybe create a whole new playback control element using the original one which can be found here and here.

Thanks to mfkl's answer which helped me find out how everything worked under the hood to come up with the explaination, even though this took me a couple of days to figure out.

Can you please clarify a bit more? I've got libVLCSharp.Forms via NuGet. Do I need to copy bunch of files from their repo (xamls, converters, etc.) to override PlaybackControlsStyle? — neuromouse, Mar 15 '21 at 20:58
@AlamzaibFarooq Sorry I didn't see your comment until today. — Mohamed Ashraf, Mar 16 '21 at 18:12

How to create LibVLCSharp custom playback controls in Xamarin Forms?

2 Answers2

Linked