[2005] Prevent control.paint from flickering

[ovanwijk]

Well as the title says,

I am creating an app for a touchscreen wich is always 1024x786(well not like that is important but ok). I wanted a fancy looking interface so I decided to paint every button and control myself.

To make it full screen I just used a maximized form with no borderstyle(and the esc button to exit). By using the graphics from the paint event I paint my buttons and such things. Now I made a simulation of the numpad and when I press the buttons the form paints them as a string on the screen.

This all works fine except for the fact that I cant actualy see the form repaint when I call form.refresh(). Ofcourse I dont want to repaint the whole form but only that part where I have to repaint my changed text, are there ways to solve this or should I rewrite my program with DirectX/DirextDraw?

Greets

[jmcilhinney]

If you only want to repaint part of a form or control then you should call Invalidate first to specify the area to redraw, then call Update. Note that you can call Invalidate multiple times before calling Update so you can redraw multiple discrete sections.

[FourBlades]

Don't draw the text directly to the screen. There are many controls you could use for the following but one suggestion would be to place a button on the form where the text is to be placed. Set the Button's BorderSize = 0 and the FlatStyle = Flat.

Then set the Button's text always equal to the output from your numpad.

If you don't like the Button idea you can use other controls like a panel.

If you don't want to use the text portion of the actual control, then choose a control on which you can paint and use graphics as you are now to draw on the control.

The net effect? An easy way to limit the area of the screen that is drawn on when you update the output from the numpad.

[ovanwijk]

thnx both but I think jmcilhinney`s solutions will suit me more, the reason for that is that I just dont wont to use common controls(I use PNG images for my buttons, these are way nicer then the common controls). But a question to jmcilhinney now.

Your idea seems good but how do I actualy redraw in that area, all my code is inside(or called within) the paint event. If I update all my code will be exequted again right but only that specified area will be redraw?
Your solution works btw and therefor this thread is solved.
(Dude you realy know to much hehehe).

Thnx again and greets

[jmcilhinney]

You don't change your Paint event handler at all. It must contain the logic to draw everything. That's not the slow part. It's actually pushing the pixels to the screen that's the slow part. Basically your Paint event handler "draws" the entire picture, then the system decides what parts of that to actually push out to the screen based on what parts have been invalidated.

You should also note that you can still use Button controls, even if you want to draw them with custom Images. I've never done it myself so I don't know all the details, but basically you have to define a class and inherit the Button class. This gives you all the functionality of a button for free, so you just have to change how it looks. You would set its Region property to the bounds defined by the size and shape of the image, then you'd draw the image onto the control surface. The user will see your custom image and it will behave just like a normal Button with no extra effort from you. You should read about authoring custom controls on MSDN. I'm sure there are tutorials for creating custom buttons all over the Web too, as it's not an uncommon thing to do.

[kleinma]

you know you can just use standard button controls and assign a PNG to them as their background image right? No custom drawing involved. If the PNG has the text the button should have, then simply set the buttons text property to an empty string.

[jmcilhinney]

you know you can just use standard button controls and assign a PNG to them as their background image right? No custom drawing involved. If the PNG has the text the button should have, then simply set the buttons text property to an empty string.

In that case you'd want to set the FlatStyle to Flat and the FlatAppearance.BorderSize to 0. The Button will still occupy a rectangular space though, so if your image is a special shape then you will need to inherit and set a custom Region.

[ovanwijk]

Somehow using PNG`s as background image dont works good.

It works all pretty good as long as your buttons are the shape of a rectangle.
The reason I used PNG`s is of their abbility to hold alpha. When I paint a PNG image in the paint event of the button(or use it as backgroudimage) the alpha dont work. Not even when I set the background color to alpha.

An example:


Here you see the difference in drawing on the panel/form or inside the button.

This is why I didnt want to use controls. Since when I have some sort of background it will get overpainted.


Greets

[jmcilhinney]

I was under the impression that I had already mentioned twice that you could inherit the Button control and make it any shape you wanted. Am I wrong?

http://www.bobpowell.net/shapedcontrols.htm

[ovanwijk]

Well I tried that but what I did was just this:

My inherited class:

Public Class MyButton
    Inherits Button
    Private myImage As Image
 
    Public Sub New(ByVal img As String, ByVal x As Integer, ByVal y As Integer)
        MyBase.New()
        myImage = Drawing.Image.FromFile(img)
        Me.Bounds = New Rectangle(x, y, myImage.Width, myImage.Height)
        Me.FlatStyle = Windows.Forms.FlatStyle.Flat
        Me.FlatAppearance.BorderSize = 0
        Me.FlatAppearance.CheckedBackColor = Color.Transparent
        Me.FlatAppearance.MouseOverBackColor = Color.Transparent
        Me.BackColor = Color.Transparent
    End Sub
 
    Private Sub iPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles Me.paint
        Dim g As Graphics = e.Graphics
        g.DrawImage(myImage, 0, 0)
 
    End Sub
 
 
 
End Class

I got no idea how to remove that "white space" from the shape.

Greets

[jmcilhinney]

This is from post #5:

You would set its Region property to the bounds defined by the size and shape of the image

This is from post #7:

The Button will still occupy a rectangular space though, so if your image is a special shape then you will need to inherit and set a custom Region.

I don't see in that code where you're setting the Region property to the shape of your round image.

[ovanwijk]

Ok now I guess I did it the right way.

It looks like this now:


Its pretty ugly but ok.

Public Class MyButton
    Inherits Button
    Private myImage As Image
 
    Public Sub New(ByVal img As String, ByVal x As Integer, ByVal y As Integer)
        MyBase.New()
        myImage = Drawing.Image.FromFile(img)
        Me.Bounds = New Rectangle(x, y, myImage.Width, myImage.Height)
        Me.FlatStyle = Windows.Forms.FlatStyle.Flat
        Me.FlatAppearance.BorderSize = 0
        Me.FlatAppearance.CheckedBackColor = Color.Transparent
        Me.FlatAppearance.MouseOverBackColor = Color.Transparent
        Me.BackColor = Color.Transparent
        Me.Region = New System.Drawing.Region()
 
    End Sub
 
    Private Sub iPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles Me.paint
        Dim g As Graphics = e.Graphics
        g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
        g.DrawImage(myImage, 0, 0)
        '  g.PixelOffsetMode = Drawing2D.PixelOffsetMode.HighQuality
        Dim buttonPath As New System.Drawing.Drawing2D.GraphicsPath
 
 
        Dim newRectangle As Rectangle = Me.ClientRectangle
 
 
 
 
        buttonPath.AddEllipse(newRectangle)
        e.Graphics.DrawPath(Pens.Black, buttonPath)
        Me.Region = New System.Drawing.Region(buttonPath)
 
 
    End Sub
 
 
 
End Class

With that code.

It good enough for what it is now but is there anyway to get it as nice as those other 2?

Greets