Question

I have a WPF app with an image over which is laid a user control. I would like the user control background to be transparent but the buttons etc on that user control to be solid.

The image below shows what I have now. I would like to have the inside of the red area as transparent (the user control can in theory be many different shapes) but with the controls contained within it, solid.

The main window XAML is;

<Canvas Height="450" Width="300">
    <Border Opacity=".2" >
        <Image Source="D:\\BarbourCoat.jpg" Width="300" ></Image>
    </Border>
    <local:UserControl1 Height="100" Canvas.Left="10" Canvas.Top="10" Width="100"/>
</Canvas>

Whilst the user control XAML is;

<Canvas Background="Transparent">
    <Path Data="M 10 10 L 100 10 L 250 50 L 280 200 L 180 250 L 25 270 Z" Stroke="Red"></Path>
    <Button Content="Button" HorizontalAlignment="Left" Margin="41,53,0,0" VerticalAlignment="Top" Width="75"/>
    <TextBox HorizontalAlignment="Left" Height="23" Margin="90,112,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
    <TextBlock HorizontalAlignment="Left" Margin="69,209,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Canvas>

I’m having a hard time getting my head round this, any help would be greatly appreciated.

Answer 1

In XAML, have you made the whole UserControl transparent?

<UserControl
Background="Transparent">