根据纵横比将媒体元素居中

Posted 2023-04-12

【中文标题】根据纵横比将媒体元素居中

【英文标题】：Centering a mediaelement according to the aspect ratio

【发布时间】：2016-06-07 10:43:21

【问题描述】：

所以，我有这个媒体元素，我希望它出现在屏幕中间，距离每个边缘 20 像素，当它的宽度达到 600 时，它会停止扩展并停留在原处。我有以下 XAML 来获得我想要的：

<Grid x:Name="video">
    <MediaElement x:Name="player" AreTransportControlsEnabled="True" Margin="20,0" MaxWidth="600" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

唯一的问题是 VerticalAlignment 属性似乎总是​​设置为“Stretch”。我怎样才能解决这个问题？我试过使用一个视图框，它可以完美地工作，除了我得到过大或过小的 TransportControls。我也尝试将媒体元素放在另一个居中对齐的网格中，但我仍然遇到同样的问题。

【参考方案1】：

你想要的是

距离每条边缘 20 像素。

但是在你的代码中你定义了Margin="20,0"，如果你阅读FrameworkElement.Margin property，你会发现<frameworkElement Margin="left+right,top+bottom"/>的用法。使用您的代码，这种用法会使您的 MediaElement 在垂直方向上伸展。

如果您使用Live Visual Tree 来实时查看正在运行的XAML 代码，您会发现，当您使用代码Margin="20,0" 时，MediaElement 是这样的：

如果你使用代码Margin="20"，MediaElement 是这样的：

每张图片中的红色虚线边框代表MediaElement 控件。

【讨论】：

是的，我知道，这是一个错字。但实际问题是保持纵横比。不过没关系，我找到了解决方法。

【参考方案2】：

<Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush">
        <Pivot Margin="0,0,0,0" Background="LightGray">
            <PivotItem Header="Formulas">
                <Grid>
                    <GridView HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Background="#FF983636">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <x:String>One</x:String>
                    <x:String>Two</x:String>
                    <x:String>Three</x:String>
                    <x:String>Four</x:String>
                </GridView>
                </Grid>
            </PivotItem>

        </Pivot>
</Grid>

这里的关键是 GridView 上的 Horizo​​ntalAlignment="Stretch"。

Gridview 内 ItemsPanelTemplate 内 VariableSizedWrapGrid 上的 Horizo​​ntalAlignment="Center"；无论屏幕宽度如何，都应该做到始终保持内容居中的技巧。

【讨论】：

感谢您的帮助；但我认为您可能误解了我的帖子：我正在尝试将媒体元素置于 Grid 的中心，而不是 GridView ：/

【参考方案3】：

最后，我找到了解决此问题的方法，方法是保持 16/9 的恒定纵横比：

XAML：

<Grid SizeChanged="player_SizeChanged" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="1" MinHeight="1" Margin="30" MaxWidth="1000" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <MediaElement x:Name="player" Margin="0">
</Grid>

C#：

private void player_SizeChanged(object sender, SizeChangedEventArgs e)

    (sender as Grid).Height = (e.NewSize.Width * 0.5625);