The XAML-based UI stack for Metro Style Apps is quite rich for the youngest member of the XAML UI frameworks family, but sometimes the basic controls even with their rich APIs are not enough. That is where the most powerful point of extensibility of the XAML UI comes in – the DirectX integration.

With DirectX you can create the highest quality real time Direct3D graphics, high performance Direct2D drawings, apply stunning looking pixel shader effects, read and write images of many different formats with WIC, play back video with the Media Framework and high quality audio with XAudio2. You can do all these things in a XAML-based app, so you can use all the rich UI APIs of the XAML framework to quickly create a beautiful looking application and add some special DirectX touch that will make it unique.

In this article I will show you how to create a libraries for drawing Direct2D or Direct3D scenes in the background of an otherwise XAML-rendered UI.

Where to start

The DirectX and XAML interop article on MSDN talks about 3 different ways to mix XAML and DirectX in WinRT:

1. SurfaceImageSource – which is good for mostly static scenes that get drawn into an Image control
2. VirtualSurfaceImageSource – which is similar to SurfaceImageSource, but allows to work with surfaces larger than the size of the screen – perhaps for working with high resolution photos or maps
3. SwapChainBackgroundPanel – which can be used for high performance graphics with almost the same level of control you would otherwise get if you created a solely DirectX-driven app or game

The last option is what we’ll use to create a DirectX-based background for a XAML app. A lot of the things we will use are already available as part of the Metro style app samples available from MSDN, but there is no sample where the DirectX stuff is packaged as a separate library so that you can use it in any C++, C# or VB application and have some reusable code that you don’t have to write repeatedly.

Anatomy of a Direct2D Application

To learn how to create a reusable library it helps to know what are the basics of a DirectX application. When you create a basic Direct2D Application from the template that ships with Visual Studio 11 for Windows 8 Consumer Preview you get this:

The pch files are for the precompiled header with references to DirectX headers and WRL (Windows Runtime C++ Template Library), which is an ATL-inspired library that helps to work with COM in a WinRT app – quite useful since DirectX is built on COM.

DirectXHelper.h contains a simple inline function that throws WinRT platform exceptions for failed HRESULTs. Useful since they get projected to CLR Exceptions if you are planning on consuming the code with .NET.

DirectXBase is an abstract base class that helps to build basic DirectX applications that use D2D, D3D, WIC or DirectWrite by providing basic access to the global class factories and shared resources. Its main entry point is the Initialize() method that takes an instance of the CoreWindow class, which is the core UI piece of every WinRT app and makes that window into a DirectX-managed one. This is also the thing we’ll need to change when we use the SwapChainBackgroundPanel since we want to only associate that panel with DirectX and not the entire UI. Initialization code is divided into 3 methods:

1. CreateDeviceIndependentResources that in the case of a Direct2D app creates D2D and DWrite factories,
2. CreateDeviceResources that creates so called D3D 11 device, its context, D2D device and sets the DPI
3. CreateWindowSizeDependentResources creates
   1. the swap chain, which is a collection of bitmaps or textures that get presented on screen in quick succession to create an illusion of motion,
   2. the render target view, which tells the GPU what to render to (the back buffer of the swap chain),
   3. the depth stencil texture, which is used to control layering/z-ordering of pixels in the scene,
   4. the view port, which controls the view of the swap chain that is shown on screen,
   5. finally – it associates the D2D device with the back buffer and sets the text anti-aliasing mode

UpdateForWindowSizeChange() is what you need to call whenever the screen resolution changes (e.g. when the app gets snapped, goes into portrait mode or back or when display monitor configuration changes). It basically clears out old window size dependent resources and calls CreateWindowSizeDependentResources to recreate these in different resolution.
The Render() method is where you put all your scene rendering code calls and is what you call when you want to update the view.
Present() should be called after Render() and it basically flips the buffers in the swap chain or reinitializes everything if something failed.
BasicDirect2DApplication.cpp/.h is named after my application name. It is the main entry point of the application and inherits from DirectXBase, overriding its methods to actually render some content on the screen, so you end up with a simple text displayed in the middle of the screen when the app is run. It also has the code that wires up DirectX to the CoreWindow and controls the rendering events. If you are interested in how to do it for a purely DirectX-based application – you can read the How to set up your Metro style DirectX app to display a view on MSDN. For DirectX-XAML interop – we will do things differently.

Anatomy of a Direct3D Application

The Direct3D app is a bit similar, where Direct3DBase is analogue to the DirectXBase class of the Direct2D app, but has a few more files worth noting:

My BasicDirect3DApplication class in this case does not include any DirectX code except for calling out to CubeRenderer which is the subclass of the Direct3DBase class in this case. The Direct3DBase class in the template D3D app is a bit different from its D2D version. Obviously it does not do anything with D2D or DWrite, so it does not deal with these class factories.
CubeRenderer defines the vertices of a cube and allows to render it animated based on system time.
SimplePixel/VertexShader.hlsl are the pixel and vertex shader files that are used to process the cube vertices and turn them into a rasterized output on your screen.

Creating a DirectX WinRT Component Library

I could just share a complete library, which I will at the end, but I think it helps to know how it is done in the first place, so in case you disagree with something I have done or if something changes in the future versions of the tools which currently are in flux – you will be able to do it again yourself.

If you want to create the library – you start with an empty C++ WinRT Component Library project. You can remove the stub WinRTComponent.cpp/.h files. Next you should to copy the list of referenced project linker input files (static libraries) from the template DX application to the library. The screenshot below shows where to do it (note – you need to do it once per each solution configuration, so if you switch between Win32, x64 or ARM – you need to reenter these, so you should probably switch between all configurations and set these for all of them now.

d2d1.lib; d3d11.lib; dxgi.lib; ole32.lib; windowscodecs.lib; dwrite.lib; %(AdditionalDependencies)

The second step is to copy the header file includes from the template DX app pch into your project’s pch file.
Finally, copy the Direct3DBase and DirectXHelper files into the library and we are ready to do some coding. Note that copying and pasting between C++ projects in the Solution Explorer works differently than with say C#. If you do it for files in a C# project – they get copied between projects. If you do it for C++ – they only get referenced in another project, so make sure you don’t do it and delete a temporary project! You can instead just copy the files in Windows Explorer and add them to the project after making the copy outside.

Creating Direct2DBaseForComposition

Add a new class to the project called Direct2DBaseForComposition – you can do it by pressing Alt+Shift+C in the Solution Explorer. The class will derive from DirectXBase and will hook up to the SwapChainBackgroundPanel instead of the CoreWindow in the way described in the MSDN article, so we’ll need to hide the version of the Initialize method that only takes a CoreWindow reference and add one that takes a SwapChainBackgroundPanel, save the native interface to the panel, modify the swap chain initialization to set its dimensions based on panel size and set scaling to DXGI_SCALING_STRETCH, replace the CreateSwapChainForCoreWindow call with one for CreateSwapChainForComposition, hook up the swap chain to the swap chain panel and finally override the Present() method to call the version of the Initialize() method that takes the swap chain panel when the device gets reset.

#pragma once
#include "DirectXBase.h"
#include "windows.ui.xaml.media.dxinterop.h"

ref class Direct2DBaseForComposition abstract
    : public DirectXBase
{
public:
    Direct2DBaseForComposition(void);
    ~Direct2DBaseForComposition(void);

public:
	virtual void CreateWindowSizeDependentResources() override;
	virtual void Initialize(Windows::UI::Core::CoreWindow^ window) override;
	void Initialize(
		_In_ Windows::UI::Core::CoreWindow^ window,
		_In_ Windows::UI::Xaml::Controls::SwapChainBackgroundPanel^ swapChainPanel);
	virtual void Present() override;

private:
	Microsoft::WRL::ComPtr<ISwapChainBackgroundPanelNative>   m_swapChainNative;
	Windows::UI::Xaml::Controls::SwapChainBackgroundPanel^    m_swapChainPanel;
};

Direct2DBaseForComposition.cpp

#include "pch.h"
#include "Direct2DBaseForComposition.h"

using namespace Microsoft::WRL;
using namespace Windows::ApplicationModel;
using namespace Windows::ApplicationModel::Core;
using namespace Windows::ApplicationModel::Activation;
using namespace Windows::UI::Core;
using namespace Windows::System;
using namespace Windows::Foundation;
using namespace Windows::Graphics::Display;
using namespace D2D1;

Direct2DBaseForComposition::Direct2DBaseForComposition(void)
{
}


Direct2DBaseForComposition::~Direct2DBaseForComposition(void)
{
}

void Direct2DBaseForComposition::Initialize(
	_In_ Windows::UI::Core::CoreWindow^ window)
{
    // Can't reduce visibility of a ref class method in a subclass
	throw Platform::Exception::CreateException(
		1 << 31 | FACILITY_ITF << 16 | 1);
		//ref new Platform::String(L"This method is not supported. Use the other overload."));
}

void Direct2DBaseForComposition::Initialize(
	_In_ Windows::UI::Core::CoreWindow^ window,
	_In_ Windows::UI::Xaml::Controls::SwapChainBackgroundPanel^ swapChainPanel)
{
	m_swapChainPanel = swapChainPanel;

	IInspectable* panelInspectable =
		(IInspectable*) reinterpret_cast<IInspectable*>(
			swapChainPanel);
	panelInspectable->QueryInterface(
		__uuidof(ISwapChainBackgroundPanelNative),
		(void **)&m_swapChainNative);

	DirectXBase::Initialize(window);
}

// Allocate all memory resources that change on a window SizeChanged event.
void Direct2DBaseForComposition::CreateWindowSizeDependentResources()
{ 
    // Store the window bounds so the next time we get a SizeChanged event we can
    // avoid rebuilding everything if the size is identical.
    m_windowBounds = m_window->Bounds;

    // If the swap chain already exists, resize it.
    if(m_swapChain != nullptr)
    {
        DX::ThrowIfFailed(
            m_swapChain->ResizeBuffers(2, 0, 0, DXGI_FORMAT_B8G8R8A8_UNORM, 0)
            );
    }
    // Otherwise, create a new one.
    else
    {
        // Create a descriptor for the swap chain.
        DXGI_SWAP_CHAIN_DESC1 swapChainDesc = {0};
		swapChainDesc.Width = (UINT)m_windowBounds.Width;
		swapChainDesc.Height = (UINT)m_windowBounds.Height;
        swapChainDesc.Format = DXGI_FORMAT_B8G8R8A8_UNORM;           // this is the most common swapchain format
        swapChainDesc.Stereo = false; 
        swapChainDesc.SampleDesc.Count = 1;                          // don't use multi-sampling
        swapChainDesc.SampleDesc.Quality = 0;
        swapChainDesc.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
        swapChainDesc.BufferCount = 2;                               // use double buffering to enable flip
        swapChainDesc.Scaling = DXGI_SCALING_STRETCH;
        swapChainDesc.SwapEffect = DXGI_SWAP_EFFECT_FLIP_SEQUENTIAL; // we recommend using this swap effect for all applications
        swapChainDesc.Flags = 0;

        // Once the desired swap chain description is configured, it must be created on the same adapter as our D3D Device

        // First, retrieve the underlying DXGI Device from the D3D Device.
        ComPtr<IDXGIDevice1> dxgiDevice;
        DX::ThrowIfFailed(
            m_d3dDevice.As(&dxgiDevice)
            );

        // Identify the physical adapter (GPU or card) this device is running on.
        ComPtr<IDXGIAdapter> dxgiAdapter;
        DX::ThrowIfFailed(
            dxgiDevice->GetAdapter(&dxgiAdapter)
            );

        // And obtain the factory object that created it.
        ComPtr<IDXGIFactory2> dxgiFactory;
        DX::ThrowIfFailed(
            dxgiAdapter->GetParent(
                __uuidof(IDXGIFactory2), 
                &dxgiFactory
                )
            );

		// Create a swap chain for this window from the DXGI factory.
		DX::ThrowIfFailed(
			dxgiFactory->CreateSwapChainForComposition(
				m_d3dDevice.Get(),
				&swapChainDesc,
				nullptr,    // allow on all displays
				&m_swapChain
				)
			);

        m_swapChainNative->SetSwapChain(m_swapChain.Get());

        // Ensure that DXGI does not queue more than one frame at a time. This both reduces 
        // latency and ensures that the application will only render after each VSync, minimizing 
        // power consumption.
        DX::ThrowIfFailed(
            dxgiDevice->SetMaximumFrameLatency(1)
            );

    }

    // Obtain the backbuffer for this window which will be the final 3D rendertarget.
    ComPtr<ID3D11Texture2D> backBuffer;
    DX::ThrowIfFailed(
        m_swapChain->GetBuffer(
            0,
            __uuidof(ID3D11Texture2D),
            &backBuffer
            )
        );

    // Create a view interface on the rendertarget to use on bind.
    DX::ThrowIfFailed(
        m_d3dDevice->CreateRenderTargetView(
            backBuffer.Get(),
            nullptr,
            &m_renderTargetView
            )
        );

    // Cache the rendertarget dimensions in our helper class for convenient use.
    D3D11_TEXTURE2D_DESC backBufferDesc = {0};
    backBuffer->GetDesc(&backBufferDesc);
    m_renderTargetSize.Width  = static_cast<float>(backBufferDesc.Width);
    m_renderTargetSize.Height = static_cast<float>(backBufferDesc.Height);

    // Create a descriptor for the depth/stencil buffer.
    CD3D11_TEXTURE2D_DESC depthStencilDesc(
        DXGI_FORMAT_D24_UNORM_S8_UINT, 
        backBufferDesc.Width,
        backBufferDesc.Height,
        1,
        1,
        D3D11_BIND_DEPTH_STENCIL
        );

    // Allocate a 2-D surface as the depth/stencil buffer.
    ComPtr<ID3D11Texture2D> depthStencil;
    DX::ThrowIfFailed(
        m_d3dDevice->CreateTexture2D(
            &depthStencilDesc,
            nullptr,
            &depthStencil
            )
        );

    // Create a DepthStencil view on this surface to use on bind.
    DX::ThrowIfFailed(
        m_d3dDevice->CreateDepthStencilView(
            depthStencil.Get(),
            &CD3D11_DEPTH_STENCIL_VIEW_DESC(D3D11_DSV_DIMENSION_TEXTURE2D),
            &m_depthStencilView
            )
        );

    // Create a viewport descriptor of the full window size.
    CD3D11_VIEWPORT viewport(
        0.0f,
        0.0f,
        static_cast<float>(backBufferDesc.Width),
        static_cast<float>(backBufferDesc.Height)
        );

    // Set the current viewport using the descriptor.
    m_d3dContext->RSSetViewports(1, &viewport);

    // Now we set up the Direct2D render target bitmap linked to the swapchain. 
    // Whenever we render to this bitmap, it will be directly rendered to the 
    // swapchain associated with the window.
    D2D1_BITMAP_PROPERTIES1 bitmapProperties = 
        BitmapProperties1(
            D2D1_BITMAP_OPTIONS_TARGET | D2D1_BITMAP_OPTIONS_CANNOT_DRAW,
            PixelFormat(DXGI_FORMAT_B8G8R8A8_UNORM, D2D1_ALPHA_MODE_PREMULTIPLIED),
            m_dpi,
            m_dpi
            );

    // Direct2D needs the dxgi version of the backbuffer surface pointer.
    ComPtr<IDXGISurface> dxgiBackBuffer;
    DX::ThrowIfFailed(
        m_swapChain->GetBuffer(
            0,
            __uuidof(IDXGISurface),
            &dxgiBackBuffer
            )
        );

    // Get a D2D surface from the DXGI back buffer to use as the D2D render target.
    DX::ThrowIfFailed(
        m_d2dContext->CreateBitmapFromDxgiSurface(
            dxgiBackBuffer.Get(),
            &bitmapProperties,
            &m_d2dTargetBitmap
            )
        );

    // So now we can set the Direct2D render target.
    m_d2dContext->SetTarget(m_d2dTargetBitmap.Get());

    // Set D2D text anti-alias mode to Grayscale to ensure proper rendering of text on intermediate surfaces.
    m_d2dContext->SetTextAntialiasMode(D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE);
}

// Method to deliver the final image to the display.
void Direct2DBaseForComposition::Present()
{
    // The first argument instructs DXGI to block until VSync, putting the application
    // to sleep until the next VSync. This ensures we don't waste any cycles rendering
    // frames that will never be displayed to the screen.
    HRESULT hr = m_swapChain->Present(1, 0);

    // If the device was removed either by a disconnect or a driver upgrade, we 
    // must completely reinitialize the renderer.
    if (hr == DXGI_ERROR_DEVICE_REMOVED || hr == DXGI_ERROR_DEVICE_RESET)
    {
        Initialize(m_window, m_swapChainPanel);
    }
    else
    {
        DX::ThrowIfFailed(hr);
    }
}

Adding the Rendering Code

The BasicDirect2DApplication I created earlier has four overrides to DirectXBase class that call back to the base class and then create resources for rendering or do the rendering. We will create another class derived from Direct2DBaseForComposition that will do the same, but call back to Direct2DBaseForComposition in the overrides instead of DirectXBase.

SampleD2DRenderer.h

#pragma once
#include "Direct2DBaseForComposition.h"

ref class SampleD2DRenderer
    : public Direct2DBaseForComposition
{
public:
    SampleD2DRenderer(void);
    ~SampleD2DRenderer(void);

    // DirectXBase Methods
    virtual void CreateDeviceIndependentResources() override;
    virtual void CreateDeviceResources() override;
    virtual void CreateWindowSizeDependentResources() override;
    virtual void Render() override;

private:
    Microsoft::WRL::ComPtr<ID2D1SolidColorBrush> m_solidBrush;
    Microsoft::WRL::ComPtr<IDWriteTextFormat> m_textFormat;
    Microsoft::WRL::ComPtr<IDWriteTextLayout> m_textLayout;
};

SampleD2DRenderer.cpp

#include "pch.h"
#include "SampleD2DRenderer.h"


SampleD2DRenderer::SampleD2DRenderer(void)
{
}


SampleD2DRenderer::~SampleD2DRenderer(void)
{
}

void SampleD2DRenderer::CreateDeviceIndependentResources()
{
    Direct2DBaseForComposition::CreateDeviceIndependentResources();

    // Create a DirectWrite text format object.
    DX::ThrowIfFailed(
        m_dwriteFactory->CreateTextFormat(
            L"Gabriola",
            NULL,
            DWRITE_FONT_WEIGHT_REGULAR,
            DWRITE_FONT_STYLE_NORMAL,
            DWRITE_FONT_STRETCH_NORMAL,
            64.0f,
            L"en-US", // Locale
            &m_textFormat
            )
        );

    // Center the text horizontally and vertically.
    m_textFormat->SetTextAlignment(DWRITE_TEXT_ALIGNMENT_CENTER);
    m_textFormat->SetParagraphAlignment(DWRITE_PARAGRAPH_ALIGNMENT_CENTER);
}

void SampleD2DRenderer::CreateDeviceResources()
{
    Direct2DBaseForComposition::CreateDeviceResources();

    DX::ThrowIfFailed(
        m_d2dContext->CreateSolidColorBrush(
            D2D1::ColorF(D2D1::ColorF::MidnightBlue),
            &m_solidBrush
            )
        );
}

void SampleD2DRenderer::CreateWindowSizeDependentResources()
{
    Direct2DBaseForComposition::CreateWindowSizeDependentResources();

    const wchar_t* text = L"Hello, Direct2D!";

    // Create a DirectWrite Text Layout object.
    DX::ThrowIfFailed(
        m_dwriteFactory->CreateTextLayout(
            text,                           // Text to be displayed
            wcslen(text),                   // Length of the text
            m_textFormat.Get(),             // DirectWrite Text Format object
            m_renderTargetSize.Width,       // Width of the Text Layout
            m_renderTargetSize.Height,      // Height of the Text Layout
            &m_textLayout
            )
        );

    // Create a text range corresponding to the entire string.
    DWRITE_TEXT_RANGE textRange = {0};
    textRange.length = wcslen(text);
    textRange.startPosition = 0;

    // Set the font size and weight on the text range.
    m_textLayout->SetFontSize(100.f, textRange);
    m_textLayout->SetFontWeight(DWRITE_FONT_WEIGHT_BOLD, textRange);
}

void SampleD2DRenderer::Render()
{
    m_d2dContext->BeginDraw();

    m_d2dContext->Clear(D2D1::ColorF(D2D1::ColorF::CornflowerBlue));
    m_d2dContext->SetTransform(D2D1::Matrix3x2F::Identity());

    m_d2dContext->DrawTextLayout(
        D2D1::Point2F(0.0f, 0.0f),
        m_textLayout.Get(),
        m_solidBrush.Get()
        );

    HRESULT hr = m_d2dContext->EndDraw();

    if (hr == D2DERR_RECREATE_TARGET)
    {
        m_d2dContext->SetTarget(nullptr);
        m_d2dTargetBitmap = nullptr;
        CreateWindowSizeDependentResources();
    }
    else
    {
        DX::ThrowIfFailed(hr);
    }
}

Interface For a Xaml App

I had problems exposing a SwapChainBackgroundPanel class implementation to a C#-based XAML app, so I leave that to be implemented in the app itself. WinRT components can’t expose derived ref classes across ABI boundaries, so a C++ library can’t have public derived classes for use in a C# application directly, but we can create a sort of proxy class that will simply relay the calls to our SampleD2DRenderer. The class needs to be a public ref sealed class defined in a namespace, like this:

SampleD2DRendererProxy.h

#pragma once
#include "SampleD2DRenderer.h"

namespace D2DRenderer
{
    public ref class SampleD2DRendererProxy sealed
    {
    public:
        SampleD2DRendererProxy(void);
        ~SampleD2DRendererProxy(void);
 
		void Initialize(
			_In_ Windows::UI::Core::CoreWindow^ window,
			_In_ Windows::UI::Xaml::Controls::SwapChainBackgroundPanel^ swapChainPanel);
		void Render();
		void Present();
		void UpdateForWindowSizeChange();

	private:
		SampleD2DRenderer^ m_renderer;
    };
}

SampleD2DRendererProxy.cpp

#include "pch.h"
#include "SampleD2DRendererProxy.h"

namespace D2DRenderer
{
    SampleD2DRendererProxy::SampleD2DRendererProxy(void)
    {
    }


    SampleD2DRendererProxy::~SampleD2DRendererProxy(void)
    {
    }

	void SampleD2DRendererProxy::Initialize(
		_In_ Windows::UI::Core::CoreWindow^ window,
		_In_ Windows::UI::Xaml::Controls::SwapChainBackgroundPanel^ swapChainPanel)
	{
        this->m_renderer = ref new SampleD2DRenderer();
		this->m_renderer->Initialize(window, swapChainPanel);
	}

	void SampleD2DRendererProxy::Render()
	{
		this->m_renderer->Render();
	}

	void SampleD2DRendererProxy::Present()
	{
		this->m_renderer->Present();
	}

	void SampleD2DRendererProxy::UpdateForWindowSizeChange()
	{
		this->m_renderer->UpdateForWindowSizeChange();
	}
}

Hooking It Up To The App

The last step is to just use all this in your XAML app. Start by creating any type of C# XAML App. You need to add a class that will be your SwapChainBackgroundPanel implementation like this:

using D2DRenderer;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace SampleD2DXamlAppCSharp
{
    public class MyD2DSwapChainPanel
        : SwapChainBackgroundPanel
    {
        bool _isInitialized;
        SampleD2DRendererProxy _renderer;

        public MyD2DSwapChainPanel()
        {
            CompositionTarget.Rendering += CompositionTarget_Rendering;
            this.SizeChanged += OnSizeChanged;
        }

        private void OnSizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (this.ActualWidth == 0 ||
                this.ActualHeight == 0)
            {
                return;
            }

            if (!_isInitialized)
            {
                _renderer = new SampleD2DRendererProxy();
                _renderer.Initialize(
                    Window.Current.CoreWindow,
                    this);

                _isInitialized = true;
            }
            else
            {
                _renderer.UpdateForWindowSizeChange();
            }
        }

        void CompositionTarget_Rendering(object sender, object e)
        {
            if (_isInitialized)
            {
                _renderer.Render();
                _renderer.Present();
            }
        }
    }
}

The panel needs to be at the root of the visual tree of your application, and it is a subclass of the Grid class, so you can modify the OnLaunched() initialization code in your App.xaml.cs to make the navigation Frame class hosted in the panel:

var rootFrame = new Frame();
rootFrame.Navigate(typeof(GroupedItemsPage), sampleData.ItemGroups);

var dxPanel = new MyD2DSwapChainPanel();
dxPanel.Children.Add(rootFrame);
Window.Current.Content = dxPanel;
Window.Current.Activate();

That’s about it, but if I run the app now…

I Can’t See Anything!

Well, by default the layout root grid of each page has a background set to {StaticResource ApplicationPageBackgroundBrush} which is opaque black – you need to change it to Transparent or remove it altogether and that will let you see what Direct2D renders underneath. It also helps to modify opacity of some foreground UI elements to be able to see more of our gorgeous Direc2D background.

Give Me The Codez!

You can grab the full code from here.

To Be Continued…

The next post will show how to do the same thing for Direct3D.

Updated WinRT XAML Toolkit on CodePlex – a set of controls, extensions and helper classes for Windows Runtime XAML applications

Features

• A copy of the AsyncUI library – a set of extension methods for UI classes that add support for async/await to wait for events such as:
  • Wait for a BitmapImage to load
  • Wait for a Button or one of a list of buttons to be clicked
  • Wait for a FrameworkElement to load, unload or become non-zero-sized
  • Wait for a MediaElement to change state – eg. to start or finish playback
  • Wait for a Selector (e.g. ListBox) to change selected item
  • Wait for a Storyboard to complete
• Controls
  • AnimationHelper – two attached properties – Storyboard and IsPlaying. Allows to easily control Storyboard playback from a view model (note limitation – a single storyboard per control).
  • AnimatingContainer – a container control that will animate its contents rotating or zooming in/out, eg. to make them feel more alive
  • CameraCaptureControl – under development – currently supports displaying camera preview – ultimately it will look and work much like a regular CameraCaptureUI interface, but embeddable inside of your application UI layout
  • CascadingTextBlock – a TextBlock replacement that animates the individual letters in a cascade – fading in while falling down into position, then optionally fading out while falling down from the standard position
  • ControlExtensions.Cursor – enables setting a mouse cursor to show when hovering over a control
  • CountdownControl – a movie-style control that animates a ring-slice shape while counting down seconds – e.g. to take a picture with a camera after a given number of seconds (supports async/await)
  • CustomAppBar – a custom implementation of the AppBar that automatically handles the three gestures to switch IsOpen (WinKey+Z, Right-Click, EdgeGesture), adds a CanOpen property, so you can prevent it from opening and opens/hides with a sliding animation when placed anywhere in the app, so you can layer content on top of it
  • CustomGridSplitter – a custom implementation of a GridSplitter
  • DelayedLoadControl – given a content/DataTemplate – loads the contents after a given amount of time – e.g. to allow for staged loading of contents on screen
  • InputDialog – a dialog control that takes text input
  • ListBoxExtensions./ListViewExtensions.BindableSelection – allows a two-way binding of the SelectedItems collection on the Selector/list controls
  • ListItemButton – a simple button control with Click event and Command property to be used inside of list controls (the standard button steals pointer capture from the List/Grid~Items so they can’t be selected
  • PieSlice – a pie slice path/shape given StartAngle, EndAngle and Radius
  • RingSlice – a pie slice path/shape given StartAngle, EndAngle, Radius and InnerRadius
  • RichTextBlockExtensions.PlainText – attached property that allows to easily single-way-bind plain text to a RichTextBlock (not really that useful other than for visualizing RichTextBlock styles in the sample app provided)
  • TextBlockExtensions/GetCharacterRect() – an extension method that returns a rectangle that holds a character at a given index in the TextBlock
• Conterters
  • BooleanToDataTemplateConverter – given two DataTemplates (TrueTemplate and FalseTemplate) – converts the input value to the given template. A different take on DataTemplateSelector.
• Extensions
  • WriteableBitmap – a set of extension methods for a WriteableBitmap
    • ColorExtensions – Conversions between pixels and pixel buffer types of byte, int and Color
    • IBufferExtensions – Adds a GetPixels() extension method to the PixelBuffer property of a WriteableBitmap that reads in the buffer to a byte array and exposes an indexer compatible to the one of the Pixels property in Silverlight’s WriteableBitmap
    • WriteableBitmapSaveExtensions – support for loading and saving the bitmap to/from files
    • WriteableBitmapBlitBlockExtensions – support for quick blitting of a full-width section of a bitmap to another bitmap of same width
    • WriteableBitmapCopyExtensions – support creating a copy of a WriteableBitmap
    • WriteableBitmapCropExtensions – support for creating a cropped version of a WriteableBitmap
    • WriteableBitmapFloodFillExtensions – support for flood-filling a region of a WriteableBitmap – either limited by an outline color or by replacing a given color – usually a color at the starting position or colors similar to it
  • Serialization
    • JsonSerialization – allows to serialize a properly DataContract-annotated object to a JSON string or file or deserialize an existing one.
    • XmlSerialization – allows to serialize a properly DataContract- or XmlSerializer-annotated object to a XML string or file or deserialize an existing one.
  • StringIOExtensions – allows to easily read or write a string from/to file in a single call
• VisualTree helpers
  • VisualTreeDebugger – provides a trace of the visual tree structure when a control loads, its layout updates or it gets tapped as well as allowing the application to break in the debugger if one of these events occurs
  • VisualTreeHelperExtensions – provides a set of extension methods that enumerate visual tree ascendants/descendants of a given control – making it easy to do these operations with LINQ as well as simple ways to list controls of a given type or find the first control of a given type searching up or down the visual tree

Work in Progress
The libraries are just a set of helper methods and controls that I found useful to fill the gaps in Windows Runtime XAML framework and continues to evolve.

Likely Additions

• TransitionFrame – something similar to the one from the Silverlight Toolkit – to get nicer transitions when switching between pages.
• Pivot control – analogous to a Pivot control on Windows Phone or a TabControl in WPF.

Similar Projects

• Tim Heuer’s and Morten Nielsen’s Callisto – contains a host of controls (DateTimePicker, Flyout, LiveTile, Menu, SettingsFlyout), converters, Tilt Effect, OAuth helper, SQLite connection helper, etc.

A while back I blogged about Debugging visual tree/layout issues in Silverlight and on Windows Phone. My little helper library – the VisualTreeDebugger has been updated for WinRT and is available as part of the WinRT XAML Toolkit project that I have been working on recently. I also mentioned that you could use Silverlight Spy to debug your Windows Phone app, but it was not free. Well, now it seems like Koen Zwikstra has come up with a new version that, for a limited time, is free and it is called XAML Spy. Grab it while you can!

]]> http://blog.xyzzer.me/2012/04/10/microsoft-dev-camps-free-events/feed/ 0 xyzzer DevCamps http://blog.xyzzer.me/2012/04/10/winrt-xaml-toolkit/ http://blog.xyzzer.me/2012/04/10/winrt-xaml-toolkit/#comments Tue, 10 Apr 2012 15:37:21 +0000 xyzzer http://blog.xyzzer.me/?p=568 ]]> There it is. No time to write about it or make it pretty, but you forced me to publish it, CodePlex, so there it is….

http://bit.ly/WinRTXamlToolkit

This is the second part of my impressions of Windows 8. You can read the previous part here.

The Impressions

1. Windows 8 and the Cloud
2. Using Windows 8 on a Slate
3. Using Windows 8 on a Laptop
4. Using Windows 8 on a Desktop
5. Desktop IE vs. Metro IE
6. Frustrations of Being an Early Adopter

Continue reading on http://labs.vectorform.com…

This is the second part of my impressions of Windows 8. You can read the previous part here.

The Impressions

1. Windows 8 and the Cloud
2. Using Windows 8 on a Slate
3. Using Windows 8 on a Laptop
4. Using Windows 8 on a Desktop
5. Desktop IE vs. Metro IE
6. Frustrations of Being an Early Adopter

Windows 8 and the Cloud

© Filip Skakun 2012

Metro style apps are limited in their ability to access system resources such as files in arbitrary locations on the disk. This though has been mostly true for a while now, since Windows Vista introduced user access control. This is a good thing and makes managing your files easier, but it is also a stepping stone to the future in which we will increasingly rely on the cloud to store our files. Local disks will be used as application storage and local cache of the data we currently use or might need when offline, but what we already see in online backup and file sharing solutions like Carbonite, iCloud, the rumored Google Drive, Dropbox and SkyDrive — is bound to slowly become the primary copy of our data — secured from accidents, hardware failures and hackers better than our own devices while allowing to conveniently access our data from any device.

Windows 8 adds built-in user and developer support for SkyDrive integration. You can sign into Windows with your (Windows) Live account, which then automatically syncs your profile settings across all Windows 8 devices. Apps can easily use roaming settings that are synchronized between all the devices. Internet Explorer shows the same bookmarks for — again — all your devices. Your data travels with you everywhere taking away the pain of having to micromanage your documents, settings and any other data, and copying it back and forth. I can’t wait to dump all my backup drives, thumb drives and stop worrying about backing up and creating many copies of the same data on my phone, slate, laptop, desktop and XBOX, at home, in the office and on the road.

Using Windows 8 on a Slate

© Filip Skakun 2012

The tablet I use is a custom version of the Samsung Series 7 Slate that was given out to developers by Microsoft at the Build conference. This is my work machine and I mostly use it with an external 24-inch monitor and a basic full size keyboard. It is slightly bigger than the iPad — at 11.6-inch vs. 9.7-inch and also a bit heavier and featuring a built-in fan. Not exactly an iPad competitor since it is about twice the price, but with my setup I can use it for developing apps on a big screen with all the peripherals I want to connect to it, and when needed I can just pick it up from the dock and use it the same way I would use an iPad. With smaller devices getting more powerful while the computing tasks have not become much more demanding since the popularization of video or HD video especially — I can easily imagine many people in the future might choose to use a Windows tablet that they can carry with them to do some lightweight computing or consumption and dock it anywhere when they need to do something more demanding like programming. This is not something that you can do today with an iPad and this popular photo shows best how an iPad relates to a PC — being just an accessory. Windows tablets might get a lot better appeal as something that is not only a cool expensive gadget, but also a tool to be used for more serious tasks such as making money.

I have not had a chance to use the tablet much in slate scenarios that iPad rules today — mostly because this is a work machine and it sees majority of its use in developing and prototyping new Windows 8 apps but also because I am not a heavy iPad user. I really prefer to have a mouse and keyboard, ideally a full-sized one to use a computer comfortably. I use an iPad occasionally to play a game, check mail, or look at some other app when I am lying in bed or sitting on a couch and the iPad happens to be within reach. My iPad is mostly used by my kids and I can see great educational potential of such devices having seen my daughter who is beginning to read before turning four year old. I do not think the iPad is the main reason she is doing well, but I am sure it helps and similar devices will continue to help kids learn more quickly than was common when I was a kid. Windows 8 has great potential here. I think the user experience on the Windows tablet is better. The current selection of apps available is limited compared to iPad which had a head start, but this will change very quickly. There are thousands of apps available on iOS, but not so many of them are great and it is certain that most of the great apps will also come out for Windows 8 soon, possibly with improvements over their iOS or Android counterparts while new great apps will often start appearing on Windows first, since this is reportedly also an easier platform to develop for.

One area where Apple has ruled without much successful competition is hardware design. The iPad at prices starting at $399 and being most fashionable gadget today seems hard to beat having resisted the offensive of various crops of Android slates and only losing in lack of a cheap version under $200 where Android-based devices rule, but just as the iPhone seeing strong competition from Android-based phones, the iPad will not last forever as the only contender in the slate game. Just as we are beginning to see emergence of great Windows Phone devices such as the HTC Titan II or the ($99!) Nokia Lumia 900, I think we might see competitive Windows 8 slate devices from Samsung or Nokia that might compete in price as well as design with the iPad while potentially also being full-featured desktop PC replacements, which cannot be said of the iPad.

Using Windows 8 on a Laptop

© Filip Skakun 2012

My laptop is a now 1.5 year old Lenovo T410s with multi-touch screen, a 160GB SSD drive and 8GB RAM. Perhaps not a typical laptop due to the touch support, although possibly a much more common setup in the future when the touch-friendly Windows 8 gets released (I am keeping an eye out for the Lenovo Yoga, an ultrabook with a touchscreen that also converts to a tablet!). Installation of Windows 8 Consumer Preview on the laptop took around 10-15 minutes, so does upgrade from an older version which I am happy to see also kept all my installed applications and settings, which is great, since it usually takes me hours if not days to install all the software I use on a fresh install of Windows and I believe older versions of Windows were not able to port these over during upgrade.

Except for the previously mentioned 8s cold boot time, the system also resumes from sleep in under 2s, seems to manage battery better and run more quietly. There are no driver problems except for the missing touch input driver I talk about later that should not be common since this is an uncommon type of device. Also, I expect Windows 8 to mostly be used on new devices while I also recommend trying to install it on older ones, since it brings so many improvements over Windows 7. Have I forgotten to mention Windows 8 also uses less memory? This means leaving more of it to applications, and practically lower hardware requirements than Windows 8 or Vista.

I do not use the touch screen much right now since without the proper driver it does not work too well, although I can vouch for the convenience of having a touch screen on a laptop. Any time I can’t find a mouse I can just touch the screen. Scrolling web pages with fingers is much more natural than scrolling with a mouse, so is browsing and consuming a lot of other types of documents and content. Drawing is easier with a finger than a mouse, so is navigating maps and… well, developing multi-touch software. It might also help reduce the risk of repetitive stress injuries if you often switch between different input devices depending on which one feels most comfortable at a particular time. With Windows 8 using the OS with touch is also easier than with any other OS out there.

Using Windows 8 on a Desktop

© Filip Skakun 2012

For some reason installing Windows 8 on my desktop was quite a bit harder than on my laptop or the tablet. Possibly a driver issue caused the screen to go black during the installation multiple times and while I believe it was only a problem of display — I had to restart installing the OS multiple times before I managed to reach the point where the installation would progress without my input, so even when the screen went black, restarting half an hour later showed it booting to Windows 8.

I have no touch screen display on my desktop, although I cannot wait to start seeing affordable 24″ or bigger true multi-touch screens which I hope will start showing up soon when Windows 8 comes out. Using touch on a desktop screen is not as natural as on a slate and not even as convenient as on a laptop, but I keep getting into situations when I touch the screen and I am surprised it does not work. Touch input really becomes a natural (even if only alternative) way to interact with a computer once you have used it for a while. It is not the best way to input text or event to play most types of games I like, but it is as natural as mouse and keyboard in some scenarios.

Overall having installed all the applications I used to use in Windows 7 to Windows 8 — my desktop is now mostly used from Windows 8, although I have it installed in dual boot mode just in case. The machine was put together with my very own hands and as far as I remember is an Intel Core i5-powered, 4GB RAM, 2+2+1+1TB HDD with 3-4 year old AMD/ATI Radeon graphics and since installation functions mostly without issues. It does sometimes refuse to shut down when I tell it too, but on the other hand, it has leverage over Windows 7 in that it turns of unused hard drives reducing the jet-like noise that the machine used to continuously generate before turning it into a quiet PC.

Desktop IE vs. Metro IE

© Filip Skakun 2012

I see a good reason for having two different browsing experiences. Web applications look beautiful in a browser without chrome. Using a computer without a keyboard and mouse is very limiting in the number of things you can do at a time, so looking at one website at a time makes most sense and seeing all the tabs that are open at the same time is not as useful. In desktop view I expect more power, a HUD of sorts that will allow me to orient myself better in the dozens of tabs that I tend to keep open in a browser at the same time, switching between different apps and so on. The Metro experience is more focused on one thing. Not allowing for browser plugins in the metro experience makes sense if it saves battery and helps push the web technologies forward, although might be annoying sometimes if you know there is a version of IE that can run on desktop that does run both Flash and Silverlight. I really do like the sharing of bookmarks between all my machines. Perhaps the desktop version could actually look and work more like the Metro version does and I believe it was left alone mostly so that the team could focus on the Metro version. I think maybe by the time Windows 8 is released or soon after — we might see the desktop version of IE modified to show no chrome by default until the user right clicks needing to type in a new address or switch a tab with a mouse. The web truly looks better with no chrome.

In fact the web looks so good without chrome that future web applications will likely become more powerful not unlike today’s desktop applications and will replace them in many scenarios while users will not see a difference. Currently you can develop applications for Windows 8 using HTML and JavaScript which are the same tools you use for developing web pages and web apps. Microsoft augments the framework allowing developers to create good looking and nicely animated Metro style apps with full access to the OS fairly easily but it also means that these applications will not run on any other platform and will not be easy to port either — it merely uses some of the familiar skills that today’s web developers can use to develop Windows 8 applications. As the tools continue to improve, doing similar applications should become as feasible for other platforms too. This in turn will allow for creation of a single application for all platforms having to only take into account the screen size, resolution, input methods and system features when creating different versions of the experience, but that I believe is still in the future farther off.

Frustrations of Being an Early Adopter

© Filip Skakun 2012

Not everything is rosy if you are trying out a new operating system early. The list of things I had to suffer contains the following:

1. The old N-Trig touch input drivers for my laptop do not work on the current build of Windows 8. There was a workaround to use them in Developer Preview, but it does not work anymore. Windows 8 class drivers for touch seem to work at first — I can see touch input visualizations for my fingers, but they are very shaky and I can’t tap on buttons, etc. Using touch to scroll or unlock the screen still works though. The new drivers only showed up on N-Trig’s website moments ago today.
2. TurboTax complained for a moment that my operating system was not supported even when I used it in Chrome. It seems to have accepted it now though.
3. The VPN client I use does not work with Windows 8 yet and it seems like there might be a workaround using a generic VPN client application, but I have not been able to get it to work yet, so when I need to work from home — I am a bit disconnected since I can’t access some internal company resources, although I am sure if I really had to, I could get it to work even now with the workaround.
4. The WinKey+S shortcut that used to work with OneNote to grab a screenshot of a selected piece of the screen did not work at first. I used to use it quite a lot, so I was unhappy when I saw it not working. Fortunately it came back – possibly after a reboot which is an uncommon event in Windows 8…

These problems and a few others have been minor annoyances, but I am sure they will be resolved by the time Windows 8 is released and overall even now are outweighed by the improvements you get from the new OS.

I have been using the Windows 8 Preview For six months now – the Developer Preview since its public release in September and more recently, the Consumer Preview that was made available in February.

I have used Windows 8 on a tablet, a touch screen laptop and an old desktop and the experience has been good on all of these platforms. I have used it for anything from developing Windows 8 Metro style apps, through typical Office applications scenarios, browsing the internet, playing games, listening to Spotify, instant messaging etc. What I have not used it much for actually is to run Metro style apps, except for the ones I was developing myself, since there are not so many available yet (around 100) and the ones available do not fit into my daily use of a tablet or computer.

I have been using most versions of Windows available in the past 20 years or so. I have also been using an iPad for a few months now. I think Windows 8 is going to be huge…

The Impressions

1. The Desktop
2. The (Missing) Start Button
3. The Start Screen
4. Metro Style Apps
5. Windows Marketplace
6. Next Up

Continue reading on http://labs.vectorform.com…

I have been using the Windows 8 Preview For six months now – the Developer Preview since its public release in September and more recently, the Consumer Preview that was made available in February.

I have used Windows 8 on a tablet, a touch screen laptop and an old desktop and the experience has been good on all of these platforms. I have used it for anything from developing Windows 8 Metro style apps, through typical Office applications scenarios, browsing the internet, playing games, listening to Spotify, instant messaging etc. What I have not used it much for actually is to run Metro style apps, except for the ones I was developing myself, since there are not so many available yet (around 100) and the ones available do not fit into my daily use of a tablet or computer.

I have been using most versions of Windows available in the past 20 years or so. I have also been using an iPad for a few months now. I think Windows 8 is going to be huge…

The Impressions

1. The Desktop
2. The (Missing) Start Button
3. The Start Screen
4. Metro Style Apps
5. Windows Marketplace
6. Next Up

The Desktop

© Screenshot by Filip Skakun 2012

I am a developer and I spend most of my time using keyboard Visual Studio, Chrome & Internet Explorer, Paint, Total Commander, Notepad, Windows Explorer, etc. Desktop is my world. It has not changed…

Well, it has changed in some ways — now Windows boots up in eight seconds instead of 8 minutes, the Start button is a lot smaller and completely transparent and all the corners of the desktop are now buttons of sort even though they are invisible. The Windows Explorer uses a Ribbon interface now, if you use two or more monitors — you now get the taskbar on all of them without the need for third party add-ons, the file copy menu looks nicer now and so does the task manager. There are some more advanced features I have not used yet, and I am sure thousands of imperceptible minor changes but overall, nothing has changed in the way I use Windows since I switched from Windows 7 to Windows 8. I only get a feeling like here and there, this thing or the other works better — IE 10 is a bit better than IE 9, Windows installs in like 10 minutes. Opening an ISO file in Windows Explorer displays its contents as if it was a folder while also mounting it as a virtual drive — possibly opening us up to the future with no CDs or DVDs required to install any (even legacy) desktop applications or games with no need for third-party tools. There is a built-in viewer for PDF files, so you don’t need to install the 50MB beast from Adobe that requires a new update every day. There are things like these scattered all over the place.

One very minor issue that sometimes hits me in the desktop is that Chrome displays tabs starting from the top left corner of the screen, so sometimes instead of switching to the first tab, I switch to another app. Maybe one more reason to switch back to IE?

The (Missing) Start Button

© Screenshot by Filip Skakun 2012

There is no visible start button now. There is a popular video that is making rounds on the internet that is trying to prove that this is a big usability problem, but is it a problem really? When I first saw the desktop without the button I felt like there was a disconcerting void where something familiar used to exist for almost 20 years now. Personally, I see no benefit in getting rid of the button — the space savings are really minor compared to potential problems with usability, but once you start using it — you get used to it missing really quickly. You can still click the bottom left corner to bring up the Start Menu — the difference being you now have to move your mouse cursor to the very corner of the screen. In terms of everyday usability, it is just as easy if not marginally easier than what you might have been doing before — if you were like me, trying to point at somewhere near the center of the old start button before clicking. The problem might be if you are one of the few people who move their taskbar somewhere else than the bottom of the screen, which in previous versions of Windows also moved the start button. (I would argue though that in these cases you moved the taskbar to rearrange your space and having the start button move with it was not as crucial for you.)

Coming back to casual Windows users confused about the lack of the button — I am sure Microsoft will at least introduce some cues to indicate where to move the mouse when you first switch to desktop, the same way they have done before to educate users on the Start button in Windows or the glowing Microsoft Office Button that was introduced with the Ribbon in Office 2007 to open the Backstage. I am sure people will first be surprised when they do not see the button there, but many will be happy to get rid of an unnecessary ornament on the screen, especially if they are like me and already use the start button on their keyboards instead of fiddling with the mouse.

I would speculate that Microsoft might give in and bring back the start button to address the critical comments. Perhaps the only reason it is gone now is as an experiment and due to lack of time to switch to a design with a new logo. It is also possible that they will get rid of Aero Glass and make the desktop chrome more flat and Metro when they finally release Windows 8. Also — since they make corners and borders of the screen such important UI elements — they could also make the taskbar auto-hide by default to reduce unnecessary chrome.

The Start Screen

© Filip Skakun 2012

There is no Start Menu as we know it in Windows 8. It was replaced with the Start Screen, which is the most visible change in Windows 8. It takes design ideas from Windows Phone, introducing large active tiles instead of a grid of dead small icons with tiny labels seen on other phones or desktop UIs. Instead of a small menu in the corner of the screen that you had to squint at, you have the whole screen to fill with easily readable tiles that serve the same purpose — to launch applications, but also display additional information that allows you to get information you might be looking for without even starting an app. I think this is a good idea. Gone is a multi-level-nested hierarchy of app folders that made things discoverable if you went on exploring the menu, but not really useful for starting applications. You can still access all installed applications in the Start Screen by searching or clicking on the “All apps” menu.

Since Windows 7 I would usually only start applications I pinned to the taskbar or less frequently used ones that I had pinned inside of the Start Menu. This still works, but now instead of having them pinned in the Start Menu, I have them pinned on the Start Screen with some more options to rearrange them. If I had to launch an application only once — I used to just type its name in the Start Menu and a link would show up. It still works on the Start Screen, only it is easier to read. There is no important scenario where having a Start Menu showing up in a corner of the screen would work better than having the big Start Screen that grabs your entire attention on the task of finding an application to run.

Will the old Start Menu be available as an option? I think it is possible but not likely. It seems like the Start Screen has already made it to Windows Server 8 too now, so although its design was possibly driven by the consumer version of Windows, it works just as well on the server. The often repeated comment that this could be an option for enterprise deployments to save on the costs of user education does have some sense, but I do not think it is correct. Changing an OS is always a change and users will always need to learn something new. If you let enterprises upgrade to Windows 8 while keeping the old Start Menu — how about users who get into Windows 8 at home, use the Start Screen and then go to work and see the Start Menu? That would also require education I am sure. Also — live tiles would not work inside of the start menu, so how about disabling Metro style apps altogether? Well, but about the case when some applications start becoming available only in Metro Style? Also — I am sure it is Microsoft’s goal to have as many people using Metro style apps as possible, since it brings Microsoft money, so they would not pass on that. Then there is also the problem of maintaining two parallel versions of an interface serving the same purpose. It has been historically possible to switch some things in Windows to how they were — e.g. in Windows 7 you can disable combining the tab buttons in the taskbar and switch to small buttons & labels — the same way it had worked since Windows 95. I do not really recommend doing that though since the new Windows 7 version is better. I am sure few people know about it being possible and I believe it has happened under different management. Now with Windows being ruled by Steven Sinofsky and his team who forced the world to use Office with the Ribbon and did away with the old toolbars — I don’t think it is likely to leave two competing versions of quite complicated UI — that would be just too difficult to maintain.

There is one valid criticism I have heard about the Start Screen — if you press spacebar once — you select a tile, if you press it again — you unpin it. This seems like a dangerously simple way to accidentally get rid of your pinned tiles and for millions of support calls to Microsoft if this does not change before release.

Metro Style Apps

© Screenshot by Filip Skakun 2012

With Windows 8 Microsoft is adding a completely new technology for developing software. The new framework is called Windows Runtime and while the old WinAPI and related technologies layered on top of it are still available for developing desktop applications, Windows Runtime (or WinRT in short) is required for developing the new Metro style apps. The new framework and applications are sandboxed which means they have limited access to system resources and other applications installed on the computer which is a requirement to allow for a trustworthy app store where developers can easily publish apps and users can easily buy them at very reasonable prices.

The new technology limits applications developed for Windows from causing harm, but it does not really limit them from using the full processing power of the machine and Microsoft has learned their lesson from Windows Phone where — especially initially — developers had very limited access to the features of the devices making a lot of the more interesting applications that were available for iOS or Android devices impossible to implement on Windows Phone. Developers can create these new applications using lowest level, close-to-the-metal native technologies like DirectX while also having access to very popular and productive languages like C#, Visual Basic and JavaScript. The more liberal access to the features of the device compared to Windows Phone allows for a wide range of new classes of applications to be developed. Based on the rumors of the next Windows Phone sharing the core components with Windows 8, I am also expecting the next crop of Windows Phone applications to have access to many of these features and languages giving Windows Phone a bigger chance at growth and competitiveness against iOS and Android ecosystems.

Metro style apps on Windows 8 can be developed using C# and XAML, the same technologies used in most Windows Phone applications — the difference being that they use WinRT instead of Silverlight. Although from a developer’s view there is very little difference between these two platforms and WinRT being a lower level platform than Silverlight has potential for better performance as was shown in an article by Jose Fajardo (who is one of the more known experts writing about WinRT).

Metro style apps have features that are already familiar to Windows Phone users — such as live tiles and Metro design language. These things are evolving though, and becoming more powerful in Windows 8. Live tiles can be made even richer than in Windows Phone 7 and controls in the Metro user interface are evolving to be more usable in both mouse & keyboard and touch scenarios. Implementation of fluid transitions is now easier than ever before with built-in animation and transition libraries making it a lot easier to create a Metro style app that shines.

The XAML Disciples – a group of expert XAML developers that is made up of the early adopters and experts of WPF and Silverlight — seem to have mostly negative thoughts or no interest ([1], [2]) in the new technology. It seems like this comes mostly from lack of trust in the future of Windows or lack of applicability for the typical types of enterprise projects they are used to working on, or weariness after having experienced small changes between a series of similar frameworks coupled with limited interest expressed from Microsoft’s side in further development of WPF and Silverlight. Microsoft instead seems to focus on developing a new development framework for every new scenario that comes up, i.e. WPF – being the first framework for developing rich applications for Windows, Silverlight being its version with a promise of being cross platform compatible or a Flash killer, Silverlight for Windows Phone being its yet another flavor and WinRT’s XAML framework being yet another take on it that is being rewritten for Windows 8.

While I understand these pains, I disagree with the criticism. Each new platform is a bit different and requires a different approach, i.e. sandboxed environment required for running apps on the web or hosting in app stores is not really available in WPF. WPF is also too heavy to run on the web. The interoperability of WinRT and improvements in implementation in Silverlight and then WinRT are also important reasons for rewriting the framework. Also you have to appreciate how little you need to learn to switch to a new XAML-based technology after you have already mastered one. WPF and Silverlight are also in most ways feature complete and Microsoft has likely reached diminished returns on investments in these technologies, while a new one will benefit its customers more. The fact that WinRT might not be applicable for many enterprise applications might hold true for a while, but as with Windows Phone — the main target of Windows 8 is not enterprise customers. Microsoft is trying to fight a battle for minds of consumers already learning to live with Apple’s and Google’s competing technologies — the fact that could cost Microsoft its dominance in OS in the future if not addressed with something exciting and superior. I believe Windows 8 is such thing. Enterprises are now used to switching the OS every two years and have mostly last done so with Windows 7, so it won’t harm Microsoft much if they wait till Windows 9 before getting ready and realizing WinRT is already a very valid platform for many scenarios and will surely improve to become a great one for developing business software too.

The Store

© Screenshot by Filip Skakun 2012

A billion Windows users, even if only slowly upgrading to Windows 8, make Windows Store a very attractive platform for growing an app development business. Most of the excitement and business opportunities for developers in recent years have been in web development with a switch to mobile development in recent years. Microsoft is far behind in this game, but I would not ignore the sleeping dragon. Windows will continue to be the most popular platform for desktops and laptops and Windows Store will fill a void finally enabling Windows developers to easily access the wallets of its gigantic user base. It will compete in the mobile space with established platforms from Apple and Google, but PC users have not had access to such a store until Windows 8. This is bound to breed a lot of innovation and rejuvenate the Windows ecosystem. Big development houses and brands like Adobe or Electronic Arts have achieved a level of familiarity and trustworthiness to be able to sell their software through their own online storefronts or could sell games through Steam, but Windows Store will allow millions of individual developers and small companies to share their ideas with hundreds of millions of users willing to pay for them or sell their attention to ad networks. I can easily see all future Windows games becoming available through the Windows Store. Is it the end of software on DVDs and GameStop? Not in the immediate future, since desktop applications will not be sold in the store except for perhaps one coming from the big software houses and it will take some years for most users to upgrade to Windows 8 and later versions of Windows, but especially for games — it is bound to happen soon. PC games are already increasingly being sold online through existing channels and another major one will surely accelerate this process.

Next Up

This was the first part of my impressions of Windows 8. The second part comes tomorrow and I will talk about the following:

1. Windows 8 and the Cloud
2. Using Windows 8 on a Slate
3. Using Windows 8 on a Laptop
4. Using Windows 8 on a Desktop
5. Desktop IE vs. Metro IE
6. Frustrations of Being an Early Adopter

Application Manifests and a database of installed applications

%ProgramData%\Microsoft\Windows\AppRepository
e.g.
c:\ProgramData\Microsoft\Windows\AppRepository\89006A2E.SketchBookExpress_1.0.0.2013_x64__tf1gferkr813w.xml

Application code and content/resource files

%ProgramFiles%\WindowsApps
e.g.
c:\Program Files\WindowsApps\89006A2E.SketchBookExpress_1.0.0.2013_x64__tf1gferkr813w\SketchBook.exe
c:\Program Files\WindowsApps\89006A2E.SketchBookExpress_1.0.0.2013_x64__tf1gferkr813w\AboutPage.xaml

Application settings and data storage (settings, saved documents, web cache, temporary data storage)

%LOCALAPPDATA%\Packages
e.g.
c:\Users\Filip\AppData\Local\Packages\89006A2E.SketchBookExpress_tf1gferkr813w\Settings\settings.dat
c:\Users\Filip\AppData\Local\Packages\89006A2E.SketchBookExpress_tf1gferkr813w\LocalState\SketchBook.tiff
c:\Users\Filip\AppData\Local\Packages\WinStore_cw5n1h2txyewy\AC\INetCookies\IY2KIDUJ.txt
c:\Users\Filip\AppData\Local\Packages\WinStore_cw5n1h2txyewy\AC\INetCacheY7EQF5Z\Frame[1].htm

I found multiple (21) free full day training sessions for Windows 8 developers – here.

About ten years ago I started my first full time programming job. I was working on some business software written in C/C++. I say C/C++ instead of just C++ because it was written mostly in C with classes – with perhaps a few cases of inheritance or actually even only few classes – it used structs in many places to group some methods together the same way you would use classes today. The code was fairly complicated and it was just aging. The standard C libraries it used were not very rich, so if you wanted to code up something fairly straightforward – you had to dig through a lot of documentation looking for something basic only to end up implementing that list class yourself. We were using a Watcom compiler at that time and trying out Borland C++ Builder for some side projects showed it was a great improvement in that VCL provided a lot of great wrapper classes for Windows APIs making things easier. Two years later we were looking into rewriting our application or at least starting a new version and considering which tools to use – basically trying to choose between Borland C++ and C#. I was on the C++ side – it was a fairly known language, more predictable and providing intuitively higher performance, while C# was at version 1.1 and had lots of great libraries, but a bit foreign and why would anyone want to go away from the fun of using pointers, managing object lifetimes and relying on some garbage (collector)? Well, I lost – Microsoft seemed to be focusing on supporting C# and in the end it turned out to be a lot more productive than C++.

Fast forward 8 years and Microsoft says – in Windows 8 you can code using C#/VB, JavaScript or C++. Well, the word on the street is that it is so that programmers fluent in any of these languages will be able to code applications for Windows, so I guess I will stick with C#. Maybe I will look at HTML5, JS and CSS, since these seem to be getting most traction, I thought. Now, having found some limitations in the .NET/WinRT stack I have a feeling like the C++/DirectX route is the most attractive. The .NET stack might make you more productive than the JS or C++ – especially if you have been coding in C# for the last eight years and perhaps HTML5 has better graphics performance or some other interesting features, but it feels like learning C++/DirectX on top of C#/WinRT is what would allow me to cover most scenarios for writing Metro Style Apps™, so especially with some experience working on the test team for the DirectX wrappers in the Windows API Code Pack – I am hoping to have an easier start in diversifying my skills.

C++ (Re)Learning Resources

Right now I have two resources I am using to relearn C++:

• The Pluralsight C++ trainings by Kate Gregory – it is 10 hours of videos which is a bit painful, especially that the 7 hours of the beginner part is mosly familiar stuff targeted at the very beginners indeed, so that makes me a bit sleepy after a weekend day with the kids, but it is very high quality and I like to get solid basics before I start working with a technology, so I will make it through somehow!
• The C# to C++–A Somewhat Short Guide by Michael McLaughlin – which I plan on going through when I am done with the Pluralsight videos as a review of sort, the subject seems to be just what I need after all!

DirectX Resources

Meanwhile I am slowly starting to look at DirectX, so I installed the last DirectX SDK from 2010. I think it is now part of the Windows SDK, but my Windows SDK install failed for some reason and it seems like the latest one for Windows 7 is actually older than the standalone one. It should also work OK with the Windows API Code Pack that I will review as a reference, since it has a lot of my C# code for the Direct2D samples which I will need to rewrite for Windows 8 in C++ to code a few things I have been thinking about. MSDN has some interesting samples worth looking at too.
I also installed NShader for HLSL syntax highlighting in Visual Studio, the Shazzam tool for HLSL coding. That’s it for learning on my Windows 7 box. On the Windows 8 boxes I will be limited to VS11 anyway until tool support happens and there – the Windows SDK should already be integrated with the DirectX one.

_codingStyle

After 10 years in the industry I am probably at my peak of caring about the coding style – having my own preferred style in C# – based on ReSharper and StyleCop, but with one parameter/condition per line if all don’t fit in a line. Since C++ does not seem to have a leading style, at least according to WPF Disciples’ resident DirectX expert – Jeremiah Morrill, I am going to try to adopt my C# style to the C++ code and see what comes out. While C# has a few controversial best style options in a couple areas – it is mostly Pascal/camelCased. C++ on the other hand seems to be all over the place, so at least having my own code based in the familiar style might help me orient myself in the world of double colons and pointer arrows…

Having mentioned ReSharper – I really feel like the C++ editor could do more in terms of IntelliSense even if it is not a managed language with all the metadata available. It seems like there are tools that enhance the VS C++ editing experience too. ReSharper is not one of them, but I picked up a trial of Active Assist X and it seems to improve things quite a bit.

C# -> C++/CLI -> Native C++

As the first piece of coding I thought I’d do some comparison between C# and C++ as well as between the managed C++/CLI and the native C++. How long might it take to go through a long loop of integer increments in each of these? Well, it seems like it is rather quick these days with 2 billion iterations taking only 6s in C# and 5s in C++ or C++/CLI to execute the below loop!

for (int i = 0; i < 2000000000; i++);

While this is not a representative piece of code at all – it just shows how closer to the metal C++ is (probably having each iteration take 5 cycles as opposed to 6 cycles for C#). See the measurement code and output samples.

C#

for (;;)
{
    var start = DateTime.Now;
    Console.WriteLine("Start");
    for (int i = 0; i < 2000000000; i++);
    Console.WriteLine("End");
    var duration = DateTime.Now - start;
    Console.WriteLine("{0:F3}s", duration.TotalSeconds);
}

Output

C++/CLI

for (;;)
{
    {
        DateTime& start = DateTime::Now;
        Console::WriteLine("Start");
        for (int i = 0; i < 2000000000; i++);
        Console::WriteLine("End");
        TimeSpan& duration = DateTime::Now - start;
        Console::WriteLine("{0:F3}s", duration.TotalSeconds);
    }

    {
        clock_t start = clock(), diff;
        std::cout << "Start" << std::endl;
        for (int i = 0; i < 2000000000; i++);
        std::cout << "End" << std::endl;
        diff = clock() - start;
        float sec = (float)diff / CLOCKS_PER_SEC;
        std::cout << sec << "s" << std::endl;
    }
}

I have used C++/CLI to a very limited degree before. Looking at the sample above you can see how easy it is to port some basic C# code to C++/CLI which allows you to keep using the so convenient .NET Base Class Library (BCL) while also being able to use the native libraries.

Output

Native C++

for (;;)
{
    clock_t start = clock(), diff;
    std::cout << "Start" << std::endl;
    for (int i = 0; i < 2000000000; i++);
    std::cout << "End" << std::endl;
    diff = clock() - start;
    float sec = (float)diff / CLOCKS_PER_SEC;
    std::cout << sec << "s" << std::endl;
}

Output

Summary

C# is the most productive and best looking language I have ever used and sure – it is a general purpose language in that you can use it to do all sorts of things, but you can’t do everything in C#, at least not if you want to do some types of Metro Style Applications for Windows 8. Native C++ and DirectX is supported for use in Metro Style Applications, but C++/CLI is not and I don’t believe you can use managed wrappers with DirectX to make them, so if you want to make games for Windows 8 – forget Managed DirectX, XNA, SlimDX, Code Pack and SharpDX. It’s back to C++ baby!

(EDIT) Notes on C++/CX

MSDN has a Quick Reference page, that shows how C++/CX types map to Standard C++ types.

Other interesting articles:

• Interoperating with Other Languages (C++/CX)
• CLR integration (C++/CX)
• Built-in types (C++/CX)
• Collections (C++/CX)