How to use a LibVLCSharp.Avalonia.VideoView within an Avalonia.Controls.Viewbox?

Question

My goal is to create different Avalonia UI applications for specific screen resolutions. For example 4k or some specific portrait orientation. During development, I would like to scale the GUI to match smaller developer's screen sizes keeping UI elements and margins proportional. The Avalonia.Controls.Viewbox seems to perfectly meet this requirement. However, a nested LibVLCSharp.Avalonia.VideoView used to play a video does not scale with the rest of the GUI.

Is there any solution or workaround?

Current sample code:

<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>

Screenshot of the GUI with default window size: Default Window Size

Screenshot of the Window sized down to a smaller size: Smaller Window

• The Test Button 1 is scaled as expected.
• The Remaining Space is scaled as expected.
• The Grid row containing the VideoView is scaled as expected.
• The VideoView stays at the same size (at least the rendered video) while changing its position.
• The rendered video therefore overlaps into the row with the Remaining Space.
• The Test Button 2 stays at the same size while changing its position.

The source code of the VideoView can be found in libvlcsharp/src/LibVLCSharp.Avalonia/VideoView.cs. However, I couldn't manage to understand how everything works together and why the scaling of the Viewbox does not apply to the rendered video.

Answer 1

The Viewbox is an Avalonia thing, but the videoView is implemented using hwnd, which are not very avalonia-friendly. This i why there is this airspace hack in place for example.

Bug like that are generally limitations about what's doable with Avalonia, but if you can get that scaling and hack something so that it behaves the right way, you can try to submit a PR here : https://github.com/videolan/libvlcsharp