please wait
- Forum
- General C++ Programming
- [win32] Using GDI to Draw Frame
[win32] Using GDI to Draw Frame
Sep 17, 2011 at 4:12pmclosed account (o1vk4iN6)
I am not too familiar with windows' graphic API, right now I am using the traditional library (GDI) to achieve what I want to do.
I am trying to create a custom window frame much like Google chrome, if anyone uses it. I am going to have the top of the frame be tabs for open files and than a tool bar for all the necessary tools. Similar to ribbon but not as complex. Than the remaining region will be the client area for the information of the currently selected file.
Google chrome seems to basically be done by rendering all of its own items on top of the window frame, using the dwm functions to contract the client area and than painting over it creating it's own border. I'm not entire sure how chrome is being rendered. I was considering creating a bitmap for the corners along with a bitmap which is 1 pixel in width, than stretching that to fill the middle. Resulting in a rounded edge frame with a gradient pattern visible at the top.
I was hoping maybe someone with more experience with drawing controls and such in windows could shed some light on just how it's done to follow windows' standard.
For example when you hover over a button and it has that fade-in effect, how would that be achieved? By continuous invaliding the button and redrawing it until the fade time is up? If anyone has an in-depth article using GDI or whatever standard API Microsoft uses for it's rendering I would be grateful.
I have a few questions somewhat describing what exactly I am doing to draw the frame:
1) A brush (HBRUSH) can only be a solid color or some sort of pixel pattern, correct? What I am trying to do is draw a gradient for the background of the frame, I am using the GradientFill() function to do this. I was wondering if there is a way to use a brush in order to do this.
Rather than using GradientFill I would use RoundRect() which draws a rounded rectangle. So I would set a brush which has a gradient pattern to get the effect I want, along with an anti-aliased border (see below).
2) I am using FrameRgn() to draw a border on the inside of my window frame. I am using CreateRoundRectRgn() for the region of the window so that the corners are rounded. The problem with FrameRgn seems to be that there is no anti-alising for the rounded corners. I was hoping someone could help with a solution to this to make the rounded corners look smoother. One solution I am thinking of is using RoundRect(), see above.
I plan to create custom controls, like buttons (fade-in effect), in the future. So if any information isn't directly related to drawing a frame I would still appreciate any insight you can give me. Thanks for any help.
I am trying to create a custom window frame much like Google chrome, if anyone uses it. I am going to have the top of the frame be tabs for open files and than a tool bar for all the necessary tools. Similar to ribbon but not as complex. Than the remaining region will be the client area for the information of the currently selected file.
Google chrome seems to basically be done by rendering all of its own items on top of the window frame, using the dwm functions to contract the client area and than painting over it creating it's own border. I'm not entire sure how chrome is being rendered. I was considering creating a bitmap for the corners along with a bitmap which is 1 pixel in width, than stretching that to fill the middle. Resulting in a rounded edge frame with a gradient pattern visible at the top.
I was hoping maybe someone with more experience with drawing controls and such in windows could shed some light on just how it's done to follow windows' standard.
For example when you hover over a button and it has that fade-in effect, how would that be achieved? By continuous invaliding the button and redrawing it until the fade time is up? If anyone has an in-depth article using GDI or whatever standard API Microsoft uses for it's rendering I would be grateful.
I have a few questions somewhat describing what exactly I am doing to draw the frame:
1) A brush (HBRUSH) can only be a solid color or some sort of pixel pattern, correct? What I am trying to do is draw a gradient for the background of the frame, I am using the GradientFill() function to do this. I was wondering if there is a way to use a brush in order to do this.
Rather than using GradientFill I would use RoundRect() which draws a rounded rectangle. So I would set a brush which has a gradient pattern to get the effect I want, along with an anti-aliased border (see below).
2) I am using FrameRgn() to draw a border on the inside of my window frame. I am using CreateRoundRectRgn() for the region of the window so that the corners are rounded. The problem with FrameRgn seems to be that there is no anti-alising for the rounded corners. I was hoping someone could help with a solution to this to make the rounded corners look smoother. One solution I am thinking of is using RoundRect(), see above.
I plan to create custom controls, like buttons (fade-in effect), in the future. So if any information isn't directly related to drawing a frame I would still appreciate any insight you can give me. Thanks for any help.
Sep 17, 2011 at 5:15pm
For best visual you probably want to use a combination of the Glass, Animation, and Direct2D APIs. GDI is old. I think the best you can do with it is use a layered window and draw the entire UI using prerendered bitmaps.
Sep 17, 2011 at 5:22pmclosed account (o1vk4iN6)
Well I would like it to still be compatible with windows xp at least.
Sep 17, 2011 at 10:31pm
The problem with GDI is it's incapable of vector graphics and anti-aliasing. For gradients you're better off using GDI+. How are you making the rounded corners? Are you using a layered window? That is the only way I know of to create irregular shaped windows.
If you want to take the pre-rendered route I would start by drawing a mockup of the UI in GIMP or something, then break it into individual components to piece together with code. For custom controls you would need a separate bitmap for the different control states(normal, pressed, mouse-over). To handle mouse input you could use a color map: a bitmap the same size as the window where the regions occupied by controls are filled unique colors, so when mouse input occurs you could check the color under the mouse to determine which control is being interacted with.
As for the fade effect, you're right. You would need to animate the fade in/out by swapping the bitmap after a certain delay, to keep it fluid.
The good thing about a pre-rendered UI is that the quality of appearance is only limited by your artistic ability. The bad thing is the file size becomes larger(if you embed the bitmaps in the executable).
If you want to take the pre-rendered route I would start by drawing a mockup of the UI in GIMP or something, then break it into individual components to piece together with code. For custom controls you would need a separate bitmap for the different control states(normal, pressed, mouse-over). To handle mouse input you could use a color map: a bitmap the same size as the window where the regions occupied by controls are filled unique colors, so when mouse input occurs you could check the color under the mouse to determine which control is being interacted with.
As for the fade effect, you're right. You would need to animate the fade in/out by swapping the bitmap after a certain delay, to keep it fluid.
The good thing about a pre-rendered UI is that the quality of appearance is only limited by your artistic ability. The bad thing is the file size becomes larger(if you embed the bitmaps in the executable).
Topic archived. No new replies allowed.