Making a control invisible when its out of bounds of a parent control? in WPF

Question

I'm trying to put a bigger MediaElement into a smaller Canvas on WPF.

Lets say i'm putting 600x400 media into a 400x300 Canvas with Canvas.Top = -50, Canvas.Left = -100 .

And i don't want the sides that are out of bounds to be displayed, in this case 50 pixels from top and bottom, 100 pixel from right and left of my media should be invisible.

How can i achieve this? Thanks for all the help!

Answer 1

What you are asking for is called "Clipping". You need to add a RectangleGeometry to the Canvas.Clip property:-

 <Canvas Width="400" Height="300">
     <Canvas.Clip>
         <RectangleGeometry Rect="0 0 400 300" />
     </Canvas.Clip>
     <!-- Your content here --->
 </Canvas>