Lloyd.NET

Programing experiments

The Content Stream sample

Today I mostly finished porting the Content Stream DirectX sample from MSDN to WPF. About 4300 lines of C++ to C#.

Get it on CodePlex!

I kind of lost track of the big picture while translating C++ to C# method after method, each of them being far remote from doing any DirectX work. Anyhow I did learn a few things…

But first a screen shot of the result: a huge (and empty) free roaming world:

image

 

And here are a few things that I learn while porting the sample

 

Interop lessons

The PackedFile class is reading / writing a lot of structures (directly, as opposed to parsing the bytes) from a terrain file.

Writing a structure to a file in C++ is quite straight forward, define your structure and use WriteFile as in

struct CHUNK_HEADER
{
    UINT64 ChunkOffset;
    UINT64 ChunkSize;
};

CHUNK_HEADER* pChunkHeader = TempHeaderList.GetAt( i );
if( !WriteFile( hFile, pChunkHeader, sizeof( CHUNK_HEADER ), &dwWritten, NULL ) )
    goto Error;

 

The same operation can, in fact, be done in C#. Here is a code that will write any structure (property tagged) to a byte[] array (i.e. any stream)

public static T ToValue<T>(byte[] buf, ref int offset)
    where T : struct
{
    int n = Marshal.SizeOf(typeof(T));
    if (offset < 0 || offset + n > buf.Length)
        throw new ArgumentException();

    fixed (byte* pbuf = &buf[offset])
    {
        var result = (T)Marshal.PtrToStructure((IntPtr)pbuf, typeof(T));
        offset += n;
        return result;
    }
}

(This method can be found in Week02Samples\BufferEx.cs)

The structure should be properly tagged though. Here is one which contains a fixed size string!

[StructLayout(LayoutKind.Sequential, CharSet = CharSet.Unicode/*, Pack = 4*/)]
public struct FILE_INDEX
{
    [MarshalAs(UnmanagedType.ByValTStr, SizeConst = WinAPI.MAX_PATH)]
    public string szFileName;
    public long FileSize;
    public long ChunkIndex;
    public long OffsetIntoChunk;
    public Vector3 vCenter;
}

If all the type are supported by Interop it will end-up with the same content as a C++ reader / writer.

 

Sharing DirectX texture with CPU memory

The Textures and buffers of DirectX most of the time lies in the GPU memory. Meaning:

  • That they are a precious resource! There is only that much video memory and if the application need more, the GPU will be considerably slowed swapping some of them with the main memory!
  • There are a few key way of passing the memory around:
  • With D3D.Buffer, a call to UpdateSubresource() will do it

 

With D3D.Texture2D, a mix and match of Map(), write to a Staged resource, Unmap(), CopyResource()

In the samples 2 files help to do that: ResourceReuseCache.cs and ContentLoader.cs

 

In ResourceReuseCache.cs there is a cache of indices buffers, vertices buffer and textures. 

Of particular interest each texture cache item contains a pair of objects (because updating texture is trickier than buffer): a ShaderResourceView and a (staging) Texture2D.

Here is how they are created:

var desc = new Texture2DDescription
{
    Width = Width,
    Height = Height,
    MipLevels = MipLevels,
    ArraySize = 1,
    Format = FormatEx.ToDXGI(( D3DFORMAT )Format),
    SampleDescription = new SharpDX.DXGI.SampleDescription(1, 0),
    Usage = ResourceUsage.Default,
    BindFlags = BindFlags.ShaderResource,
    CpuAccessFlags = CpuAccessFlags.None,
    OptionFlags = ResourceOptionFlags.None,
};

using (Texture2D pTex2D = new Texture2D(m_Device, desc))
{
    var SRVDesc = new ShaderResourceViewDescription
    {
        Format = desc.Format,
        Dimension = SharpDX.Direct3D.ShaderResourceViewDimension.Texture2D,
        Texture2D = { MipLevels = desc.MipLevels, }
    };
    tex.pRV10 = new ShaderResourceView(m_Device, pTex2D, SRVDesc);
}

desc.Usage = ResourceUsage.Staging;
desc.BindFlags = BindFlags.None;
desc.CpuAccessFlags = CpuAccessFlags.Write;
tex.pStaging10 = new Texture2D(m_Device, desc);

in maroon bold the 2 paired objects created by this code snipped (note the desc.Usage = ResourceUsage.Staging)

 

Later data is written to those buffer and communicated to the DirectX memory though IDataLoader(s) and IDataProcessor(s) found in ContentLoader.cs. The loading / updating code being split into 5 methods it might be trick to follow.

 

For buffer, this method (from DXUtils) show how to write a Stream to a Buffer:

public static void UpdateSubresource(this Direct3D10.Device device, Stream source, Direct3D10.Resource resource, int subresource)
{
    byte[] buf = new byte[source.Length];
    source.Position = 0;
    source.Read(buf, 0, buf.Length);

    using (var ds = new DataStream(buf, true, true))
    {
        var db = new DataBox(0, 0, ds);
        device.UpdateSubresource(db, resource, subresource);
    }
}

(note sure what the subresource is for, though…)

 

For Texture it’s a bit more involved:

void CopyTexture(Stream textdata)
{
    Device device = ...;
    ShaderResourceView texture = ...;
    Texture2D staging = ...;
var sdata = staging.Map(0, MapMode.Write, MapFlags.None); // WARNING copy should pay attention to row pitch, // i.e. a row length (in byte) might be more than num pixel * pixel size int NumBytes, RowBytes, NumRows; FormatEx.GetSurfaceInfo(250, 250, D3DFORMAT.A8R8G8B8, out NumBytes, out RowBytes, out NumRows); var buff = new BufferEx(); long srcpos = textdata.Position, dstpos = sdata.Data.Position; for (int h = 0; h < NumRows; h++) { textdata.Position = srcpos; sdata.Data.Position = dstpos; buff.CopyMemory(sdata.Data, textdata, RowBytes, buff.CurrentLength); dstpos += m_pLockedRects10[i].Pitch; srcpos += RowBytes; } // send the data to the GPU memory staging.Unmap(0); using (Resource pDest = texture.Resource) device.CopyResource(staging, pDest); }

(again, not sure what the 1st argument of Map() / Unmap() is …)

 

Rendering pipeline and shader bytecode signature

In Direct3D input data, i.e. the vertices with their (optional) texture coordinate, normal and color go through what’s called a rendering pipeline. Having trouble finding an explanation about it again here is a Wikipedia article about it:

 

The Microsoft Direct3D 10 API defines a process to convert a group of vertices, textures, buffers, and state into an image on the screen. This process is described as a rendering pipeline with several distinct stages. The different stages of the Direct3D 10 pipeline[29] are:[30]

  1. Input Assembler: Reads in vertex data from an application supplied vertex buffer and feeds them down the pipeline.
  2. Vertex Shader: Performs operations on a single vertex at a time, such as transformations, skinning, or lighting.
  3. Geometry Shader: Processes entire primitives such as triangles, points, or lines. Given a primitive, this stage discards it, or generates one or more new primitives.
  4. Stream Output: Can write out the previous stage's results to memory. This is useful to recirculate data back into the pipeline.
  5. Rasterizer: Converts primitives into pixels, feeding these pixels into the pixel shader. The Rasterizer may also perform other tasks such as clipping what is not visible, or interpolating vertex data into per-pixel data.
  6. Pixel Shader: Determines the final pixel colour to be written to the render target and can also calculate a depth value to be written to the depth buffer.
  7. Output Merger: Merges various types of output data (pixel shader values, alpha blending, depth/stencil...) to build the final result.

The pipeline stages illustrated with a round box are fully programmable. The application provides a shader program that describes the exact operations to be completed for that stage. Many stages are optional and can be disabled altogether.

 

Another thing I understood is what is this signature thing is all about!

When drawing you should set the input layout of the data. This input layout need some sort of byte code signature, as in:

 

// initialization
var inputSignature = ShaderSignature.GetInputSignature(pVSBlob);
var layout = new InputLayout(Device, inputSignature, new[]{
    new InputElement("VERTEX", 0, Format.R32G32B32_Float, 0),
});

// rendering
Device.InputAssembler.SetInputLayout(layout);
//......

In here signature is not about signing your code / security. It’s about checking that the InputLayout defined in code matches the input of the vertex shader (i.e. the entry point of the rendering pipeline). It’s why the signature always from the vertex shader definition.

 

Effects

Somehow I found the declaration of the various shaders involved in your rendering pipelines quite cumbersome. Now apparently there is a way to do it all in the HLSL file by using effects. An effect (in your HLSL file) look like that:

technique10 RenderTileDiff10
{
    pass p0
    {
        SetVertexShader( CompileShader( vs_4_0, VSBasic() ) );
        SetGeometryShader( NULL );
        SetPixelShader( CompileShader( ps_4_0, PSTerrain(false) ) ); 
        
        SetDepthStencilState( EnableDepth, 0 );
        SetBlendState( NoBlending, float4( 0.0f, 0.0f, 0.0f, 0.0f ), 0xFFFFFFFF );
        SetRasterizerState( CullBack );  
    }  
}

It looks like the C++ / C# code for setting up your pipeline, just much more compact!

Once you created a few effects, to use them you got to: compiler your shader file and get a point to the technique of choice.

To create the layout you will need to get the effect’s vertex shader (for the signature)

Here is some pseudo code that use the above effect and do initialization and rendering

//====== Initialization =============
// compile the shader and get the effect
var sbytecode = ShaderBytecode.CompileFromFile(
    "ContentStream\\ContentStream.fx",
    "fx_4_0",
    sFlags, EffectFlags.None, null, null);
var myEffect = new Effect(Device, sbcfile);

// get the technique(s) of interest
var myTechnique = myEffect.GetTechniqueByName("RenderTileDiff10");

// define input data layout
var inputdesc = new InputElement[]
{
    // Lloyd: watch out! trap! offset and slot are swapped between C++ and C#
    new InputElement ( "POSITION", 0, Format.R32G32B32_Float,  0, 0, InputClassification.PerVertexData, 0 ),
    new InputElement ( "NORMAL",   0, Format.R32G32B32_Float, 12, 0, InputClassification.PerVertexData, 0 ),
    new InputElement ( "TEXCOORD", 0, Format.R32G32_Float,    24, 0, InputClassification.PerVertexData, 0 ),
};
var PassDesc = myTechnique.GetPassByIndex(0).Description;
var vertexsignature = PassDesc.Signature;
var inputlayout = new InputLayout(Device, vertexsignature, inputdesc);

// ======== Rendering ===
// set a shader variable
var mWorld = myEffect.GetVariableByName("g_mView").AsMatrix();
mWorld.SetMatrix(CurrentCamera.View);

// render with a technique
var Desc = myTechnique.Description;
for (int iPass = 0; iPass < Desc.PassCount; iPass++)
{
    myTechnique.GetPassByIndex(iPass).Apply();
    Device.DrawIndexed(g_Terrain.NumIndices, 0, 0);
}

Still not sure what the passes are about though.

 

 

Direct3D 9, 10, 11

There is 2 sides to Direct3D. There is the runtime API installed on your computer and there is the feature level (as it is called since D3D 10.1) supported by the video card. So while you might have DirectX 11 installed on your system, your video card might only support Direct3D 10.0 perhaps.

One thing with the D3D 10.1 runtime and up (if it’s installed, by your installer for example) is that you can use whatever version of D3D you like, but target (or use) a given feature level. The difference between each feature level is summarized there.

 

Anyhow I had various problem and success with each version of D3D.

I’m working on those sample at home and everything works fine. At work it doesn’t though, due to my work video card only supporting D3D10 (and maybe some incorrect initialization, hardware testing on my part).

Also, first, to be rendered in D3DImage the render targets should be compatible with D3D9 surface. In the case of D3D 10 and 11 that means they should be defined with ResourceOptionFlags.Shared. But this is not supported by D3D10! (only D3D10.1). It’s hard for me to test as my computer has a D3D11 compatible card, I still have some initialization issue on low end computer for lack of testing machine.

Secondly, while D3D11 include some new amazing features such as computing shader! (talk about parallel processing!), geometry shader with which you can do realistic fur or high performance software renderer the WARP device, it has no support for text and font at all! Although (I have to test) supposedly one can render part of the scene with D3D10 (the text for example) and use the resulting texture in D3D11 directly as the surface have a compatible format.

 

Camera

I learn I need a camera class to describe and manipulate the world, view and projection matrices! I was inspired by DXUTCamera.h and write class very similar to the sample.

Camera has the following interesting methods

public abstract partial class BaseCamera
{
    public BaseCamera()


public void SetViewParams(Vector3 eye, Vector3 lookAt) public virtual void SetViewParams(Vector3 eye, Vector3 lookAt, Vector3 vUp) public void Reset() public Vector3 Position public Vector3 LookAt public Vector3 Up public Matrix View { get { return mView; } } public void SetProjParams(float fFOV, float fAspect, float fNearPlane, float fFarPlane) public float NearPlane public float FarPlane public float AspectRatio public float FieldOfView public Matrix Projection { get { return mProj; } } public void FrameMove(TimeSpan elapsed) } public partial class FirstPersonCamera : BaseCamera
public partial class ModelViewerCamera : BaseCamera

Remark lookAt is the point the camera is looking at, not the direction it’s gazing at!

 

It contains the current view and project matrix. Handle key and mouse input by changing the view matrix. It also can change the view matrix with an elapsed time (for changing the view between each frame, when keys are down).

It’s imperfect (I think I will write a better one once I start porting Babylon from XNA to DirectX+WPF) though.

Ha, well, when experimenting with camera I had to read about… quaternions! Which I only feared by name until now.

I won’t say I master quaternion yet! Ho no!

But I understand enough to be dangerous. Here is some good introductory links on Quaternions


Tags: , ,
Categories: .NET | DirectX | WPF
Permalink | Comments (0) | Post RSSRSS comment feed

Introducing DirectX to WPF

I started to learn DirectX. I wanted, of course, to use it in a WPF environment. I don’t hope to write a game (yet?) but I thought it would be a good API for high performance data visualization. Or simply capturing and tweaking web cam output.

I discovered SharpDX by Alexandre Mutel, which is a 100% managed wrapper. Better yet, it performs better than all other managed wrapper it seems! At least according to this this.

To start with DirectX you need to download the DirectX SDK which is good because it contains tons of tutorials and samples.

I started by rewriting all the 7 MSDN tutorials in C#. I try to write code very close to the original C++ (for comparison purpose) yet beautified (thanks to C#!), I shall say it came out well! Smile

tutorial7

 

Speaking of which, when you work with DirectX you have to write (pixel, vertex, hull, etc…) shaders (introduction). Basically they are little program that convert the data from one graphic processing stage to an other. The shader code look remotely like a simple C file with some extra.

Once again, thanks again to Alexandre Mutel, I found an extension for VS2010 which provide syntax colouring for shaders, NShader.

With that shader program are much easier to read, behold:

//--------------------------------------------------------------------------------------
struct VS_INPUT
{
    float4 Pos : POSITION;
    float3 Norm : NORMAL;
};

struct PS_INPUT
{
    float4 Pos : SV_POSITION;
    float3 Norm : TEXCOORD0;
};


//--------------------------------------------------------------------------------------
// Vertex Shader
//--------------------------------------------------------------------------------------
PS_INPUT VS( VS_INPUT input )
{
    PS_INPUT output = (PS_INPUT)0;
    output.Pos = mul( input.Pos, World );
    output.Pos = mul( output.Pos, View );
    output.Pos = mul( output.Pos, Projection );
    output.Norm = mul( input.Norm, World );
    
    return output;
}

 

So, how does this all work?

DXWPF

From WPF’s point of view, the DirectX code is to be rendered into a Texture2D and the Texture2D to be displayed with a D3DImage.

It starts with:

public class DXImageSource : D3DImage, IDisposable
{
    public void Invalidate()

    public void SetBackBuffer(SharpDX.Direct3D10.Texture2D texture)
    public void SetBackBuffer(SharpDX.Direct3D11.Texture2D texture)
    public void SetBackBuffer(SharpDX.Direct3D9.Texture texture)
}

With this subclass of D3DImage you can directly set a SharpDX / DirectX Texture2D as the back buffer of the image (Remark that they should be created with ResourceOptionFlags.Shared, as they will be access by the D3DImage through a shared D3D9 interface).

This ImageSource could very well be used in a Image class. But to provide continuous updating, resizing, etc.. I created the following FrameworkElement:

public interface IDirect3D
{
    void Reset(ResetArgs args);
    void Render(RenderArgs args);
}

public class DXElement : FrameworkElement
{ public DXImageSource Surface { get; } public IDirect3D Renderer public bool IsLoopRendering }

Then the DXElement does very little by itself. It handles resize event. If IsLoopRendering is true it renders its Renderer every frame. It capture mouse and forward to the Render if it implements IInteractiveRenderer (which D3D does).

 

And that’s it for the UI.

 

From the DirectX point of view I provide a few class (The D3D tree) that just create an appropriate Device and have virtual method to override to render.

 

What’s next?

  • Direct2D1 only works with Direct3D10 I’d like to make it works with Direct3D11
  • There are still many thing I’d like to know to be reasonably confident, so I (just) started to implement various sample which will show some interesting aspect of DirectX. (1 completed so far)

Could you get the code?
well.. it’s all on CodePlex!


Tags: ,
Categories: DirectX | WPF
Permalink | Comments (0) | Post RSSRSS comment feed

Composite Application Reloaded

 



Introduction

As I was starting a new project I was looking for a library that will help me write a composite application, i.e. an application with a main shell (window) and pluggable extensions (DLLs / modules) to be added to it dynamically; A library like Prism but hopefully much simpler.

Many pieces of the puzzle could already be found elsewhere. The application had to have a clear separation between data and view, i.e. an MVVM approach. Services had to be linked automatically with something like MEF. Data validation should be automatic (thanks to ValidationAttribute(s)).

But improvement had to be made regarding disconnected messaging and view resolution. About the view resolution, i.e. the process of finding the appropriate view to represent a given business data object, I wanted to just tag the view with an attribute, such as DataView(typeof(BusinessData1)) and let the library take care of the rest. This is where this library came from.

Table of content

Samples
About MEF and MVVM
What does a composite application look like
Main Features
    Composition GetView
    Validation and ViewModelBase
    Disconnected Messaging
    Commands
Other Features
Summary
Compatibility
References

Samples

Intro

To test if my library was up to its goal I have ported three samples to it. In all case I was able to reduce the application size and maintain functionality.

  • Josh Smith MVVM Demo. This is the best sample, as it is small and simple yet it covers almost all features of the library (after some modifications) and is a real composite application. I was able to get rid of the hand written validation code and use ValidationAttribute instead. And I tweaked the MainWindow and App class to make it a composite application, and use the DataControl in the TabItem to bind multiple controls to the same model with different view.
  • Prism’s main sample, the StockTraderApp project (huge sample). I removed the presenters (code which were used to bind views and view models, now replaced with call to Composition.GetView() and DataControl), the EventAggregator and custom prism events (replaced by Notifications static method). The most challenging and interesting part was to get rid of the RegionManager and replace it with the IShellView which explicitly expose the area of the shell that can be used and get rid of the RegionManager’s magic string approach.
  • MEFedMVVM library demo. The application is relatively simple but it makes extensive usage of design time support, and the design time experience is a joy to behold.
The unit tests illustrate how the most important features are working (i.e. Composition, Notification, ViewModelBase and Command).

About MEF and MVVM

Josh Smith talked about MVVM extensively on MSDN already. But, to summarize, MVVM is a View Model approach where all the logic and information is in the models. And by all I mean all, to the extent of including the selected element of a list, or the position of the caret, if need be.

In MVVM the view is nothing more than some declarative XAML (and possibly some UI specific code if need be, with no business code at all just pure UI logic). And because business data might not express all the information present in a view (such as selected area, incorrect value in a text box, etc...), business models might be wrapped in view models. View models are business models wrappers with a few extra, view-friendly, properties. This offers various advantages including increased testability, better separation of concerns, possibility to have independent team for business data and UI.

MEF, or Manage Extensibility Framework, solves the problem of passing services and other shared objects around in a very neat way. It also enables to find interfaces implementations easily.
Basically “consumer” objects declare what they need with the import attribute, like so:

[Import(typeof(ISomeInterface)]
public ISomeInterface MySome { get; set; }
Somewhere else in the code the exporting object are declared with export attribute.
[Export(typeof(ISomeInterface))]
public class SomeInterfaceImplentation : ISomeInterface
{ /** */ }
Remark properties and methods can be exported. Import can be single object (Import) or many (ImportMany). I strongly recommend that you read the MEF documentation.
To find the implementation for all imports needed by your objects there are 2 actions to be done:
  1. At the start of the program, a “catalog” of types for MEF should be initialized from a list of types, assemblies and / or directories, which will be where MEF will look for locating exports. It’s where you opt-in for the modules of interest. With this library you’ll call the method Composition.Register(), as shown below.
  2. You “compose” the objects that need to be resolved (i.e. which contains imports). With this library you’ll use the method Composition.Compose().
MEF contains various tags to control whether instances are shared or not, whether multiple implementations of an export is valid or not. Again this is covered in thedocumentation.

What does a composite application look like

A composite application is an application where there is a well-known top level UI element, typically a window for a desktop application or a Page for Silverlight. This top level UI element is called the “Shell”.

The shell contains multiple areas where pluggable content will be hosted. Content that is not defined by the shell but in modules that are loaded dynamically (with MEF for example).

For example in the example below a shell is defined with two areas:

  • A list box, showing a single list of documents.
  • An ItemsControl (a TabControl) which can contains numerous items.
<Window 
	x:Class="DemoApp.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<ListBox
			Grid.Column="0"
			Items="{Binding Documents}"
			Header="Documents"
			/>
		<TabControl 
			Grid.Column="1"
			IsSynchronizedWithCurrentItem="True" 
			ItemsSource="{Binding Workspaces}" 
			ItemContainerStyle="{StaticResource ClosableTabItemStyle}"/>
	</ Grid >
</Window>
Remark Don’t worry too much about the shell when you create it, it is relatively easy to add or move areas later in the development, if need be. But it’s harder to remove an area in use!

Once a shell has been defined, an interface to it should be exposed via a common library. It could be a “IShellInterface” (see the IShellView in the StockTraderApp for example) or its view model (see MainViewModel in DemoApp for example), or a combination of the two!

As an example here is the IShellView interface from the StockTraderApp sample:

public enum ShellRegion
{
	MainToolBar,
	Secondary,
	Action,
	Research,
	// this will set the currently selected item
	Main,
}
public interface IShellView
{
	void ShowShell(); // this will show the shell window
	void Show(ShellRegion region, object data);
	ObservableCollection<object> MainItems { get; }
}
Once a shell has been defined the composite application can be written. Four short steps are involved:
  1. Define the DLL that are to be dynamically loaded
  2. Create the shell (or skip and import it in 3.)
  3. Export the shell and import the modules
  4. Start the app / initialize the modules
For example, here is what StockTraderApp simplified App code could look like
public partial class App
{
	public App()
	{
		// 1. Opt-in for the DLL of interest (for import-export resolution)
		Composition.Register(
			typeof(Shell).Assembly
			, typeof(IShellView).Assembly
			, typeof(MarketModule).Assembly
			, typeof(PositionModule).Assembly
			, typeof(WatchModule).Assembly
			, typeof(NewsModule).Assembly
			);
		// 2. Create the shell
		Logger = new TraceLogger();
		Shell = new Shell();
	}
 
	[Export(typeof(IShellView))]
	public IShellView Shell { get; internal set; }
 
	[Export(typeof(ILoggerFacade))]
	public ILoggerFacade Logger { get; private set; }
 
	[ImportMany(typeof(IShellModule))]
	public IShellModule[] Modules { get; internal set; }
 
	public void Run()
	{
		// 3. export the shell, import the modules
		Composition.Compose(this);
		Shell.ShowShell();
 
		// 4. Start the modules, they would import the shell
		// and use it to appear on the UI
		foreach (var m in Modules)
			m.Init();
	}
}

Main Features

The library grew quite a lot from its humble beginnings. It consists out of two main parts. Feature which are critical to MVMM and composite development and optional features which were a useful additions.

The central class for most features of this library is the Composition class. It also contains two important properties, Catalog and Container, which are the used for MEF to resolve imports and exports. You need to fill the Catalog at the start of the application with Composition.Register(), for example:

static App() // init catalog in App’s static constructor
{
	Composition.Register(
		typeof(MapPage).Assembly
		, typeof(TitleData).Assembly
		, typeof(SessionInfo).Assembly
	);
}
Later service imports and exports can be solved with MEF by calling Composition.Compose().

Composition GetView

When an MVVM development pattern is followed, one writes business model and / or view models and views for these data models. Typically this view will only consist of “XAML code”, and their DataContext property will be the business model. Often MVVM helper libraries will provide some ways of finding and loading these views.

In this library the views need to be tagged with a DataViewAttribute which specifies for which model type this view is for:

[DataView(typeof(CustomerViewModel))]
public partial class CustomerView : UserControl
{
	public CustomerView()
	{
		InitializeComponent();
	}
}
Then, from a data model, you can automatically load the appropriate view (and set its DataContext) with a call to Composition.GetView(), for example:
public void ShowPopup(object message, object title)
{
	var sDialog = new MsgBox();
	sDialog.Message = Composition.GetView(message);
	sDialog.Title = Composition.GetView(title);
	sDialog.Show();
}
Often models are not displayed as a result of some method call but simply because they are an item in an ItemsControl or the content of a ContentControl. In this case theDataControl control can be used in XAML to display the item by calling Composition.GetView().

Remark It also brings a DataTemplate like functionality to Silverlight.

Because we use a View-Model approach, the same data model can be shown in multiple places at the same time hence Composition.GetView(), DataViewAttribute and the DataControl have an optional location parameter.

In the example below, the same UserViewModel instance (subclass of WorkspaceViewModel) is used to display both the TabItem header and content using different location parameter (note: location is not set, i.e.it is null, in the second template).

<Style x:Key="ClosableTabItemStyle" TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
	<Setter Property="HeaderTemplate">
		<Setter.Value>
			<DataTemplate>
				<g:DataControl Data="{Binding}" Location="header"/>
			</DataTemplate>
		</Setter.Value>
	</Setter>
	<Setter Property="ContentTemplate">
		<Setter.Value>
			<DataTemplate>
				<g:DataControl Data="{Binding}"/>
			</DataTemplate>
		</Setter.Value>
	</Setter>
</Style>
Both views were defined like this (note the first view is the default view, i.e. location is not set, it is null):
[DataView(typeof(CustomerViewModel))]
public partial class CustomerView : System.Windows.Controls.UserControl
{
	public CustomerView()
	{
		InitializeComponent();
	}
}
[DataView(typeof(WorkspaceViewModel), "header")]
public partial class CustomerHeaderView : UserControl
{
	public CustomerHeaderView()
	{
		InitializeComponent();
	}
}

Validation and ViewModelBase

Inspired by Rob Eisenberg’s talk, I created a ViewModelBase class which implement two important interfaces for WPF development: INotifyPropertyChanged andIDataErrorInfo.

The INotifyPropertyChanged implementation is strongly typed (refactor friendly):

public class Person : ViewModelBase
{
	public string Name
	{
		get { return mName; }
		set
		{
			if (value == mName)
				return;
			mName = value;
			OnPropertyChanged(() => Name); // See, no magic string!
		}
	}
	string mName;
}
The IDataErrorInfo interface allows the WPF bindings to validate the properties they are bound to (if NotifyOnValidationError=true). The implementation inViewModelBase validates the properties using ValidationAttribute(s) on the properties themselves. For example:
public class Person : ViewModelBase
{
	[Required]
	public string Name { get; set; }
 
	[Required]
	public string LastName { get; set; }
 
	[OpenRangeValidation(0, null)]
	public int Age { get; set; }
 
	[PropertyValidation("Name")]
	[PropertyValidation("LastName")]
	[DelegateValidation("InitialsError")]
	public string Initials { get; set; }
 
	public string InitialsError()
	{
		if (Initials == null || Initials.Length != 2)
			return "Initials is not a 2 letter string";
		return null;
	}
}
The example above also illustrates some of the new ValidationAttribute subclasses provided in this library, in the Galador.Applications.Validation namespace, i.e.
ConversionValidationAttribute
DelegateValidationAttribute
OpenRangeValidationAttribute
PropertyValidationAttribute

A control with an invalid binding will automatically be surrounded by a red border (default style), but the error feedback can be customized as shown in this XAML fragment below, which display the error message below the validated text:

<!-- FIRST NAME-->
<Label 
	Grid.Row="2" Grid.Column="0" 
	Content="First _name:" 
	HorizontalAlignment="Right"
	Target="{Binding ElementName=firstNameTxt}"
	/>
<TextBox 
	x:Name="firstNameTxt"
	Grid.Row="2" Grid.Column="2" 
	Text="{Binding Path=Customer.FirstName, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged, BindingGroupName=CustomerGroup}" 
	Validation.ErrorTemplate="{x:Null}"
	/>
<!-- Display the error string to the user -->
<ContentPresenter 
	Grid.Row="3" Grid.Column="2"
	Content="{Binding ElementName=firstNameTxt, Path=(Validation.Errors).CurrentItem}"
	/>

Disconnected Messaging

In a composite application there is a need for components to send messages to each other without knowing each other. The Notifications class and its static methods are here to solve this problem.

First a common message type should be defined in a common library, objects can

  • Subscribe to messages for this type (with the static Subscribe() and Register() methods).
  • Publish messages (with Publish()).
  • Unsubscribe from messages if they are no longer interested in them (with Unsubscribe()).
Remark The subscription thread is an optional parameter that can be either the original thread, the UI thread or a background thread.

To illustrate these functionalities here is a snippet of code from the Notifications’ unit test class.

public void TestSubscribe()
{
	// subscribe to a message
	Notifications.Subscribe<NotificationsTests, MessageData>(null, StaticSubscribed, ThreadOption.PublisherThread);

	// publish a message
	Notifications.Publish(new MessageData { });

	// unsubscribe to a message below
	Notifications.Unsubscribe<NotificationsTests, MessageData>(null, StaticSubscribed);
}
 
static void StaticSubscribed(NotificationsTests t, MessageData md)
{
	// message handling
}
Arguably the Notifications.Subscribe() syntax is a bit cumbersome. It’s why an object can also subscribe to multiple message type in one swoop by callingNotifications.Register(this), which will subscribe all its methods with one argument and tagged with NotificationHandlerAttribute, as in
public void TestRegister()
{
	// register to multiple message type (1 shown below)
	Notifications.Register(this, ThreadOption.PublisherThread);

	// publish a message
	Notifications.Publish(new MessageData { Info = "h" });
}
 
[NotificationHandler]
public void Listen1(MessageData md)
{
	// message handling
}

Commands

To avoid the need for code in the UI, yet handle code triggering controls such as a Button or a MenuItem, WPF (and Silverlight 4) came up with commands (ICommand to be exact). When a button is clicked the control action is triggered, and if it has a Command property it will call Command.Execute(parameter), where the parameter is theControl.CommandParameter property.

ViewModels need to expose a Command property whose Execute() method will call one of their methods. For this purpose there is the DelegateCommand.

A delegate command can be created by passing a method to execute and an optional method to check if the method can be executed (which will enable / disable the command source, i.e. the button). For example:

var p = new Person();
var save = new DelegateCommand<Person>(p, aP => { aP.Save(); }, aP => aP.CanSave);
Remark The command will automatically detect INotifyPropertyChanged properties and register to the PropertyChanged event to update its CanExecute() status.

Remark Sometimes you need commands such as “DoAll” as in “CancelAll” or “BuyAll” hence the support of ForeachCommand class, which is an ICommand itself and can watch a list of ICommand, set its status to CanBeExecuted if all its command can be executed.

Other Features

A few other non-essential features found their way into this library.

There is the Invoker, which assist in running code on the GUI thread. It can also be used in both WPF and Silverlight.

public class Invoker
{
	public static void BeginInvoke(Delegate method, params object[] args)
	public static void DelayInvoke(TimeSpan delay, Delegate method, params object[] args)
}

There is design time support for the data views. Using the attached property Composition.DesignerDataContext on a data view sets its DataContext at design time:

<UserControl x:Class="MEFedMVVMDemo.Views.SelectedUser"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
		xmlns:g="http://schemas.galador.net/xaml/libraries"
		xmlns:models="clr-namespace:MEFedMVVMDemo.ViewModels"
		g:Composition.DesignerDataContext="models:SelectedUserViewModel"
		>
These view models (i.e. DataView’s DataContext) can compose themselves (i.e. call Composition.Compose(this)) to import some other services.

Remark Having a design time DataContext makes the experience of writing a DataTemplate a whole lot better.

Remark These view models can be made aware that they are in design mode if they implement the IDesignAware interface.

Remark The services loaded by the models can be different in runtime and design time if they are exported with ExportService instead of Export, like so

[ExportService(ServiceContext.DesignTime, typeof(IUsersService))]
public class DesignTimeUsersService : IUsersService

There are multiple variations of the Foreach classes which can be used to observe an IEnumerable or an ObservableCollection and take whatever action is appropriate when something in the collection changes.

Summary

Hopefully this article and the samples it contains will have shown what a composite application architecture looks like and how this library makes it easy to solve the key problems most often met by a composite application:
  • Resolving services dependencies using MEF.
  • Finding DataView for DataModel with DataControl or Composition.GetView().
  • Implement common MVVM pattern: the ICommand (with DelegateCommand and ForeachCommand) and disconnected messaging (with Notifications).
  • Implement data binding validation with ValidationAttribute in a subclass of ViewModelBase.

Compatibility

This library will work with the Client Profile for .NET4 and Silverlight 4.

If need to be ported to .NET3.5 there are two obstacles.

  • MEF, which is on CodePlex.
  • And the Validator class, used in the ViewModelBase to validate the properties from the ValidationAttribute(s), i.e. implement the IDataErrorInfo interface. Only two methods need to be reimplemented from the Validator.

References

MEF on Codeplex (it’s also part of .NET4 & Silverlight 4)
http://mef.codeplex.com/

Prism, aka the composite application library
http://compositewpf.codeplex.com/

Josh Smith on MVVM
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

Rob Eisenberg on MVVM
http://devlicio.us/blogs/rob_eisenberg/archive/2010/03/16/build-your-own-mvvm-framework-is-online.aspx

The MEFedMVVM library
http://mefedmvvm.codeplex.com

 


Tags:
Categories: WPF
Permalink | Comments (0) | Post RSSRSS comment feed

Waitblock

Sometimes that’s the little thing that one find useful.
Here is such a thing!

 

In our app there are lots of time where an operation can be long and we needs to display a wait cursor (Note: unfortunately we use 3rd party data which are impossible to thread, literally!).

I often found this operation cumbersome. You know, store the original cursor, change the cursor, make a try/finally block, restore the original cursor.

So here is a very simple class which do just that very nicely, just with a single line using statement, as in:

using (new WaitCursorBlock()){…}

 

And here is the code of this simple class:

public class WaitCursorBlock : IDisposable
{
  Cursor originalCursor;
  public WaitCursorBlock()
  {
    originalCursor = Mouse.OverrideCursor;
    Mouse.OverrideCursor = Cursors.Wait;
  }
  public void Dispose() {Mouse.OverrideCursor = originalCursor;}
}


Categories: General | Source Code | WPF
Permalink | Comments (0) | Post RSSRSS comment feed

The Last IValueConverter

source code

  • update (2008/09/25): added a ScriptExtension and mentioned the LambdaExtension.

 

Introduction

Back when I started WPF I though Data Binding was great but, sometimes, I just couldn’t get the information I needed from the value easily enough.

Here I would describe a simple fictitious problem. Let says I want to display a list of integer, with a background color depending whether the number is even or odd.

image

The XAML for this might looks like that:

<ListBox ItemsSource="{Binding List, ElementName=root}"><ListBox.ItemTemplate><DataTemplate><TextBlock Text="{Binding}"Background="{?? what shall I put here ??}"/></DataTemplate></ListBox.ItemTemplate></ListBox>

 

Upon initial investigation

Initially I was thinking to write my own MarkupExtension which would have an expression property and run some sort of script.

It turns out:

  1. You can’t do that. The Binding extension do some things you can’t do. For example you can’t always know when a property change. You can’t find an object by name (as with the ElementName property of the Binding extension), etc…
  2. There is a better way. The Binding extension already does all the work, all you need is a smart IValueConverter to set to the Binding.Converter property.

 

What’s an IValueConverter

When you do data binding in WPF, the framework automatically do some conversion for you, so that the provided value can be used to set the target property. But what if you want to modify the behavior a little bit and decide yourself how to do the conversion?
You can, by setting the Converter property of the binding to an IValueConverter!

public class MyConverter : IValueConverter{#region IValueConverter Memberspublic object Convert(object value, Type targetType, object parameter, CultureInfo culture){throw new NotImplementedException();}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){throw new NotImplementedException();}#endregion}

 

Now the code can look like that:

Window1.xaml

<Window.Resources><local:ColorConverter x:Key="int2color"/></Window.Resources><Grid><ListBox ItemsSource="{Binding List, ElementName=root}"><ListBox.ItemTemplate><DataTemplate><TextBlock Text="{Binding}"Background="{Binding Converter={StaticResource int2color}}"/></DataTemplate></ListBox.ItemTemplate></ListBox></Grid>

ColorConverter.cs

public class ColorConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){if (!(value is int))return null;int i = (int)value;return i % 2 == 0 ? Brushes.Red : Brushes.Green;}}

 

Now every time I encounter such a problem I can write a new IValueConverter.
Wait, NOOOOOOOOOOO!!!!…….

Seriously can’t I just write some build-in (in the XAML) quick code?

 

Script investigation

Initially I found Ken Boggart converters (Sorry, no link, my Google skills have apparently decreased with old age). They even have a script based converter.
I didn’t like them enough because it was using a quick and dirty script engine, tightly coupled with the value converter.

 

I also thought of using IronPython as the script engine. And while this is a great and mature project there is one thing which kills me with Python. Code blocks are defined with the indentation! Seriously…
And it’s just not an aesthetic problem. Imagine a moment: write some embedded python script into your xaml, “accidentally” reformat the document (CTRL+E,D) and voila, you have just broken your python script!
Tsss.. too bad.

 

I thought of writing my own simple interpreter. My initial plan was to use ANTLR. And while it’s a great project, with a great IDE, it’s a bit tedious to test / develop a grammar in C#, as all the tools are geared towards Java. Then I discovered Irony.
I haven’t used it much (compared to ANTLR) but my first impression is:

  • Writing the grammar is easier, better looking and definitely more C# friendly than ANTLR.
  • The next stage, the interpreter or AST visiting is much more tedious.
  • Plus ANTLR makes it very super easy to embed action directly into the parser, enabling a all in one parsing / interpreting phase for example.

But then, it turns out, I didn’t need to write my own Irony powered interpreter / script engine, there is already one: Script.NET.

 

The ScriptConverter

Script.NET is a quick and easy script engine that can, as all self-respecting .NET script engine, call upon all .NET methods and classes. It can easily be embedded into your application and the syntax is so simple, you can teach it yourself in 21 minutes! Great, just what I was looking for. And, of course, it uses curly braces to define code blocks!

The current version of Script.NET, at this time (Sept. 2008), doesn’t support the latest Irony. It ships as 3 DLLs on it own (plus the outdated Irony) and it has a dependency on Windows Forms. I decided to “fix” all of that and the version shipped in the zipped source code is not the original Script.NET source code, but a custom version which comes as only 1 DLL, with no WinForms dependency.

In my converter I had to, obviously, add an expression property (for the script). Less obvious but as critical, I had to add a known types property, so that the script could call on static property or on some classes constructor.

 

How does it works

Well to starts with you create a script interpreter with just one line

Script script = Script.Compile("my script string");

Then you can define some global variables or add known types as follows:

script.Context.SetItem("value", ContextItem.Variable, value);script.Context.SetItem("Brushes", ContextItem.Type, typeof(Brushes));

And then you can evaluate it in one line as well

return script.Execute();

 

A little problem which stopped me for a few minute was, how do I return something from my script?

Well a simple value is an expression and the last computed expression is the returned value. For example “1” is a valid script which return 1.

Script.NET doesn’t support the (bool_expr ? true_expr : false_expr) operator, but you can express it as:

if (bool_expr)true_expr;elsefalse_expr; 

 

First Solution

Now let’s write my script converter.

ScriptConverter.cs

[ContentPropertyAttribute("Expression")]public class ScriptConverter : IValueConverter{Script script;TypeDictionary knownTypes = new TypeDictionary();string expression;public string Expression{get { return expression; }set{expression = value;script = Script.Compile(expression);SetTypes(script, knownTypes);}}public class TypeDictionary : Dictionary<string, Type> { }public TypeDictionary KnownTypes{get { return knownTypes; }set{knownTypes = value;SetTypes(script, knownTypes);}}static void SetTypes(Script ascript, TypeDictionary types){foreach (var item in types)ascript.Context.SetItem(item.Key, ContextItem.Type, item.Value);}public object Convert(object value, Type targetType, object parameter, CultureInfo culture){script.Context.SetItem("value", ContextItem.Variable, value);script.Context.SetItem("param", ContextItem.Variable, parameter);script.Context.SetItem("culture", ContextItem.Variable, culture); 
return script.Execute();}}

 

Armed with this ultra cool converter, my XAML is now ready to rock!
You will notice that I initialized the Script with a list of type it need to know to evaluate the expression.

Window1.xaml

<Window.Resources><local:ScriptConverter x:Key="int2color"><local:ScriptConverter.KnownTypes><local:TypeDictionary><x:Type x:Key="Brushes" TypeName="Brushes"/></local:TypeDictionary></local:ScriptConverter.KnownTypes>if( value % 2 == 0 )Brushes.Red;elseBrushes.Green;</local:ScriptConverter></Window.Resources><Grid><ListBox ItemsSource="{Binding List, ElementName=root}"><ListBox.ItemTemplate><DataTemplate><TextBlock Text="{Binding}"Background="{Binding Converter={StaticResource int2color}}"/></DataTemplate></ListBox.ItemTemplate></ListBox></Grid>

 

Further Simplification

Okay now I have done it all in XAML, and it works well. But I exchanged a useless C# file for a bloated XAML! smile_embaressed

What I would like to is just put the expression in the converter, like a lambda expression.

It’s where MarkupExtension(s) will come to the rescue. Basically extension are custom way to create object with code running in the XAML. {x:Type …}, {x:Static …}, {Binding …} are all MarkupExtensions.

Create your own extension is easy. Okay let’s write the simplified XAML I really would like to see, and then write the extension:

<ListBox ItemsSource="{Binding List, ElementName=root}"><ListBox.ItemTemplate><DataTemplate><WrapPanel Orientation="Horizontal"><TextBlock Text="{Binding}"Background="{Binding 
Converter={local:Script
'if(value%2==0) Brushes.Red; else Brushes.Green;',
{
x:Type Brushes}}}"/></WrapPanel></DataTemplate></ListBox.ItemTemplate></ListBox>

Here we go, it’s a much simpler XAML code! In the Converter parameter of the binding I passed an extension which directly created my converter. This extension will take the following parameter: a script string and a list of type necessary for the script to run.

Initially I was planning to use an extension constructor like that:

public ScriptExtension(string code, params Type[] types){//....}

But it won’t work because XAML won’t recognize the “params Type[]” construct, and it will expect 2 and only 2 parameter, the second being array of types. There are also a few other problems with markup extension parameter (XAML choose them sorely on the number of parameter, it doesn’t do any type matching). Finally I used this code

public class ScriptExtension : MarkupExtension{public ScriptExtension(string code) { Init(code); }public ScriptExtension(string code, Type type) { Init(code, type); }public ScriptExtension(string code, Type type, Type t2) { Init(code, type, t2); }protected ScriptExtension(string code, params Type[] types) { Init(code, types); }void Init(string code, params Type[] types){Code = code;TypeDictionary dict = new TypeDictionary();foreach (var aType in types)dict[aType.Name] = aType;KnownTypes = dict;}public string Code { get; private set; }public TypeDictionary KnownTypes { get; private set; }

// return the converter herepublic override object ProvideValue(IServiceProvider isp){return new ScriptConverter(Code) { KnownTypes = KnownTypes };}}

 

 

 

 

 

Designer Issue

It worked quite nicely at runtime. But there was a problem with the designer. It just could not work with those multiple constructor. In the end I created multiple ScriptExtension subclass called Script0Extension, Script1Extension, Script2Extension, etc… depending on the number of type parameters.

Hence the final XAML look like that

<ListBox.ItemTemplate><DataTemplate><WrapPanel Orientation="Horizontal"><TextBlock Text="{Binding}"Background="{Binding 
Converter={local:Script1
'if(value%2==0) Brushes.Red; else Brushes.Green;',
{
x:Type Brushes}}}"/></WrapPanel></DataTemplate></ListBox.ItemTemplate>

 

Alternate Solution

At this stage we got a pretty good solution for many problem. But then I investigated this LambdaExtension. It’s really cool and I added it to my personal toolbox and to this ExpressionExplorer project as well.

It lets you define converters with Lambda expression, for exemple:

<TextBlock Text='{Binding Source={x:Static s:DateTime.Now},Converter={fix:Lambda "dt=>dt.ToShortTimeString()"}}'>  

It’s pretty good and I imagine Lambda expression would be way faster that my script expression. However it suffers from a few problems:

  • you cannot use the other parameters of the converter method (parameter and culture).
  • you cannot reference any type, you cannot return a Brush, i.e. it cannot solve my simple problem!

But I guess that, even with these shortcomings, it can still make an excellent converter in DataTriggers.

 

Additional Information

Here are some people or pages that have inspired me while working on this code.

Later on I had these additional feedback which proved to be very valuable.

First Orcun Topdagi has improved his LambdaExtension further, as you can check out on his blog about WPFix2 and WPFix3. Wow those are real hot goodies. I might even ditch my extension in his favor! But I have to spend some more time playing with it first (kind of super busy right now).

Also Daniel Paull has some very interesting blog posts (here, here and here) on how to do something similar with the DLR. What I really like about these article it’s that they are an easy introduction to the DLR.


source code.

 

 


Categories: Source Code | WPF
Permalink | Comments (1) | Post RSSRSS comment feed