Share via


Changing the Skin Code for the Progress Bar

Other versions of this page are also available for the following:

8/28/2008

In Cloning the Commctrl Module, you made a local copy of the skin code for all common controls that can be used with your run-time image. The following code shows the changes you can make to the local copy of the progress bar skin code, Progressview.cpp.

These changes cause the progress bar to advance from the right to the left rather than from left to right. The code in Progressview.cpp provides the implementations in your run-time image for the methods in the ProgressBarView_t interface.

To change the progress bar code

  1. On the File menu, select Open, and then select File. Navigate to %_WINCEROOT%\Public\Common\Oak\Drivers\Skinnableui\Commctrl. Set Files of Type: to All Files, and then open Progressview.cpp file.

    The window for this source file opens.

  2. The following code provides a schematic view of the code in Progessview.cpp and shows the two sections of the drawing code that you should delete and replace.

    void ProgressBarView_t::Draw(  /* ... Parameters ... */ )
    {
    // Variable declarations.
    /* ... */
    
    // Find the device context.
    /* ... */
    
    // Determines and sets the size and parameters of the control.
    /* ... */
    
      for ( i = 0; i < nBlocks; i++ )
      {      
        if ( dwStyle & PBS_VERTICAL )
        {         
          // Calculations for a vertical progress bar.
          /* ... */
        }
        else
        {
          // Calculations for a horizontal progress bar.
    
          // ----- Original code for drawing left-to-right -----
          // Delete:  rc.right = rc.left + dxBlock;
          // Delete:  // Are we past the end?
          // Delete:  if (rc.left >= rcClient.right)
          // Delete:  {
          // Delete:    break;
          // Delete:  }
          // Delete:  
          // Delete:  if (rc.right >= rcClient.right) 
          // Delete:  {
          // Delete:    rc.right = rcClient.right - 1;
          // Delete:  }
          // ---------------------------------------------------
    
    
          // ======== New code for drawing right-to-left =======
    
          rc.left = rc.right - dxBlock;
    
          // Check to see if the bar is already starting
          // after the end of its range.
          if (rc.right <= rcClient.left)
          {
            break;
          }
    
          if (rc.left <= rcClient.left) 
          {
            rc.left = rcClient.left - 1;
          }
          // ===================================================
    
        }
    
        // Make the actual drawing call.
        /* ... */
    
        if (dwStyle & PBS_VERTICAL) 
        {
          // Advance a vertical progress bar.
          /* ... */
        } 
        else 
        {
          // ----- Original code for drawing left-to-right -----
          // Delete:
          // Delete:  rc.left = rc.right + dxSpace;
          // Delete:
          // ---------------------------------------------------
    
    
          // ======== New code for drawing right-to-left =======
    
            rc.right = rc.left - dxSpace;
    
          // ===================================================
          }
        }
    
        // Cleanup.
        /* ... */
    
      }
    }
    
  3. From the File menu, choose Save, and then Close to close the file.

See Also

Reference

ProgressBarView_t

Concepts

How to Customize the Appearance of Common Controls