This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(51.2, 84%, 14%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAA%3C/text%3E%3C/svg%3E)
Hi,
My UX team shared this UI. I need to implement similar UI in MFC dialog.
I dont know what MFC control I need to use to achieve similar UI. Please guide me.
If it has a header, probably a ListView (CListCtrl) :
Using CListCtrl
In MFC Clistctrl, right side of column, border is coming. How to avoid it.
How to display sorting icon in the header?
How to add same image in coumn 1st items using CImageList?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(92.8, 12%, 18%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EDL%3C/text%3E%3C/svg%3E)
You can set the column width when you insert it using InsertColumn, or resize it subsequently using SetColumnWidth.
You can add icons for the sort indicators something like this:
//m_SortIcons is a CImageList member variable of the dialog
{
/* Initialise the image list for the sort icons */
m_SortIcons.Create( 8, 8, ILC_MASK, 2, 2 );
HICON hIco1;
hIco1 = static_cast<HICON>( LoadImage( AfxGetInstanceHandle(), MAKEINTRESOURCE( IDI_UP ), IMAGE_ICON, 0, 0, LR_DEFAULTCOLOR ) );
m_SortIcons.Add( hIco1 );
hIco1 = static_cast<HICON>( LoadImage( AfxGetInstanceHandle(), MAKEINTRESOURCE( IDI_DOWN ), IMAGE_ICON, 0, 0, LR_DEFAULTCOLOR ) );
m_SortIcons.Add( hIco1 );
m_List.GetHeaderCtrl()->SetImageList( &m_SortIcons );
}
You can specify an image (list item) when you insert the item.
Hello,
another way is to use a grid (with one column, expanded over the width of the window area). Have a look at this great GridCtrl: MFC-Grid-control-2-27 and use ExpandColumnsToFit .
Regards, Guido