How to create a UserControl with an irregular shape?

In my Silverlight 4 application I need 开发者_JAVA技巧to create a user control with an irregular shape. The "main display" of the UC is a standard rectangle but I need to have tabs (simple text blocks, where the user can click) that are outside of the main display rectangle.

Is this possible with Silverlight 4? If so, how?

Thanks in advance.

You can position elements of a control outside its normal layout in a number of ways. You could use Canvas but if most of the control is standard Grid rectangle then you can use a Grid. The trick is to use negative Margins.

 <Grid x:Name="LayoutRoot">
     <Border Margin="0 -22 0 0">
         <TextBlock Text="I appear above the UserControl layout" />
     </Border>
 </Grid>

Note that if the Usercontrol is being used as the Visual root then this won't work because the Silverlight plugin will not render beyound its client rectangle.

It is, you can have transparent background behind the tabs which can let clicks through, effectively behaving as if the shape was different. The UserControl will still have a rectangular shape including the tabs, unless you wrap then into a Popup and float out of the UC with some offset.

Technically, you can have elements outside the UserControl's rectangle if you use a Canvas for your LayoutRoot instead of a Grid. Elements in a Canvas aren't clipped to the canvas size. I wouldn't recommend this, however, because you won't be able to use Margin to size and align your controls inside it. It would be better to have all child controls inside a Grid LayoutRoot.

Which brings us to the question of irregularity. If you want to 'see through' parts of the control and be able to click through them (i.e. click objects underneath it), all you need to do is keep the UserControl's and the LayoutRoot's Background to null or just not set it at all. Wherever there is a lack of any background, clicks will go through. Note that if you set the background to Transparent it will make the control behave as a rectangle (as if it's filled with solid color) with respect to mouse input.

Another thing is if you want to see HTML controls under the see-through parts of your app. Then, you'll have to use windowless mode, but that's another can of worms.