This is going to be an extremely basic tutorial as I have just started playing with it myself. I found it really hard to start at first. There are some samples available but SharpDX is barely documented (the wrapper and the usage part, not the DirectX API).

By saying extremely basic, I mean it. In this tutorial I’m going to show how to create a Windows 8 Metro application which will fill the background with a solid colour. That’s it. Like I said, very basic.

I will be using Visual Studio 2012 and latest SharpDX available here: http://sharpdx.org/download/.

Download the full package (although if you’re here you probably have it already) and extract it to a local hard drive.

So let’s get started.

1. Create a new Blank App (I called mine “SharpDXSample”)

2. Add CommonDX project to your solution and reference it in your project. You can find CommonDX project in <SharpDX Package>\Samples\Win8\CommonDX.

3. Reference SharpDX and SharpDX.Direct2D1 libraries from <SharpDX Package>\Bin\Win8Metro folder.

4. Now that we have our project set up, let’s create a sample renderer. Add a new class to your project and call it “SampleRenderer”.

SampleRenderer.cs

using CommonDX;
using SharpDX;
using SharpDX.Direct2D1;

namespace SharpDXSample
{
    public class SampleRenderer : Component
    {
        private DeviceManager _deviceManager;

        public virtual void Initialize(DeviceManager deviceManager)
        {
            _deviceManager = deviceManager;
        }

        public virtual void Render(TargetBase target)
        {
            var context2D = target.DeviceManager.ContextDirect2D;

            context2D.BeginDraw();

            context2D.Clear(Colors.CornflowerBlue);

            context2D.EndDraw();
        }
    }
}

5. Open MainPage.xaml and replace contents with:

<SwapChainBackgroundPanel
     x:Class="SharpDXSample.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     xmlns:local="using:SharpDXSample"
     x:Name="root">

</SwapChainBackgroundPanel>

6. Modify the MainPage class in MainPage.xaml.cs file:

public sealed partial class MainPage : SwapChainBackgroundPanel
    {
        private DeviceManager deviceManager;
        private SwapChainBackgroundPanelTarget d2dTarget;

        private SampleRenderer sampleRenderer;

        public MainPage()
        {
            this.InitializeComponent();

            sampleRenderer = new SampleRenderer();
            d2dTarget = new SwapChainBackgroundPanelTarget(root);
            d2dTarget.OnRender += sampleRenderer.Render;

            deviceManager = new DeviceManager();
            deviceManager.OnInitialize += d2dTarget.Initialize;
            deviceManager.OnInitialize += sampleRenderer.Initialize;

            deviceManager.Initialize(DisplayProperties.LogicalDpi);

            CompositionTarget.Rendering += CompositionTarget_Rendering;
        }

        void CompositionTarget_Rendering(object sender, object e)
        {
            d2dTarget.RenderAll();
            d2dTarget.Present();
        }
    }

7. That’s it! All that’s left to do now is to initialize our page on application start. To do this we will modify OnLaunched method in App.xaml.cs file:

if (rootFrame.Content == null)
{
    var swapchainPanel = new MainPage();
    Window.Current.Content = swapchainPanel;
    Window.Current.Activate();
}

8. We can now run our application and enjoy a beautiful Cornflower Blue background rendered with DirectX.