{"id":311,"date":"2009-04-12T23:39:01","date_gmt":"2009-04-12T18:09:01","guid":{"rendered":"http:\/\/techtwaddle.net\/?p=311"},"modified":"2011-04-12T23:39:15","modified_gmt":"2011-04-12T18:09:15","slug":"applications-adding-image-to-your-application","status":"publish","type":"post","link":"https:\/\/techtwaddle.co.in\/blog\/2009\/04\/12\/applications-adding-image-to-your-application\/","title":{"rendered":"Applications: Adding Image to your application"},"content":{"rendered":"
Well, back from work and I was sitting idle. I thought the first screen of my application looks a bit stale really, so, I decided to add a small picture to the main screen.<\/div>\n

 <\/p>\n

Adding an image resource to your project:<\/span><\/div>\n
This is really easy.<\/div>\n

 <\/p>\n

1. Copy the bitmap file into you project directory.<\/div>\n
2. Go to Resource View, right click and select "Add Resource..<\/span>"<\/div>\n
3. Select "Bitmap<\/span>" and click on "Import..<\/span>"<\/div>\n
4. Point it to the file you copied in step 1<\/div>\n
5. Note the ID assigned to your bitmap. In my case it was IDB_BITMAP1<\/span><\/div>\n

 <\/p>\n

And thats it! The resource is now present within your project, you just need to write code to use it.<\/div>\n

 <\/p>\n

In my WndProc<\/span> <\/span>function, just before breaking under WM_CREATE<\/span>, I make a call to this function AlignComponents()<\/span>, which looks like this:<\/span><\/div>\n

\nvoid AlignComponents(HWND hWnd)<\/span>

\n{<\/span>

\n    RECT rect;<\/span>

\n    int imageWidth = 32, imageHeight = 32;<\/span>

\n    int imageX = 0, imageY = 0;<\/span>

\n    int captionX = 0, captionY = 0;<\/span>

\n    const int offset = 25;<\/span>

\n    TCHAR captionText[] = TEXT("TechTwaddle\\n Copyright (c) 2009");<\/span>

\n

\n    GetClientRect(hWnd, &rect);<\/span>

\n

\n    imageX = rect.right\/2 – imageWidth\/2;<\/span>

\n    imageY = rect.bottom\/2 – imageHeight*2;<\/span>

\n    <\/span>

\n    HWND hStatic = CreateWindowEx (0, L"STATIC", NULL, WS_CHILD | WS_VISIBLE | SS_BITMAP, <\/span>

\n                                    imageX, imageY, imageWidth, imageHeight, hWnd, 0, g_hInst, NULL);<\/span>

\n

\n    if (hStatic)<\/span>

\n    {<\/span>

\n        HBITMAP hImage = LoadBitmap(g_hInst, MAKEINTRESOURCE(IDB_BITMAP1));<\/span>

\n        SendMessage(hStatic, STM_SETIMAGE, IMAGE_BITMAP, (LPARAM)hImage);<\/span>

\n    }<\/span>

\n

\n    captionX = rect.left + offset;<\/span>

\n    captionY = imageY + imageHeight + 3;<\/span>

\n

\n    HWND hStaticCaption = CreateWindowEx(0, L"STATIC", NULL, WS_CHILD | WS_VISIBLE | SS_CENTER,<\/span>

\n                                    captionX, captionY, rect.right – offset*2, 30, hWnd, 0, g_hInst, NULL);<\/span>

\n

\n    if(hStaticCaption)<\/span>

\n    {<\/span>

\n        SendMessage(hStaticCaption, WM_SETTEXT, 0, (LPARAM)captionText);<\/span>

\n    }<\/span>

\n}<\/span><\/p>\n

The above code gets the client rect of the main window and calculates the X and Y position of the image based on the rect. I then use CreateWindowEx<\/span> <\/span>to create a static control which will show my bitmap. Use LoadBitmap<\/span> <\/span>to load the bitmap and get a handle to it and then send STM_SETIMAGE<\/span> message, passing the bitmap handle so that the image can be shown in the control. Note that the static control was created using SS_BITMAP<\/span> as one of its styles. Without this style the static control will not show the image.<\/div>\n


<\/p>\n

Then I create another static control positionally relative to the image. And send WM_SETTEXT<\/span> message to it to set the text. Note that the SS_BITMAP<\/span> style is not mentioned in this static control. I had just copy pasted the code from above with SS_BITMAP<\/span> set and sat wondering for a few minutes why the text was not showing up.<\/div>\n
 <\/div>\n

Anyways, my main screen now looks like:<\/span><\/p>\n

\"\"<\/p>\n

\nA lot better than before. I thought I’ll change the font of the text but was too lazy. Maybe tomorrow.<\/span>
\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Well, back from work and I was sitting idle. I thought the first screen of my application looks a bit stale really, so, I decided to add a small picture to the main screen.   Adding an image resource to your project: This is really easy.   1. Copy the bitmap file into you project … Continue reading Applications: Adding Image to your application<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1ktFF-51","_links":{"self":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/311"}],"collection":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":1,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":312,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/311\/revisions\/312"}],"wp:attachment":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}