CODEWITHSUNDEEP
c#wpfvideowpf-controls
wildcolor
wildcolor

Reputation: 574

wpf canvas and video control fullscreen

In my WPF program, I want to draw a shape. Then after I press a button, the program plays a video in fullscreen mode. I can't seem to make the video play in fullscreen on the canvas.

my XAML is like below

<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>

As you can see, I put the video in front of my shape. as sson as a button is pressed, I then start to play the video. So the video will be in front of the shape. The problem is that the video is very small. How to make it full screen?

Upvotes: 1

Views: 2315

Answers (1)

goobering
goobering

Reputation: 1553

Per Dennis Cheng's comment 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>

That scales the video's width to that of the containing Canvas, but it remains in proportion to its original dimensions.

If you use a Grid you can achieve the kind of scaling you're aiming for:

<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>

Upvotes: 1

Related Questions