如何让LibVLCSharp.Avalonia.VideoView在Avalonia的Viewbox中正常缩放？

问题背景 #

开发特定分辨率（如4K、竖屏）的Avalonia应用时，使用Viewbox将GUI缩放到适配开发者小屏幕，保持UI元素和边距比例，但嵌套的LibVLCSharp.Avalonia.VideoView无法随其他UI元素一同缩放，具体现象：

• Test Button 1、Remaining Space区域正常缩放
• 包含VideoView的Grid行尺寸正常缩放
• VideoView的视频渲染尺寸固定，仅位置偏移，导致与下方区域重叠
• VideoView内部的Test Button 2也不缩放，仅位置变化

当前示例代码 #

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:VLCTest.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:avalonia="clr-namespace:LibVLCSharp.Avalonia;assembly=LibVLCSharp.Avalonia"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="VLCTest.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="VLCTest"
        Width="400"
        Height="300">

    <!-- The Viewbox scales the GUI to match the window size -->
    <Viewbox>
        <!-- Create a panel that matches the target screen size
                This small size is for demonstration purpose only. Typical use cases
                contain higher resolutions than the developer's screen size.
                The panel size is set to the same size as the window for demonstration purposes. 
                It will later be a full screen application
                and match the target screen resolution.-->
        <Panel Width="400" Height="300">
            <Grid RowDefinitions="Auto,Auto,*" ShowGridLines="True">
                <!-- Button that scales as expected -->
                <Button Grid.Row="0">Test Button 1</Button>

                <!-- VideoView as well as the contained Button do not scale as expected -->
                <avalonia:VideoView Grid.Row="1"
                                    HorizontalAlignment="Center"
                                    Height="200"
                                    Width="200"
                                    MediaPlayer="{Binding MediaPlayer}">
                    <Panel>
                        <Button VerticalAlignment="Center" HorizontalAlignment="Center">Test Button 2</Button>
                    </Panel>
                </avalonia:VideoView>

                <!-- Remaining space that scales as expected -->
                <Panel Grid.Row="2" Background="Gray">
                    <TextBlock>Remaining Space</TextBlock>
                </Panel>
            </Grid>
        </Panel>
    </Viewbox>
</Window>

解决方案 #

方案1：手动同步VideoView与Viewbox缩放比例 #

Viewbox的缩放基于内部元素尺寸和自身空间计算，而VideoView的视频渲染依赖原生控件，不会自动响应Avalonia布局变换。可通过监听Viewbox的布局事件，手动同步缩放比例到MediaPlayer：

1. 给Viewbox和VideoView添加命名：

<Viewbox x:Name="MainViewbox">
    <!-- ... -->
    <avalonia:VideoView x:Name="VideoViewControl" ...>
    <!-- ... -->
</Viewbox>

2. 后台代码监听布局更新并计算缩放：

public MainWindow()
{
    InitializeComponent();
    MainViewbox.LayoutUpdated += MainViewbox_LayoutUpdated;
}

private void MainViewbox_LayoutUpdated(object? sender, EventArgs e)
{
    if (sender is Viewbox viewbox && DataContext is MainWindowViewModel vm && vm.MediaPlayer != null)
    {
        // 计算Viewbox的实际缩放比例
        var scaleX = viewbox.ActualWidth / viewbox.Child.DesiredSize.Width;
        var scaleY = viewbox.ActualHeight / viewbox.Child.DesiredSize.Height;
        var scale = Math.Min(scaleX, scaleY);

        // 获取VideoView的原始尺寸，同步到MediaPlayer
        var targetWidth = (int)(VideoViewControl.Width * scale);
        var targetHeight = (int)(VideoViewControl.Height * scale);
        vm.MediaPlayer.Size = new System.Drawing.Size(targetWidth, targetHeight);
    }
}

方案2：替换Viewbox为自定义缩放布局 #

放弃Viewbox，直接对根容器应用ScaleTransform，让VideoView的原生渲染层跟随整体变换：

1. 修改XAML，移除Viewbox，添加带缩放变换的根容器：

<Window ...>
    <Panel x:Name="RootPanel" Width="400" Height="300">
        <Panel.RenderTransform>
            <ScaleTransform x:Name="RootScale" />
        </Panel.RenderTransform>
        <Grid RowDefinitions="Auto,Auto,*" ShowGridLines="True">
            <!-- 原控件内容保持不变 -->
            <Button Grid.Row="0">Test Button 1</Button>
            <avalonia:VideoView Grid.Row="1" ...>
                <!-- ... -->
            </avalonia:VideoView>
            <Panel Grid.Row="2" Background="Gray">
                <TextBlock>Remaining Space</TextBlock>
            </Panel>
        </Grid>
    </Panel>
</Window>

2. 后台代码监听窗口尺寸变化，更新缩放比例：

public MainWindow()
{
    InitializeComponent();
    SizeChanged += MainWindow_SizeChanged;
    UpdateScale();
}

private void MainWindow_SizeChanged(object? sender, SizeChangedEventArgs e)
{
    UpdateScale();
}

private void UpdateScale()
{
    var targetWidth = RootPanel.Width;
    var targetHeight = RootPanel.Height;
    // 计算等比缩放比例
    var scaleX = ActualWidth / targetWidth;
    var scaleY = ActualHeight / targetHeight;
    var scale = Math.Min(scaleX, scaleY);

    // 设置缩放
    RootScale.ScaleX = scale;
    RootScale.ScaleY = scale;

    // 保持容器居中
    RootPanel.Margin = new Thickness(
        (ActualWidth - targetWidth * scale) / 2,
        (ActualHeight - targetHeight * scale) / 2,
        0, 0);
}

方案3：自定义ScalableVideoView（进阶） #

继承VideoView重写布局方法，将Avalonia的布局变换传递给原生渲染层：

using LibVLCSharp.Avalonia;
using Avalonia.Layout;
using Avalonia.Media;

public class ScalableVideoView : VideoView
{
    protected override Size ArrangeOverride(Size finalSize)
    {
        var result = base.ArrangeOverride(finalSize);
        
        if (MediaPlayer != null)
        {
            // 获取当前控件的缩放变换
            var scaleTransform = RenderTransform as ScaleTransform;
            var scale = scaleTransform?.ScaleX ?? 1;
            
            // 同步MediaPlayer的输出尺寸
            MediaPlayer.Size = new System.Drawing.Size(
                (int)(finalSize.Width * scale), 
                (int)(finalSize.Height * scale));
        }
        
        return result;
    }
}

使用时在XAML中替换原生VideoView为自定义控件即可。

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