.NET Framework Developer Center > .NET Development Forums > Windows Presentation Foundation (WPF) > Setting the Opacity of a xaml Control to see through it?
Ask a questionAsk a question
 

AnswerSetting the Opacity of a xaml Control to see through it?

  • Monday, December 10, 2007 7:15 PMParaDiddl Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     

     

    I'm adding a xaml user control on top of a windows form. Is it possible to set the opacity of the xaml control in such a way that I can see through it and see the windows form below it?

Answers

  • Wednesday, December 12, 2007 6:59 AMWei Zhou - MSFTModeratorUsers MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Answer

    Hi ParaDiddl

     

    I think that you can set the BackColor of ElementHost to Color.Transparent, and set opacity on hosted WPF control to achieve this. The following code shows how to do this.

     

    Code Block

    public partial class MainForm : Form

    {

        public MainForm()

        {

            InitializeComponent();

     

            this.BackColor = Color.Blue;

     

            MyWPFUserControl control = new MyWPFUserControl();

            ElementHost host = new ElementHost()

            {

                BackColor = Color.Transparent,

                Dock = DockStyle.Top,

                Height = 100,

                Child = control

            };

            this.Controls.Add(host);

        }

    }

     

    <UserControl x:Class="ForumProjects.MyWPFUserControl"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Opacity="0.5">

        <StackPanel>

            <Button>Button</Button>

            <TextBlock Height="50" Background="Red">

                This is a text.

            </TextBlock>

        </StackPanel>

    </UserControl>

     

     

    Best Regards,

    Wei Zhou

All Replies

  • Monday, December 10, 2007 7:54 PMTomGiam Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     

    Here is an example from code:

     

    Rectangle filter = new Rectangle();

    SolidColorBrush TransparentrBrush = new SolidColorBrush(Color.FromRgb(0xA8, 0x83, 0x65));

    TransparentBrush.Opacity = 0;

    filter.Fill = TransparentBrush;

     

    Tom

     

  • Monday, December 10, 2007 8:35 PMParaDiddl Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     

     

    Can you elaborate more? I need the actual user control to be transparent, not a rectangle within the user control. Setting the opacity property of the user control doesn't work though.

     

     

  • Tuesday, December 11, 2007 1:03 PMTomGiam Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     

    Sorry, I don't know another way other than iterating through all of the UIElements in the user control and setting each ones opacity property (where available).

     

    Tom

     

  • Tuesday, December 11, 2007 2:15 PMaelij Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Windows Forms controls do not support control opacity. When you add a WPF control to a form, you use a winforms control called ElementHost, which behaves like any other winforms control, meaning it can't be transparent to the form/controls below it (opacity inside the WPF control is still supported, of course).

    One option I can think of is to use a top level window to host WPF (e.g. using the WPF Popup class and setting AllowsTransparency to true) and synchronize its position and size with the form. You should seriously consider whether this effect is worth the hassle, though.
  • Tuesday, December 11, 2007 8:48 PMParaDiddl Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     

     

     

    That's what I was afraid of since I had no luck in making the control's background transparent.

     

    I think I'd be better off by faking it by making the WPF's background image a screenshot of the form it is covering.

  • Tuesday, December 11, 2007 9:56 PMTomGiam Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Depending on how you use the user control, you could replace it with a transparent window with the xaml you need in it.
  • Tuesday, December 11, 2007 10:09 PMJeff Wain Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Do you have any example code you can put up?

     

  • Wednesday, December 12, 2007 6:59 AMWei Zhou - MSFTModeratorUsers MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Answer

    Hi ParaDiddl

     

    I think that you can set the BackColor of ElementHost to Color.Transparent, and set opacity on hosted WPF control to achieve this. The following code shows how to do this.

     

    Code Block

    public partial class MainForm : Form

    {

        public MainForm()

        {

            InitializeComponent();

     

            this.BackColor = Color.Blue;

     

            MyWPFUserControl control = new MyWPFUserControl();

            ElementHost host = new ElementHost()

            {

                BackColor = Color.Transparent,

                Dock = DockStyle.Top,

                Height = 100,

                Child = control

            };

            this.Controls.Add(host);

        }

    }

     

    <UserControl x:Class="ForumProjects.MyWPFUserControl"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       Opacity="0.5">

        <StackPanel>

            <Button>Button</Button>

            <TextBlock Height="50" Background="Red">

                This is a text.

            </TextBlock>

        </StackPanel>

    </UserControl>

     

     

    Best Regards,

    Wei Zhou

  • Wednesday, December 12, 2007 8:53 AMaelij Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    I'm afraid that won't work. It would allow blending the WPF control with the form's background color, but if you put another control behind the WPF control, you will not see it.

    It's just like when you set a winforms Label control's background to Transparent - you can't get true transparency since Win32 does not support it.
  • Wednesday, December 12, 2007 12:06 PMhypersw Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    And I'm afraid even the background won't be visible on Vista, as Avalon would render with DirectX within its HWND.

     

    It's theoretically possible to have one large Avalon control instead, with WinForms controls added to it as children, having their opacity and taking part in transformations and clippings, and such — at least, for simple cases of controls only. It's that noone has implemented that yet, for all that I know — hosting a HWND/WinForms window first-class in Avalon.
  • Wednesday, December 12, 2007 3:14 PMBigsby Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     

    I don't think I get the issue here...

     

    1. Why not just have a first visual child as a Control with the Opacity property, for instance, a Grid?

    2. Or, the other way around, have the UserControl child to a Control with the Opacity property?

     

    1.

    <UserControl ...>

    <Grid Opacity=".5">

    < ... Windows.Form ... />

    </Grid>

    </UserControl>

     

    2.

    <Grid Opacity=".5">

    <UserControl/>

    </Grid>