PictureBox transparent

[SirPereira]

Hey guys,
I know that this question has already been asked million of times, but until now I haven't found a WORKING way to make this to work.

I've a Media Player control, and in front of it (for a logo thing), I have a PictureBox, that I want to make transparent. I've tried million of things, but couldn't get it to work.

Any suggestion guys? Ideias?


Thanks

[motil]

I never played with the PictureBox control but can't you use any transparent gif / png you create with photoshop?

[mbutler755]

Use photoshop to delete the background of the picture that you don't want to show.

[SirPereira]

Well, that I already have my friends, and even that didn't worked.

I use the all Adobe collection, so that's not to me, lol. Even PNG and GIF don't work.

[boops boops]

Windows Forms controls -- and that includes PictureBoxes -- only have a limited kind of transparency.
[edit: rest of post deleted. see post #7]

[SirPereira]

When should I set that Parent property of PicBox?

I have this code on load but with no effect ( and picbox transparent colour set ).

    Private Sub frmPreview_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        pic_logo.Parent = AxWindowsMediaPlayer1

        Dim x As Image = Image.FromFile(frmPainel.logo_path.Text)

        If frmPainel.logo_path.Text <> "" Then
            pic_logo.Image = x
            pic_logo.Visible = True
        End If
    End Sub

[boops boops]

hi SirPereira,

I'm sorry, I made a mistake. It just shows, I should never post anything without checking it first. The Parent thing only works when the Parent control is another PictureBox, so it's not going to work for the MediaPlayer.

I'll see if I can work out an example for you with a separate form. There is an alternative which involves grabbing the surface of the Media Player with Graphics.CopyFromScreen and drawing your own image over it, but I think the form way will be less complicated and more flexible.

BB

[SirPereira]

Oh ok, no problem

So, when you got it, please tell me something and thanks for helping.

[minitech]

It's not possible without putting another form on top or editing the movie at runtime. Unless the Windows Media Player control has a CreateGraphics() method? Probably not...

[boops boops]

Here's how you could do it using a Form:

Dim x As Image = Image.FromFile(frmPainel.logo_path.Text)
Dim WithEvents floatForm As New Form With {.FormBorderStyle = Windows.Forms.FormBorderStyle.None, _
             .BackColor = Color.Magenta, _
             .TransparencyKey = Color.Magenta, _
             .BackgroundImage = x, _
             .BackgroundImageLayout = ImageLayout.Stretch _
             .ShowInTaskbar = False}

Private Sub frmPreview_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    floatForm.Show(Me)
End Sub

Private Sub frmPreview_Move(ByVal sender As Object, ByVal e As System.EventArgs) _
                                            Handles Me.Move, Me.Layout
    floatForm.Bounds = Me.RectangleToScreen(AxWindowsMediaPlayer1.Bounds)
End Sub

A few notes:
1. Color Magenta for floatForm's BackColor and TransparencyKey could be any colour that doesn't appear in your image.
2. Set floatForm's BackgroundImageLayout to whatever is appropriate. Instead you could paint the image in floatForm's Paint sub (that's why I put the WithEvents keyword in).
3. Note the multiple Handles clauses on the Move sub.

Unfortunately, you can't show partial transparency this way. Pixels in the image on floatForm have to be opaque or transparent; partly transparent areas will show up as Magenta or whatever the background colour is. But you can vary the transparency of the whole image by setting floatForm's opacity to less than 1. Some nice fade-in effects are possible with that.

BB

[SirPereira]

Woow, it works!

Thank you, but I have two questions. I don't know if it's me that needs sleeping and can't think, or is that I don't know.

How to resize the new transparent object?
And how can I make that border in the other color less visible? 'Cause it is VERY visible, and by decreasing the opacity, it will make the all object more transparent, not just that "annoying border" by the color.

Regards one more time!

[boops boops]

Resize? Linking the floatForm's bounds to those of the MediaPlayer does it all in one line whatever happens, even if you have the MediaPlayer docked and the user resizes the form. Note that I have edited the Handles clauses. The new version puts floatForm in position when you start up.

If what you want to do is to position and size the logo itself, then it would be easiest to paint it with Graphics.DrawImage in floatForm's Paint event, instead of making it the background image. Let us know if you need help with that. Otherwise, you could set the invisible form's Left, Top, Width and Height in code the same way as for any form.

When you say a "border of the other color", I suppose you mean anti-aliasing (partly transparent) pixels around the edge. They show up in the invisible form's background colour. Remember you can choose any colour for the background and transparency key, as long as they are the same. And there are 2^24 colours to choose from because you can define your own colour using Color.FromARGB. I suggest choosing something part way between the colour of the image and the colour of the background (Media Player). You could combine that with a touch of general transparency, e.g. Opacity=0.8F.

If that doesn't work well, or if you have a changing background such as a video, it would be better to clean away the offending (partly transparent) pixels in a paint program such as PaintDotNet or PhotoShop.

all the best, BB

[SirPereira]

Sorry, but I couldn't understand ..

Maybe you can review my code, and tell me what's wrong.
http://www.megaupload.com/?d=ZGXFJRN4

The image i'm trying to use is this one:
http://i39.tinypic.com/v30tpt.jpg

Regards and thanks

[boops boops]

Sorry, but I couldn't understand ..

Maybe you can review my code, and tell me what's wrong.
http://www.megaupload.com/?d=ZGXFJRN4

The image i'm trying to use is this one:
http://i39.tinypic.com/v30tpt.jpg

Regards and thanks

Sorry, I don't have time to download and look at your code. Please try to select what's relevant and post it to the forum. Use the Code or VBCode button on the message editor or [code ][/code] tags.

I'm not sure what you mean by "a border of the other color". Maybe you could do a screen grab to show how your image looks on top of the Media Player. You can use the Insert button on the message editor to upload it to the forum. To insert from HD, use the Browse button in the Upload window. Then it will appear under the message.

BB

[SirPereira]

Here you have:
http://i43.tinypic.com/2i9pkp4.jpg


This is all my code for this form:

Public Class frmPreview
 
 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn_AbrirFicheiro.Click
        OpenFileDialog1.ShowDialog()
    End Sub
 
    Private Sub OpenFileDialog1_FileOk(ByVal sender As System.Object, ByVal e As System.ComponentModel.CancelEventArgs) Handles OpenFileDialog1.FileOk
        AxWindowsMediaPlayer1.URL = OpenFileDialog1.FileName
    End Sub
 
    Dim x As Image = Image.FromFile(frmPainel.logo_path.Text)
    Dim WithEvents floatForm As New Form With {.FormBorderStyle = Windows.Forms.FormBorderStyle.None, _
                 .BackColor = Color.Cyan, _
                 .TransparencyKey = Color.Cyan, _
                 .BackgroundImage = x, _
                 .BackgroundImageLayout = ImageLayout.Stretch, _
                 .Opacity = 0.8}
 
    Private Sub frmPreview_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        floatForm.Show(Me)
    End Sub
 
    Private Sub frmPreview_Move(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Move, Me.Load, Me.Resize
        floatForm.Bounds = Me.RectangleToScreen(AxWindowsMediaPlayer1.Bounds)
    End Sub
End Class

Btw, with VB6 can I make it transparent with no problem?

[boops boops]

I can't see anything wrong with your code. But I recommend you make the two improvements I edited in post #10 (see the red bits, especially the Handles clause).

The reason you are getting that Cyan coloured band around the image is that your logo has partly transparent pixels there. And you have set the BackColor/TransparencyKey to Color.Cyan, so that's how they look.

A quick fix for that will be to set floatForm's backcolor to something that is nearly but not quite black:

.BackColor = Color.FromArgb(1, 1, 1)
.TransparencyKey = .BackColor

But that will still show up as a roughish edge when you look at the logo against a lighter background. It won't be so bad if the logo is smaller.

Here's how you can set the size and position of the logo. Instead of setting the backgroundImage (lines 16 and 17), get the Paint sub for floatForm from the drop-down boxes at the top of the code view. Figure out the position (xPos, yPos) and size (w, h) you want to draw the logo, relative to the MediaPlayer. Then put this line in the sub:

e.Graphics.DrawImage(x, xPos, yPos, w, h)

BB

[SirPereira]

Hey, sorry for answering just now.

Well, It's a start. I get it to 'work'.

But now another problem and another question.
Can I auto-size the image according to his default image settings and autosize it in the control?

Now it shows up to the frame, but the video doesn't run "smoothly" as you can see.
http://i40.tinypic.com/2pze81e.jpg

It cuts the frame. It advances in the video as normal, but it is cutting somewhere in that point... How can I fix this?

Thanks one more time

[boops boops]

Can I auto-size the image according to his default image settings and autosize it in the control?

Yes. Let's suppose you call your image "logo" instead of "x", which is a bit confusing. You could replace the w and h in the DrawImage statement by logo.Width and logo.Height, but see a better idea below.

Now it shows up to the frame, but the video doesn't run "smoothly" as you can see.
http://i40.tinypic.com/2pze81e.jpg

It cuts the frame. It advances in the video as normal, but it is cutting somewhere in that point... How can I fix this?

I don't know why that happens but maybe it's because of the transparent form on top. I said to make floatForm the same size as the MediaPlayer just to keep the code simple. Now I can see what you are doing, you could make floatForm just big enough to contain the logo. For example, put this code in the Move sub instead of the line floatForm.Bounds = ...

Dim p As Point = PointToScreen(AxWindowsMediaPlayer1.Location)
p.Offset(xPos, yPos)
floatForm.Bounds = New Rectangle(p, logo.Size)

Now you can make logo the BackgroundImage of floatForm, and use BackgroundImageLayout=None. So you don't need the Paint sub after all. Does that stop the video interference?

By the way, I have news for you and anyone following this thread. It is possible to make a transparent PictureBox after all. I have to eat my words again. It may have other problems to iron out, so for the while I trust the present method more.

BB

[SirPereira]

Hey, thanks again for your help, but it keeps doing the same thing (that cut over the frames)

Thanks once more,

[boops boops]

Does it still happen if you don't show the floatForm? (Just comment out the line with floatForm.Show to try it).

[SirPereira]

If I don't show the form, it doesn't show any logo. If I show, I get two logos (one the form's size, and another the size I defined).

[boops boops]

I can't see two logos in the picture you posted in #17. If you are getting them, you have probably made some simple mistake when changing the code.

I can see a line through the video with parts of 2 pictures. I thought that was your problem. It looks like the effect of taking a screenshot from a running video.

BB

[SirPereira]

I can't see two logos in the picture you posted in #17. If you are getting them, you have probably made some simple mistake when changing the code.

I can see a line through the video with parts of 2 pictures. I thought that was your problem. It looks like the effect of taking a screenshot from a running video.

BB

Yes, that happens too. But when I added/modified with the code you said in your #18 post, it shows two logos, and the video being cut.

[boops boops]

Yes, that happens too. But when I added/modified with the code you said in your #18 post, it shows two logos, and the video being cut.

I'm sure the two logos thing must be something simple. If you can't spot it yourself, please post your code as it is now. BB

[minitech]

Is it a background image and a PictureBox together or something?

[SirPereira]

Right now, I'm having something like this:
http://i43.tinypic.com/24xp8q1.jpg

And my code:

Public Class frmPreview
 
 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn_AbrirFicheiro.Click
        OpenFileDialog1.ShowDialog()
    End Sub
 
    Private Sub OpenFileDialog1_FileOk(ByVal sender As System.Object, ByVal e As System.ComponentModel.CancelEventArgs) Handles OpenFileDialog1.FileOk
        AxWindowsMediaPlayer1.URL = OpenFileDialog1.FileName
    End Sub
 
    Dim logo As Image = Image.FromFile(My.Settings.logo)
    Dim WithEvents floatForm As New Form With {.FormBorderStyle = Windows.Forms.FormBorderStyle.None, _
                 .BackgroundImage = logo, _
                 .BackgroundImageLayout = ImageLayout.None, _
                 .BackColor = Color.FromArgb(1, 1, 1), _
                 .TransparencyKey = .BackColor, _
                 .Opacity = 0.8, _
                .ShowInTaskbar = False}
 
 
    Private Sub frmPreview_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        floatForm.Show(Me)
    End Sub
 
    Private Sub frmPreview_Move(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Move, Me.Layout
        Dim p As Point = PointToScreen(AxWindowsMediaPlayer1.Location)
        p.Offset(10, 10)
        floatForm.Bounds = New Rectangle(p, logo.Size)
    End Sub
 
    Private Sub floatForm_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles floatForm.Paint
        e.Graphics.DrawImage(logo, 10, 10, 100, 50)
    End Sub
 
    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Label1.Left -= 3
        If (Label1.Left >= Me.Width) Then
            Label1.Left = 0 - Label1.Width
        End If
    End Sub
End Class

[boops boops]

There's nothing in the new code that's drawing the big logo, so it must be somewhere else. It looks to me like the old, big version of floatForm is still getting drawn on top of your MediaPlayer. I don't know how you managed that. But if the old version is still in your project, try deleting it.

By the way, please delete the Paint sub from the new code. You are using the Background image so it's not needed. Still, it's not the cause of this problem.

BB

[SirPereira]

There's nothing in the new code that's drawing the big logo, so it must be somewhere else. It looks to me like the old, big version of floatForm is still getting drawn on top of your MediaPlayer. I don't know how you managed that. But if the old version is still in your project, try deleting it.

By the way, please delete the Paint sub from the new code. You are using the Background image so it's not needed. Still, it's not the cause of this problem.

BB

Well, I didn't needed that. I went to work, opened the project there, and everything was ok, strange.

One thing, it possible that I can run the "logo thing" in 'another proccess' or whatever that could make the movie more smooth? Because sometimes I see the logo 'blinking', that will 'blink' the video that is back to it. And it can't be of unsuficient memory 'cause I tested it on a EDIUS powered powerfull machine.

[boops boops]

I thought that a separate form runs in a separate thread (I may be wrong about that, so if I am will someone please correct me?) Anyway, that's one reason I had for preferring a form over a transparent PictureBox or Panel, even if one of those could be used over a WMP.

I can't reproduce your blinking problem so, sorry, I don't think I can help you about that. BB

[minitech]

No, a seperate form doesn't run in a different thread.

I don't think having them in a separate process will change anything.

[SirPereira]

So, any suggestions? What can I do to make it smooth?

[SirPereira]

Sorry, but this is making me a lot of confusion. How could it show in my computer two "pictureboxes" instead of one? And in another computer just one??

EDIT:
Just solved it!

The painting sub was the correct one, just deleted the background image, and everything is working fine now. Thanks


Now I just need to make it smoother in the video (still don't know how).

Thanks