Walkthrough: Adding a D2D Object to an MFC Project

2017-06-05

The new home for Visual Studio documentation is Visual Studio 2017 Documentation on docs.microsoft.com.

The latest version of this topic can be found at Walkthrough: Adding a D2D Object to an MFC Project.

This walkthrough teaches how to add a basic Direct2D (D2D) object to a Visual C++, Microsoft Foundation Class Library (MFC) project, and then build the project into an application that prints "Hello, world" on a gradient background.

The walkthrough shows how to accomplish these tasks:

Create an MFC application.
Create a solid-color brush and a linear-gradient brush.
Modify the gradient brush so that it will change appropriately when the window is resized.
Implement a D2D drawing handler.
Verify the results.

Note

Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. For more information, see Personalizing the IDE.

Prerequisites

To complete this walkthrough, you must have Visual Studio.

To create an MFC application

On the File menu, point to New and then click Project.
In the New Project dialog box, in the left pane under Installed Templates, expand Visual C++ and then select MFC. In the middle pane, select MFC Application. In the Name box, type MFCD2DWalkthrough. Click OK.
In the MFC Application Wizard, click Finish without changing any settings.

To create a solid-color brush and a linear-gradient brush

In Solution Explorer, in the MFCD2DWalkthrough project, in the Header Files folder, open MFCD2DWalkthroughView.h. Add the following code to the CMFCD2DWalkthroughView class to create three data variables.

   CD2DTextFormat* m_pTextFormat;  
   CD2DSolidColorBrush* m_pBlackBrush;  
   CD2DLinearGradientBrush* m_pLinearGradientBrush;

 Save the file and close it.

In the Source Files folder, open MFCD2DWalkthroughView.cpp. In the constructor for the CMFCD2DWalkthroughView class, add the following code.

   EnableD2DSupport();

*// Initialize D2D resources:  
   m_pBlackBrush = new CD2DSolidColorBrush(GetRenderTarget(),
   D2D1::ColorF(D2D1::ColorF::Black));


   m_pTextFormat = new CD2DTextFormat(GetRenderTarget(),
   _T("Verdana"),
   50);

   m_pTextFormat->Get()->SetTextAlignment(DWRITE_TEXT_ALIGNMENT_CENTER);

m_pTextFormat->Get()->SetParagraphAlignment(DWRITE_PARAGRAPH_ALIGNMENT_CENTER);


   D2D1_GRADIENT_STOP gradientStops[2];  

   gradientStops[0].color = D2D1::ColorF(D2D1::ColorF::White);

   gradientStops[0].position = 0.f;  
   gradientStops[1].color = D2D1::ColorF(D2D1::ColorF::Indigo);

   gradientStops[1].position = 1.f;  

   m_pLinearGradientBrush = new CD2DLinearGradientBrush(GetRenderTarget(),   
   gradientStops,
   ARRAYSIZE(gradientStops),  
   D2D1::LinearGradientBrushProperties(D2D1::Point2F(0,
   0),
   D2D1::Point2F(0,
   0)));

 Save the file and close it.

To modify the gradient brush so that it will change appropriately when the window is resized

On the Project menu, click Class Wizard.
In the MFC Class Wizard, under Class name, select CMFCD2DWalkthroughView.
On the Messages tab, in the Messages box, select WM_SIZE and then click Add Handler. This action adds the OnSize message handler to the CMFCD2DWalkthroughView class.
In the Existing handlers box, select OnSize. Click Edit Code to display the CMFCD2DWalkthroughView::OnSize method. At the end of the method, add the following code.

   m_pLinearGradientBrush->SetEndPoint(CPoint(cx, cy));

 Save the file and close it.

To implement a D2D drawing handler

On the Project menu, click Class Wizard.
In the MFC Class Wizard, under Class name, select CMFCD2DWalkthroughView.
On the Messages tab, click Add Custom Message.
In the Add Custom Message dialog box, in the Custom Windows Message box, type AFX_WM_DRAW2D. In the Message handler name box, type OnDraw2D. Select the Registered Message option and then click OK. This action adds a message handler for the AFX_WM_DRAW2D message to the CMFCD2DWalkthroughView class.
In the Existing handlers box, select OnDraw2D. Click Edit Code to display the CMFCD2DWalkthroughView::OnDraw2D method. Use the following code for the CMFCD2DWalkthroughView::OnDrawD2D method.

   afx_msg LRESULT CMFCD2DWalkthroughView::OnDraw2D(WPARAM wParam,
   LPARAM lParam)  
{  
   CHwndRenderTarget* pRenderTarget = (CHwndRenderTarget*)lParam;  
   ASSERT_VALID(pRenderTarget);


   CRect rect;  
   GetClientRect(rect);


   pRenderTarget->FillRectangle(rect,
   m_pLinearGradientBrush);

   pRenderTarget->DrawText(_T("Hello,
   World!"),
   rect,
   m_pBlackBrush,
   m_pTextFormat);


   return TRUE;  
}

 Save the file and close it.

To verify the results

Build and run the application. It should have a gradient rectangle that changes when you resize the window. “Hello World!” should be displayed in the center of the rectangle.

Share via