In this blog post, I’m going to take a look into the overall design of the first Hilo application, the Hilo Browser, and will take a shallow dive into the integration of Windows features. The following sections will be covered:

·         Overall Application Design

·         Shell Integration

·         Direct 2D Integration

·         Windows Animation Integration

In future articles, I will take a closer look at the various feature areas of Hilo. For an overview on what the application does, read the first Hilo article on MSDN that describes the application. You can download the source from the Hilo Code Project page.

Overall Design

 The Hilo project solution consists of two projects: Browser – the actual application and Common – utility classes that will be shared with future solutions and that simplify various components specific to the Hilo Browser.

The Browser project contains the application entry point in the Browser.cpp source file.  This  entry point initializes the browser application and message loop as seen in the following code segment.

int APIENTRY _tWinMain(

    HINSTANCE /*hInstance*/,

    HINSTANCE /*hPrevInstance*/,

    LPTSTR    /*lpCmdLine*/,

    int       /*nCmdShow*/)


    ComPtr<IWindowApplication> mainApp;


    // Create and initialize the main application object

    HRESULT hr = SharedObject<BrowserApplication>::Create(&mainApp);


    if (SUCCEEDED(hr))


        // Start the message loop for the application

        hr = mainApp->RunMessageLoop();



    return 0;






Calling the Create method on the BrowserApplication object causes that object to be initialized via its Initialize method.  That method sets up all the child objects and their associated IWindow interfaces. During initialization, the components of the Hilo browser are initialized using the InitializeCarouselPane and InitializeMediaPane methods and are added as children of the application’s parent window.

Within the initialization methods, the MediaPane and CarouselPane objects are constructed and these objects encapsulate the various features used by the application.

Shell Integration Features

Shell integration features of Windows are used throughout various parts of the application.  The first noticeable place that shell integration is used is in the application initialization when the Photos library is used as the starting point for the browser and the Computer known folder is used as a fallback library.  The following code shows how this is being done:

        // No location has been defined yet, so we just load the pictures library

        if (nullptr == m_currentBrowseLocationItem)


            // Defualt to Libraris library

            hr = ::SHCreateItemInKnownFolder(FOLDERID_PicturesLibrary, 0, nullptr, IID_PPV_ARGS(&m_currentBrowseLocationItem));



        // If the Pictures Library was not found

        if (FAILED(hr))


            // Try obtaining the "Computer" known folder

            hr = ::SHGetKnownFolderItem(FOLDERID_ComputerFolder, static_cast<KNOWN_FOLDER_FLAG>(0), nullptr, IID_PPV_ARGS(&m_currentBrowseLocationItem));



Direct 2D Integration

Direct 2D is used as the rendering engine for the application because it’s faster than implementation in GDI and is simpler than implementation in Direct 3D. In the MediaPane and  CarouselPane class implementations, the first piece of Direct 2D integration can be seen when Direct 2D is set up in the CreateDeviceResources and CreateDeviceIndependentResources methods. In the BrowserApplication source file, the Direct2DUtility class is used to scale the CarouselPane and MediaPane child windows appropriately for the client’s DPI settings.

Windows Animation Integration

Windows Animation is used to render the cool transitions when photos are moved into the Hilo Browser’s media pane, when photos are scrolled through in the media pane, and for animating the carousel. The AnimationUtility class encapsulates the Windows Animation components such as timers, the Windows Animation Manager, transitions, and storyboards. The specific animations for components are scheduled through the AnimationUtility.