Customizing the Browser UI with Silverlight for Windows Embedded (Windows Embedded CE 6.0)

1/6/2010

If you implement the Internet Explorer Embedded with the tiling engine, you can use xxxrframeworkextxx to customize all elements of the user interface that are external to the Web content that the browser displays.

Creating a Custom User Control for a Browser Element

The complete steps for creating a custom user control in xxuiframeworkxx are listed in Create a Custom User Control in Silverlight for Windows Embedded. You can use those same steps, with modifications, to customize the Internet Explorer Embedded, as described below.

Before you begin the steps, create a named element in a Microsoft Silverlight 2 file to define the appearance and behavior of your browser. You can see an example of how to create a named element in the IE XAML UI Sample browser, which defines the appearance of the browser in XAML files in the %_WINCEROOT%\public\ie\oak\iesample_exr\ui\xaml directory. For example, the FavoriteListItem.xaml file contains the following definition of a named element, IESample_EXR.FavoriteListItem:

<UserControl
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="IESample_EXR.FavoriteListItem"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    >

Using the Custom User Control in your Program

1. Include the following header files in your C++ source file.

   #include <XamlRuntime.h>
   #include <XRCustomControl.h>
   

2. (Optional) If you want the application code to call public methods in the custom user control, you can create an interface and define its public methods. For example, in the FavoriteManager.h file, in the %_WINCEROOT%\public\ie\oak\iesample_exr\ui\ directory:

   class IFavoriteListItem : public IXRCustomUserControl
   {
   };
   

   Define a globally unique identifier (GUID) for the interface by using the Guidgen Tool. For example, in the FavoriteManager.cpp file:

   DEFINE_GUID(IID_IFavoriteListItem,
   0x1f523dde, 0x3939, 0x4d0c, 0x93, 0x7a, 0xb0, 0xe0, 0x1, 0x1e, 0x78, 0xe3);
   

3. Implement a custom user control class that inherits from the template wrapper class XRCustomUserControl<IFace, Derived, DerivedIID>. If you created a custom interface, the IFace parameter of the template must be the name of that interface. For example, in the FavoriteManager.h file:

   class FavoriteListItem : public XRCustomUserControl<IFavoriteListItem,FavoriteListItem>
   {
   public:   
       static HRESULT GetXamlSource(XRXamlSource* pXamlSource);
       static HRESULT Register();   
   

4. Implement methods in the control class. At a minimum, the control must implement the GetXamlSource and Register methods. The C++ code uses the GetXamlSource method to parse and load the control into the xxuiframeworkxx visual tree, as shown in the example code below.

   HRESULT FavoriteListItem::GetXamlSource(XRXamlSource* pXamlSource)
   {
       pXamlSource->SetResource(BrowserApplication::GetInst()->GetHInst(), RT_XAML, MAKEINTRESOURCE(ID_FAVORITELISTITEM_XAML));
   
       return S_OK;
   }
   HRESULT FavoriteListItem::Register()
   {
       HRESULT hr = S_OK;
       CHR( XRCustomUserControl::Register(IID_IFavoriteListItem,L"FavoriteListItem",L"clr-namespace:IESample_EXR") );
   Error:
       return hr;
   }
   

5. In your application startup code, register the custom user control. This happens in FavoriteManager.cpp in the BeforeLoadXaml method:

   HRESULT FavoriteManager::BeforeLoadXaml()
   {
       HRESULT hr = S_OK;
       // Register FavoriteListItem user control
   
       CHR(FavoriteListItem::Register());
   Error:
       return hr;
   }
   

See Also

Concepts

The IE XAML UI Sample Browser

Other Resources

Customizing the Browser User Interface
Silverlight for Windows Embedded