Wednesday, August 26, 2015

[ MFC ] - Changing progressbar colour of CProgressCtrl

1. Introduction


A “Progress Bar Control” can be used to show the progress of a long running operation. In MFC, “CProgressCtrl” class is associated the progress bar control. In this article, we will see how to set the progress bar background as well as the progress colour. The background colour can be set using the class member function directly. But, for setting the bar colour we need to send the message to progress bar from the containing parent.

This article is applicable to Visual Studio 2005 or earlier. If you use, 2005 later versions, you can set the bar colour using ”SetBarColor” member function of the CProgressCtrl.


2. About the Example


Have a look at the below screenshot:


MFC Progress Bar Colour
Fig 1. MFC Progress Control with Different bar colour

The Start Progress button will start progress in default Gray background and blue bar colour (Depends on your windows Theme). The bar animation is simulated with an introduction of small delay while progressing. The Reset Progress button will reset the progress to the start of the progress. The Set Red button of the sample changes the background colour to white and foreground colour to Red.


3. Create the Application


Create a dialog-based application and name it as PrgrsClr. After the project is created, drag and drop a “Progress Control” from the toolbox to the dialog. In our example, the progress control ID is set to IDC_PROG_BAR. Similarly, add the other buttons as shown in the previous section. Handle the “BN_CLICKED” event for the buttons Start Progress, Reset Progress, Set Red. The below screen shot shows handling the BN_CLICKED for the Start Progress button.

Button Click Handler
Fig 2. Button Click Handler

Add a control variable for the Progress bar as shown in the below screenshot:

Adding CProgressCtrl control variable
Fig 3. Adding CProgressCtrl Control variable

1) Invoke Add Variable dialog from the Context menu by right clicking the class name from the class view tab (Marked as 1)
2) In the Add Member variable dialog, select the progress bar control id (Marked as 2)
3) Make sure the Category is set to Control (Marked as 3)
4) Provide the control variable name as m_ctrl_progress (Marked as 4) and click the finish button (Marked as 5)


4. Initialize Progress Bar


1) First, declare a function the header file, which we can use for initializing the progress bar. The code is below:

//Sample 01: Initialize Progress Bar
void InitProgress();

2) In the CPP file, the function InitProgress is implemented. The “CProgressCtrl::SetRange” function sets the progress bar range from number x -> y. In our case, we set the range for out progress control from 0 to 100. That means, when the progress control value is at 5, the bar appears at the initial stage and when the value is at 90 the bar approaches towards the end. In our case, each progress unit represents 1%. Next, the position is set at 0 using “CProgressCtrl::SetPos”. The progress control’s current position at zero indicates that the progress is not yet started.

//Sample 02: Initialize Progress Control
void CPrgrsClrDlg::InitProgress()
{
              m_ctrl_progress.SetRange(0,100);
              m_ctrl_progress.SetPos(0);
}


3) In the OnInitDialog of the class CPrgrsClrDlg, make a call to the InitProgress so that when the dialog appears, the progress control initialized to 0-100 Range and control start position is at zero.  Below is the code:

// Set the icon for this dialog.  The framework does this automatically
//  when the application's main window is not a dialog
SetIcon(m_hIcon, TRUE);                  // Set big icon
SetIcon(m_hIcon, FALSE);          // Set small icon

//Sample 03: Make a call to Progress Control
InitProgress();

  

5.  Capturing the Progress - Simulated


1) In the Start Progress button click handler increment the progress bar position one by one with a delay of 100 milliseconds. Here a loop that runs for 100 times is used to increment the progress position. To set the delay of 100 milliseconds “Sleep” function is used. Below is the code:

void CPrgrsClrDlg::OnBnClickedButtonStart()
{
       //Sample 04: Start Progressing with a Delay
       for (int i = 0; i<=100; i++)
       {
              m_ctrl_progress.SetPos(i);
              Sleep(100);
       }
}


2) Make a call to the InitProgress in the Reset Progress button click handler. Below is the code:

void CPrgrsClrDlg::OnBnClickedButtonReset()
{
       //Sample 05: Reset the Progress Status
       InitProgress();
}


6. Changing the progress bar color



In the Set Red button click handler, the progress bar’s background color, as well as the Bar's color, is changed. The background color is set to white whereas the Bar color is set to Red. In VS2005 and earlier versions, the bar color can be set by sending the PBM_SETBARCOLOR” message to the progress bar. Below is the code:

void CPrgrsClrDlg::OnBnClickedButtonRed()
{
       //Sample 06: Change Background to white and Bar color to Red
       m_ctrl_progress.SetBkColor(RGB(255, 255, 255));
       m_ctrl_progress.SendMessage(PBM_SETBARCOLOR,0,RGB(255, 0, 0));

}

Video : Watch the running Example here



Source Code : Download

Wednesday, August 19, 2015

[ ASP.Net ] - Designing Master and content pages using ContentPlaceHolder control

1. Introduction


Master pages help in providing the consistently laid-out pages. When we switch between different pages constant look and feel is achieved throughout the websites.  Microsoft provides Master page support from ASP.net 2.0 onwards. The master page is used to provide the outer skeleton structure of the websites and this outer skeleton can be seen as web page header, footer and sidebars with Navigational elements. In this article, I will show you creating a Master page along with the web pages.


2. Master Page and Content Page


The “Master Page” and “Content Page” together gives the complete page layout. Master page provides the constant outer shell and the navigable web pages are placed in the content page area. The master page provides a content placeholder control, which can be used to hold the web page contents. To better explain this have a look at the below depiction:

Fig 1. Master Page Design

Now let us say that your website contains 20 web pages. All these web pages are shown in the page content area and when you navigate to these 20 pages, the outer shell (Top, Bottom, sidebar) remains unaltered. This gives consistency when different pages of the website are navigated. The master page skeleton structures usually have the information common to all the web pages. For example in the above skeleton, the Navigation links can be provided in the sidebar, Site log and images can be placed in the header and copyright information in the footer.


3. Creating a Master and Content Page


Have a look at the below depiction:


Fig 2. Adding Master and Content Pages

Using “Add New Item” option we can add a master page to a web site and the item is marked as 1 in the above picture. Once the page is added to the project, it will define the outer shell. We can place HTML code, as part of the master page and that will act as a common code to all the pages. While defining the common HTML content, we can also choose the place where the web page contents go by making use of the “ContentPlaceHolder” control (Marked as 4). Note that the ContentPlaceHolder control will be visible in the toolbox when the master page is opened, as this control is specific to master pages. While we add Web forms (Marked as 2) we have the option to specify the master page by selecting the checkbox “Select master Page”. The below video shows creating a simple master and content page:

Video 1: Creating a Master Page




4. The MasterPage Example


Have a look at the below screenshot:

In the below example the pale colour defines the master page layout which consists of Header, Sidebar, Footer and Detail Area (In yellow background). In the header Page Title “Master Page Example” is written. In the sidebar, site navigations are given. In the footer area, the site name is given. The content is placed in the details area through a ContentPlaceHolder Control.

Fig 3. MasterPage  Example



Have a look at the below video to know how this example is created:

Video 2: Creating the Example





Source Code: Download
Like this site? Tell it to your Firend :)