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”。我怎样才能解决这个问题？我尝试过使用一个完美无缺的视图框，除了我得到过大或过小的TransportControls。我也尝试将mediaelement放在另一个具有居中对齐的网格中，但我仍然遇到同样的问题。

Answer 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控件。

Answer 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上的HorizontalAlignment =“Stretch”。

Gridview内ItemsPanelTemplate内的VariableSizedWrapGrid上的HorizontalAlignment =“Center”;不管屏幕的宽度如何，都应该做到始终保持内容居中的技巧。

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

根据宽高比使媒体元素居中

3 个答案: