根据纵横比居中媒体元素

Question

所以，我得到了这个媒体元素，我希望它出现在屏幕中间，距离每条边缘 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"。我怎样才能解决这个问题？我试过使用一个 viewbox，它可以完美地工作，但我会得到过大或过小的 TransportControls。我也试过将 mediaelement 放在另一个居中对齐的网格中，但我仍然遇到同样的问题。

Answer 1

<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上的HorizontalAlignment="Stretch"。

Gridview里面的ItemsPanelTemplate里面的VariableSizedWrapGrid上的HorizontalAlignment="Center"；应该做到无论屏幕宽度如何都始终使内容居中的技巧。

Answer 2

你想要的是

20 pixels away from each edge.

但是在你的代码中你定义了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控件。

Answer 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);
}

根据纵横比居中媒体元素

Centering a mediaelement according to the aspect ratio

c#

xaml

windows-store-apps

win-universal-app