Неверный рендеринг плеера libvlcsharp в Avalonia

Я использую LibVLCSharp'овый VideoView внутри ScrollViewer, который находится внутри UserControl.

При скроллиге колесом мышки VideoView не двигается, а вот весь остальной контент движется. Но при перемещении самого окна все элементы ререндерятся верно, и плеер встаёт на нужное место.

Поиск в гугле не дал результатов, хоть я и искал долго). Надеюсь сможете помочь.

Видео происходящего: на ютубе

XAML код:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="using:LauncherSIPAvalonia.ViewModels"
             xmlns:views="using:LauncherSIPAvalonia.Views"
             xmlns:lvs="using:LibVLCSharp.Avalonia"
             mc:Ignorable="d"
             x:Class="LauncherSIPAvalonia.Views.LearnMore.LearnMoreView">
  <ScrollViewer>
    <StackPanel Margin="40"
                Orientation="Vertical">
      <Grid HorizontalAlignment="Left"
            ColumnDefinitions="1.2* *">
        <Grid RowDefinitions="3* *"
              Grid.Column="0">
          <Border CornerRadius="6"
                  Width="640"
                  Height="360">
            <lvs:VideoView x:Name="Video"
                            Width="640"
                            Height="360"
                            IsVisible="False">
              <Grid RowDefinitions="8* *"
                    x:Name="VideoViewInnerControls"
                    IsVisible="False">
                <Border Grid.Row="1"
                        Background="rgba(0, 0, 0, 0.7)"/>
                <Grid Grid.Row="1"
                      RowDefinitions="* 2*">
                  <Rectangle Fill="#7F1D1D"
                              x:Name="ProgressBarBackground"
                              Grid.Row="0"
                              PointerPressed="ProgressBar_PointerPressed"/>
                  <Rectangle x:Name="ProgressBar"
                              Fill="#B91C1C"
                              HorizontalAlignment="Left"
                             MaxWidth="640"
                              Grid.Row="0"
                              PointerPressed="ProgressBar_PointerPressed"/>
                  <Grid Grid.Row="1"
                        ColumnDefinitions="* * * 15*">
                    <Button Grid.Column="0"
                            Width="32"
                            Height="32"
                            Classes="Toolbar"
                            Click="PlayControl_Click">
                      <Image x:Name="PlayControl"
                              Width="32"
                              Height="32"/>
                    </Button>
                    <Button Grid.Column="1"
                            Width="32"
                            Height="32"
                            Classes="Toolbar"
                            Click="VolumeControl_Click">
                      <Image Source="/Assets/volume.png"
                              x:Name="VolumeControl"
                              Width="16"
                              Height="16"/>
                    </Button>
                  </Grid>
                </Grid>
              </Grid>
            </lvs:VideoView>
          </Border>
          <Image x:Name="ScreenshotImage"
                  IsVisible="True"
                 Stretch="UniformToFill"
                 Width="640"
                 Height="360"/>
          <Grid Grid.Row="1"
                Height="84"
                Width="640"
                Margin="0 15"
                HorizontalAlignment="Stretch">
            <Border Background="rgba(0, 0, 0, 0.3)"
                    CornerRadius="0 0 6 6"/>
            <ScrollViewer HorizontalScrollBarVisibility="Visible"
                          VerticalScrollBarVisibility="Disabled"
                          HorizontalAlignment="Stretch">
              <UniformGrid x:Name="ListOfMedia"
                          Rows="1"
                          HorizontalAlignment="Stretch">
              </UniformGrid>
            </ScrollViewer>
          </Grid>
        </Grid>
        <Grid Margin="20 0"
              Grid.Column="1"
              RowDefinitions="2.84* *">
          <StackPanel Grid.Row="0"
                      Orientation="Vertical"
                      Spacing="10">
            <TextBlock x:Name="TitleBlock"
                     FontSize="24"
                     LineHeight="32"
                     FontWeight="SemiBold"
                     TextWrapping="Wrap"/>
            <TextBlock x:Name="DescriptionBlock"
                       FontSize="16"
                       LineHeight="28"
                       FontWeight="Regular"
                       TextWrapping="Wrap"/>
          </StackPanel>
          <Grid Grid.Row="1"
                RowDefinitions="* 2*">
            <Grid Grid.Row="0">
              <StackPanel Orientation="Horizontal"
                          HorizontalAlignment="Right"
                          Spacing="10">
                <TextBlock x:Name="PriceBlock"
                           HorizontalAlignment="Right"
                           FontSize="28"
                           FontWeight="SemiBold"/>
                <TextBlock x:Name="OriginalPriceBlock"
                           HorizontalAlignment="Right"
                           FontSize="28"
                           FontWeight="SemiBold"
                           TextDecorations="Strikethrough"
                           Foreground="#9CA3AF"
                           IsVisible="False"/>
              </StackPanel>

            </Grid>
            
            <Button Grid.Row="1"
                    HorizontalAlignment="Stretch"
                    Height="50"
                    Click="Interact_Click"
                    Name="ActionButton">
              <TextBlock FontSize="18"
                         FontWeight="SemiBold"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Name="ActionLabel">
                Купить
              </TextBlock>
            </Button>
          </Grid>
        </Grid>
      </Grid>
      
      <StackPanel Spacing="6">
        <TextBlock x:Name="TagsBlock"
                   FontSize="14">
          <Run Text="Теги:" FontWeight="Bold"/>
        </TextBlock>
        <StackPanel Orientation="Horizontal"
                    Spacing="6">
          <StackPanel Orientation="Vertical"
                      Name="SystemRequirementsItems"
                      Spacing="6">
            <TextBlock FontWeight="Bold"
                       Padding=" 0 0 0 4"
                       FontSize="14">
              Системные требования:
            </TextBlock>
          </StackPanel>
          <StackPanel Orientation="Vertical"
                      Name="MinimalSystemRequirements"
                      Width="300"
                      Spacing="6">
            <TextBlock FontWeight="SemiBold"
                       Padding=" 0 0 0 4"
                       FontSize="14">
              Минимальные
            </TextBlock>
          </StackPanel>
          <StackPanel Orientation="Vertical"
                      Name="RecommendedSystemRequirements"
                      Width="300"
                      Spacing="6">
            <TextBlock FontWeight="SemiBold"
                       Padding=" 0 0 0 4"
                       FontSize="14">
              Рекомендуемые
            </TextBlock>
          </StackPanel>
        </StackPanel>
        
      </StackPanel>
    </StackPanel>
  </ScrollViewer>
</UserControl>

Ответы (1 шт):

Автор решения: Chaos_Sower

Мне кажется, это особенности самого VideoView библиотеки LibVLCSharp — он кривова-то отображается. Не исключаю того, что это также может происходить из-за множественной вложенности элементов в вашем коде.

Попробуйте что-то по типу этого:

<Grid Grid.Row="1" Grid.ColumnSpan="3" Margin="5">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    
    <Border BorderBrush="Black" BorderThickness="2">
        <vlc:VideoView x:Name="MultimediaPlayer" Background="Black"/>
    </Border>
    
    <StackPanel Grid.Row="1" Background="Black" Opacity="0.95">
        
        <Grid Margin="5">
            
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <TextBlock x:Name="CurrentAndTotalMediaTimeTextBlock" VerticalAlignment="Center" Text="00:00:00 / 00:00:00" Margin="0,0,15,0" Foreground="White"/>
            <Slider x:Name="MediaTimePositionSlider" Grid.Column="2"/>
            
        </Grid>
        
        <StackPanel x:Name="MultimediaPlayerUIStackPanel" Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
            
            <StackPanel Orientation="Horizontal" Margin="0,0,15,0">
                <Button x:Name="PlayAndPauseButton" Width="30" Height="30" Margin="0,0,5,0">
                    <Button.Content>
                        <Image x:Name="PlayAndPauseButtonImage" Source="{StaticResource PlayImage}" Width="20" Height="20"/>
                    </Button.Content>
                </Button>
                <Button x:Name="StopButton" Width="30" Height="30" Margin="0,0,5,0">
                    <Button.Content>
                        <Image Source="{StaticResource StopImage}" Width="20" Height="20"/>
                    </Button.Content>
                </Button>
                <Button x:Name="MuteAndUnmuteButton" Width="30" Height="30">
                    <Button.Content>
                        <Image x:Name="MuteAndUnmuteButtonImage" Source="{StaticResource VolumeImage}" Width="20" Height="20"/>
                    </Button.Content>
                </Button>
            </StackPanel>
            
            <StackPanel Orientation="Horizontal" Margin="0,0,15,0">
                <TextBlock x:Name="VolumeValueTextBlock" Text="Громкость: 0 %" Width="100" VerticalAlignment="Center" Margin="0,0,5,0" Foreground="White"/>
                <Slider x:Name="VolumeSlider" Minimum="0" Maximum="100" TickFrequency="25" TickPlacement="BottomRight" IsSnapToTickEnabled="True" Width="100" VerticalAlignment="Center"/>
            </StackPanel>
            
            <StackPanel>
                <TextBlock Text="Скорость" HorizontalAlignment="Center" Foreground="White"/>
                <StackPanel Orientation="Horizontal">
                    <StackPanel Margin="0,0,5,0">
                        <Border Background="LightGray" Width="30" Height="30" CornerRadius="10">
                            <Image Source="{StaticResource SlowerPlayRateImage}" Width="20" Height="20"/>
                        </Border>
                        <TextBlock Text="Медленно" Foreground="White"/>
                    </StackPanel>
                    <Slider x:Name="SpeedSlider" Minimum="0.25" Maximum="2.0" Value="1.0" TickFrequency="0.25" TickPlacement="BottomRight" IsSnapToTickEnabled="True" Width="100" VerticalAlignment="Center" Margin="0,0,5,0"/>
                    <StackPanel>
                        <Border Background="LightGray" Width="30" Height="30" CornerRadius="10">
                            <Image Source="{StaticResource FasterPlayRateImage}" Width="20" Height="20"/>
                        </Border>
                        <TextBlock Text="Быстро" Foreground="White"/>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        
        </StackPanel>
        
    </StackPanel>
    
</Grid>

Ну или избавьтесь от вложенности элементов в своём коде.

→ Ссылка