D3D9 Samples(15)--CustomUI

 

 

 

D3D9 Samples(15)--CustomUI

 

 

 

       打开CustomUI项目。编译运行：

 

 

        这个例子展示了DXUT提供的GUI系统。在dialog中展示各种控件的用法。

 

 

1. 对话框CDXUTDialog

 

1.1 初始化

 

InitApp

g_SampleUI.Init( &g_DialogResourceManager );

CDXUTDialog的初始化需要对话框资源管理对象g_DialogResourceManager。用于管理所需的资源。

 

g_SampleUI.SetCallback(OnGUIEvent );

设置控件消息响应函数，用于响应控件逻辑。

 

g_SampleUI.SetFont( 1,L"Comic Sans MS", 24,FW_NORMAL );

为Dialog添加第一种字体。

 

g_SampleUI.SetFont( 2,L"Courier New", 16,FW_NORMAL );

为Dialog添加第二种字体。

 

 

1.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.SetLocation( 0, 0 );

重置对话框位置。

 

g_SampleUI.SetSize(pBackBufferSurfaceDesc->Width,pBackBufferSurfaceDesc->Height );

重设对话框大小。

 

 

1.3 渲染

 

OnFrameRender

g_SampleUI.OnRender(fElapsedTime )

在这里绘制对话框。

 

 

1.4 接收消息

 

MsgProc

g_SampleUI.MsgProc(hWnd, uMsg,wParam, lParam );

在这里接收窗口消息，并在CDXUTDialog内部转化成控件消息，而触发OnGUIEvent。

 

 

 

2. 静态控件(CDXUTStatic)

 

2.1 初始化

 

InitApp

g_SampleUI.AddStatic(IDC_STATIC, L"This is a static control.", 0, 0, 200, 30 );

g_SampleUI.AddStatic(IDC_OUTPUT,

                          L"This static control provides feedback for your action. It will change as you interact with the UI controls.", 20, 50, 620, 300 );

在对话框上添加两个静态控件。

 

g_SampleUI.GetStatic(IDC_OUTPUT )->SetTextColor(D3DCOLOR_ARGB( 255, 255, 0, 0 ) );

g_SampleUI.GetStatic(IDC_STATIC )->SetTextColor(D3DCOLOR_ARGB( 255, 0, 255, 0 ) );

给两个静态控件分别设置不同的文字颜色。

g_SampleUI.GetControl(IDC_OUTPUT )->GetElement( 0 )->dwTextFormat =DT_LEFT | DT_TOP |DT_WORDBREAK;

g_SampleUI.GetControl(IDC_OUTPUT )->GetElement( 0 )->iFont = 2;

g_SampleUI.GetControl(IDC_STATIC )->GetElement( 0 )->dwTextFormat =DT_CENTER | DT_VCENTER |DT_WORDBREAK;

改变静态控件元素CDXUTElement的值，可以改变四种值：

UINT iTexture; 选择一个已有贴图。

UINT iFont; 选择一个已有字体。

DWORD dwTextFormat; 文字排版，使用和GDI中DrawText 函数的uFormat参数相同的可选值。

RECT rcTexture; 贴图区域

DXUTBlendColor TextureColor; 和贴图的混合色。包括6种状态，如Disable、Focus、Pressed等，主要实现在不同状态下控件的外观变化。

DXUTBlendColor FontColor; 和文字的混合色。

 

 

2.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_STATIC )->SetSize(pBackBufferSurfaceDesc->Width,pBackBufferSurfaceDesc->Height * 6 /10 );

g_SampleUI.GetControl(IDC_OUTPUT )->SetSize(pBackBufferSurfaceDesc->Width - 170,pBackBufferSurfaceDesc->Height /4 );

 

 

 

3. 按钮控件(CDXUTButton)

 

3.1 初始化

 

InitApp

g_SampleUI.AddButton(IDC_ENABLEIME, L"Enable (I)ME", 30, 390, 80, 35,L'I' );

g_SampleUI.AddButton(IDC_DISABLEIME, L"Disable I(M)E", 30, 430, 80, 35,L'M' );

在对话框中添加两个按钮控件。

 

 

3.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_ENABLEIME )->SetLocation( 130,pBackBufferSurfaceDesc->Height - 80 );

g_SampleUI.GetControl(IDC_DISABLEIME )->SetLocation( 220,pBackBufferSurfaceDesc->Height - 80 );

 

 

3.3 响应控件消息

 

OnGUIEvent

case IDC_ENABLEIME:

case IDC_DISABLEIME:

这里只能响应按钮按下消息。

 

 

 

4. 编辑控件(CDXUTEditBox)

 

4.1 初始化

 

InitApp

g_SampleUI.AddEditBox(IDC_EDITBOX1, L"Edit control with default styles. Type text here and press Enter", 20, 440, 600, 32 );

在对话框中添加编辑控件。

 

 

4.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_EDITBOX1 )->SetLocation( 20,pBackBufferSurfaceDesc->Height - 230 );

g_SampleUI.GetControl(IDC_EDITBOX1 )->SetSize(pBackBufferSurfaceDesc->Width - 40, 32 );

 

 

4.3 响应控件消息

 

OnGUIEvent

caseIDC_EDITBOX1:

case IDC_EDITBOX2:

可以响应两种消息：一是EVENT_EDITBOX_CHANGE，一旦文字改变即响应；二是EVENT_EDITBOX_STRING，一旦在编辑框中回车即响应。

 

 

 

5. IME编辑控件(CDXUTIMEEditBox)

 

5.1 初始化

 

InitApp

CDXUTIMEEditBox*pIMEEdit;

CDXUTIMEEditBox::InitDefaultElements( &g_SampleUI );

为所有CDXUTIMEEditBox控件初始化默认的元素设置。

 

if( SUCCEEDED( CDXUTIMEEditBox::CreateIMEEditBox( &g_SampleUI,IDC_EDITBOX2,

L"IME-capable edit control with custom styles. Type and press Enter", 20, 390, 600, 45,false, &pIMEEdit ) ) )

和其他控件不同，要先检查能否创建这个控件，然后再添加到对话框中。创建一个IME编辑控件并返回CDXUTIMEEditBox指针。

 

{

g_SampleUI.AddControl(pIMEEdit );

pIMEEdit->GetElement( 0 )->iFont = 1;

pIMEEdit->GetElement( 1 )->iFont = 1;

pIMEEdit->GetElement( 9 )->iFont = 1;

pIMEEdit->GetElement( 0 )->TextureColor.Init(D3DCOLOR_ARGB( 128, 255, 255, 255 ) );  // Transparent center

pIMEEdit->SetBorderWidth( 7 );

pIMEEdit->SetTextColor(D3DCOLOR_ARGB( 255, 64, 64, 64 ) );

pIMEEdit->SetCaretColor(D3DCOLOR_ARGB( 255, 64, 64, 64 ) );

pIMEEdit->SetSelectedTextColor(D3DCOLOR_ARGB( 255, 255, 255, 255 ) );

pIMEEdit->SetSelectedBackColor(D3DCOLOR_ARGB( 255, 40, 72, 72 ) );

 

将IME控件加入到对话框中，并设置字体、颜色等属性。

}

 

 

5.2 其他和CDXUTEditBox相同

 

 

 

6. 滑块控件(CDXUTSlider)

 

6.1 初始化

 

InitApp

g_SampleUI.AddSlider(IDC_SLIDER, 200, 450, 200, 24, 0, 100, 50, false );

在对话框中添加一个滑块控件。

 

 

6.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_SLIDER )->SetLocation( 10,pBackBufferSurfaceDesc->Height - 140 );

 

 

6.3 响应控件消息

 

OnGUIEvent

case IDC_SLIDER:

当滑块被拖动或点击改变滑块位置时响应。

 

 

 

7. 检查框控件(CDXUTCheckBox)

 

7.1 初始化

 

InitApp

g_SampleUI.AddCheckBox(IDC_CHECKBOX,

L"This is a checkbox with hotkey. Press 'C' to toggle the check state.", 170, 450, 350, 24,false, L'C',false );

g_SampleUI.AddCheckBox(IDC_CLEAREDIT,

L"This checkbox controls whether edit control text is cleared when Enter is pressed. (T)",

170, 460, 450, 24, false,L'T', false );

在对话框中添加两个检查框控件。

 

 

7.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_COMBOBOX )->SetLocation( 20,pBackBufferSurfaceDesc->Height - 180 );

设置位置。

 

 

7.3 响应控件消息

 

OnGUIEvent

case IDC_COMBOBOX:

点击时响应。

 

 

 

8. 单选按钮控件(CDXUTRadioButton)

 

8.1 初始化

 

InitApp

g_SampleUI.AddRadioButton(IDC_RADIO1A, 1, L"Radio group 1 Amy (1)", 0, 50, 220, 24,false, L'1' );

g_SampleUI.AddRadioButton(IDC_RADIO1B, 1, L"Radio group 1 Brian (2)", 0, 50, 220, 24,false, L'2' );

g_SampleUI.AddRadioButton(IDC_RADIO1C, 1, L"Radio group 1 Clark (3)", 0, 50, 220, 24,false, L'3' );

 

g_SampleUI.AddRadioButton(IDC_RADIO2A, 2, L"Single (4)", 0, 50, 90, 24,false, L'4' );

g_SampleUI.AddRadioButton(IDC_RADIO2B, 2, L"Double (5)", 0, 50, 90, 24,false, L'5' );

g_SampleUI.AddRadioButton(IDC_RADIO2C, 2, L"Triple (6)", 0, 50, 90, 24,false, L'6' );

 

添加两组单选按钮，第二个形参nButtonGroup作为组号。

 

 

8.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_RADIO1A )->SetLocation(pBackBufferSurfaceDesc->Width - 160, 100 );

…

设置位置。

 

 

8.3 响应控件消息

 

OnGUIEvent

caseIDC_RADIO1A:

caseIDC_RADIO1B:

case IDC_RADIO1C:

一组在一起响应。

 

 

 

9. 列表控件(CDXUTListBox)

 

9.1 初始化

 

InitApp

g_SampleUI.AddListBox(IDC_LISTBOX, 30, 400, 200, 150, 0 );

for(int i = 0; i < 15; ++i )

{

WCHARwszText[50];

swprintf_s(wszText, 50, L"Single-selection listbox item %d",i );

g_SampleUI.GetListBox(IDC_LISTBOX )->AddItem(wszText, ( LPVOID )(size_t )i );

}

在对话框中添加一个列表控件，并加入15个条目(Item)。

 

 

9.2 在窗口大小变化等情况下对Dialog的位置和大小做响应的调整

 

OnResetDevice

g_SampleUI.GetControl(IDC_LISTBOX )->SetLocation(pBackBufferSurfaceDesc->Width - 400,

pBackBufferSurfaceDesc->Height - 180 );

g_SampleUI.GetControl(IDC_LISTBOX )->SetSize( 190, 96 );

重置控件的位置和大小。

 

 

9.3 响应控件消息

 

OnGUIEvent

case IDC_LISTBOX:

能接收两种消息：一是点选Item消息EVENT_LISTBOX_SELECTION；二是双击Item消息EVENT_LISTBOX_ITEM_DBLCLK