wpf canvas 和视频控制全屏

Question

在我的 WPF 程序中，我想绘制一个形状。然后在我按下按钮后，程序以全屏模式播放视频。我似乎无法在 canvas.

上全屏播放视频

我的XAML如下

<Canvas>
    <Ellipse Name="face1" Panel.ZIndex="2" Fill="Green" Width="400" Height="400" />
    <MediaElement Panel.ZIndex="1000" Name="videoControl1" Stretch="Fill" 
                  Source="C:\Users\videos\carcrash.mp4" 
                  LoadedBehavior="Manual" MediaEnded="videoControl1_MediaEnded">            
    </MediaElement>
</Canvas>

如你所见，我把视频放在了我的形状前面。当按下按钮时，我开始播放视频。所以视频将在形状之前。问题是视频很小。如何全屏显示？

Answer 1

根据 Dennis Cheng 的评论 here：

Canvas is a "no-layout" panel so children won't size to parent. Try Grid if you want children fill or manually Bind to the parent's size if you must use a Canvas:

<Canvas x:Name="MyCanvas"
    Width="300"
    Height="300">
    <Ellipse Name="face1"
            Width="400" 
            Height="400"
            Panel.ZIndex="2"
            Fill="Green" />
    <MediaElement Name="videoControl1"
                Width="{Binding RelativeSource={RelativeSource Self},
                                Path=Parent.ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource Self},
                                Path=Parent.ActualHeight}"
                Panel.ZIndex="1000"
                Source="C:\Users\videos\carcrash.mp4" />
</Canvas>

这会将视频的宽度缩放到包含 Canvas 的宽度，但仍与其原始尺寸成比例。

如果您使用网格，您可以实现您想要的那种缩放：

<Grid Width="500" Height="500">
    <Ellipse Name="face1"
            Width="400"
            Height="400"
            Panel.ZIndex="2"
            Fill="Green" />
    <MediaElement Name="videoControl1"
                Grid.Row="0"
                Panel.ZIndex="1000"
                Source="D:\Downloads\The.Strain.S01E13.HDTV.x264-LOL.mp4"
                Stretch="Fill" />
</Grid>

wpf canvas 和视频控制全屏

wpf canvas and video control fullscreen

c#

wpf

video

wpf-controls