.NET Maui实现MediaElement自定义按钮自动隐藏或集成至控件栏

一、优先方案：集成到播放控件栏 #

MediaElement支持通过重写TransportControls模板添加自定义按钮，步骤如下：

1. 自定义TransportControls模板（XAML） #

<ContentPage.Resources>
    <ControlTemplate x:Key="CustomMediaControls">
        <Grid Background="#222">
            <!-- 保留默认播放控件 -->
            <StackPanel Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
                <Button Command="{TemplateBinding PlayPauseCommand}"
                        Content="{TemplateBinding PlayPauseButtonContent}" Margin="5"/>
                <Button Command="{TemplateBinding StopCommand}" Content="Stop" Margin="5"/>
            </StackPanel>
            <!-- 自定义全屏按钮 -->
            <Button x:Name="FullScreenBtn" 
                    Command="{Binding Source={RelativeSource TemplatedParent}, Path=FullScreenCommand}"
                    Content="全屏" HorizontalOptions="End" VerticalOptions="Center" Margin="10"/>
        </Grid>
    </ControlTemplate>
</ContentPage.Resources>

<MediaElement x:Name="mediaElement" Source="your_video_path"
              TransportControlsTemplate="{StaticResource CustomMediaControls}"
              ShowsTransportControls="True"/>

2. 自定义全屏逻辑（可选） #

如果默认FullScreenCommand不满足需求，在LivePage.cs中自定义命令并绑定：

public ICommand CustomFullScreenCmd { get; }

public LivePage()
{
    InitializeComponent();
    CustomFullScreenCmd = new Command(ToggleFullScreen);
    mediaElement.BindingContext = this;
}

private void ToggleFullScreen()
{
    if (mediaElement.IsFullScreen)
    {
        mediaElement.ExitFullScreen();
        ((Button)mediaElement.TransportControls.FindByName("FullScreenBtn")).Content = "全屏";
    }
    else
    {
        mediaElement.EnterFullScreen();
        ((Button)mediaElement.TransportControls.FindByName("FullScreenBtn")).Content = "退出全屏";
    }
}

此时需将模板中按钮的Command改为{Binding CustomFullScreenCmd}。

二、备用方案：独立按钮自动隐藏（修复Timer失效问题） #

之前用普通Timer失效是因为跨线程访问UI，改用DispatcherTimer即可解决：

1. XAML布局 #

<Grid>
    <MediaElement x:Name="mediaElement" Source="your_video_path"
                  ShowsTransportControls="True"/>
    <ImageButton x:Name="fullScreenBtn" Source="fullscreen_icon.png"
                 WidthRequest="40" HeightRequest="40"
                 HorizontalOptions="End" VerticalOptions="End"
                 Margin="20" Clicked="FullScreenBtn_Clicked"/>
</Grid>

2. 自动隐藏逻辑（LivePage.cs） #

private DispatcherTimer _hideTimer;

public LivePage()
{
    InitializeComponent();
    SetupHideTimer();
    // 用户交互时显示按钮
    mediaElement.Tapped += (s, e) => ShowBtn();
    mediaElement.GotFocus += (s, e) => ShowBtn();
}

private void SetupHideTimer()
{
    _hideTimer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(3) };
    _hideTimer.Tick += (s, e) =>
    {
        fullScreenBtn.IsVisible = false;
        _hideTimer.Stop();
    };
}

private void ShowBtn()
{
    fullScreenBtn.IsVisible = true;
    _hideTimer.Restart();
}

private void FullScreenBtn_Clicked(object sender, EventArgs e)
{
    var btn = sender as ImageButton;
    if (mediaElement.IsFullScreen)
    {
        mediaElement.ExitFullScreen();
        btn.Source = ImageSource.FromFile("fullscreen_icon.png");
    }
    else
    {
        mediaElement.EnterFullScreen();
        btn.Source = ImageSource.FromFile("exit_fullscreen_icon.png");
    }
    ShowBtn(); // 点击后重置隐藏计时器
}

关键修复点 #

• 用DispatcherTimer替代普通Timer，确保UI操作在主线程执行
• 通过Tapped、GotFocus事件监听用户交互，触发按钮显示并重置计时器
• 全屏切换后调用ShowBtn()避免按钮立即隐藏

三、平台适配提示 #

• Android：确保MainActivity.cs中已配置全屏相关权限（比如WindowCompat.SetDecorFitsSystemWindows(Window, false)）
• Windows：无需额外配置，默认支持全屏切换

内容的提问来源于stack exchange，提问作者James Crutchley