使用ScrollViewer实施自适应播放器

Question

我需要意识到如何做这样的响应式MediaPlayer

我有什么

ScrollViewer防止第二行占用空间

这是我的XAML代码：

<ScrollViewer>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <MediaPlayerElement AreTransportControlsEnabled="True"
                                            Name="player"
                                            PosterSource="{Binding SelectedMedia.Poster, UpdateSourceTrigger=PropertyChanged}"
                                            Source="{Binding SelectedMedia.Video_source}"  
                                            Stretch="Uniform"
                                            HorizontalAlignment="Center"
                                            AutoPlay="{Binding IsStreamPlay}"
                                            RelativePanel.Above="AboutGrid">
                            <MediaPlayerElement.TransportControls>
                                <controls:CustomMediaTransportControls IsCompact="True"
                                                                               IsZoomButtonVisible="False"
                                                                               IsPlaybackRateButtonVisible="False"
                                                                               IsVolumeEnabled="True"
                                                                               IsVolumeButtonVisible="True"
                                                                               IsSeekBarVisible="False"
                                                                               IsPlaybackRateEnabled="False"
                                                                               QualityCommand="{Binding SetQualityCommand}"
                                                                               Qualities="{Binding Qualities, Mode=TwoWay}">
                                </controls:CustomMediaTransportControls>
                            </MediaPlayerElement.TransportControls>
                        </MediaPlayerElement>
                        <Grid x:Name="AboutGrid"
                              Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Image Source="{Binding SelectedMedia.Atr_url}"
                                   Width="85"
                                   Height="113"
                                   Grid.Row="0"
                                   Grid.RowSpan="3"
                                   VerticalAlignment="Top"
                                   Margin="4"
                                   HorizontalAlignment="Left"/>
                            <Grid Grid.Column="1"
                                  Grid.Row="0"
                                  Grid.RowSpan="4"
                                  Grid.ColumnSpan="2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="120"/>
                                </Grid.ColumnDefinitions>
                                <StackPanel HorizontalAlignment="Left">
                                    <TextBlock FontWeight="SemiBold"
                                               TextWrapping="Wrap"
                                               FontSize="17"
                                               Text="{Binding SelectedMedia.Title}" />
                                    <TextBlock FontWeight="SemiLight"
                                               TextWrapping="Wrap"
                                               Text="{Binding SelectedMedia.Description}"/>
                                    <TextBlock FontWeight="SemiLight">
                                    <Run FontWeight="Normal"
                                         Text="{Binding SelectedMedia.Game_name, UpdateSourceTrigger=PropertyChanged}"/>
                                    </TextBlock>
                            </Grid>
                        </Grid>
                    </Grid>
                </ScrollViewer >

我认为问题在于ScrollViever不能正确调整其子项的大小，该怎么办？

Answer 1

Grid的比例自适应具有先决条件，需要根据当前父容器的宽度进行计算。

但是对于ScrollViewer，您可以将其视为“无限的”内部空间，这样Grid的适应将不会生效。

如果要实现Twitch之类的效果，可以选择限制MediaPlayerElement的高度，如下所示：

xaml

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid Background="Black" x:Name="MediaContainer">
            <MediaPlayerElement
                            ...
                            HorizontalAlignment="Center"/>
        </Grid>
        ...
    </Grid>
</ScrollViewer>

xaml.cs

public VideoPage()
{
    this.InitializeComponent();
    this.SizeChanged += Page_SizeChanged;
}

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    double height = e.NewSize.Height;
    MediaContainer.Height = height * 0.8;
}

最诚挚的问候。