Click here to Skip to main content
15,896,479 members
Articles / Desktop Programming / WPF

Building an Extensible Application with MEF, WPF, and MVVM

Rate me:
Please Sign up or sign in to vote.
4.88/5 (45 votes)
15 Nov 2009LGPL316 min read 303.4K   7.4K   185  
An article for anyone interested in how to build an extensible application using WPF and the Model-View-ViewModel pattern.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:SoapBox.Demo.PinBall"
    xmlns:arena="clr-namespace:SoapBox.Core.Arena;assembly=SoapBox.Core.Arena"
    x:Class="SoapBox.Demo.PinBall.PinBallKickerView">

    <RadialGradientBrush x:Key="PinBallKickerSpriteOval_Fill" GradientOrigin="0.33,0.33">
        <GradientStop Offset="0" Color="DeepSkyBlue" />
        <GradientStop Offset="1" Color="Blue"/>
    </RadialGradientBrush>
    <SolidColorBrush x:Key="PinBallKickerSpriteOval_Stroke" Color="Blue"/>
    <s:Double x:Key="PinBallKickerSpriteOval_StrokeThickness">1</s:Double>
    <s:Double x:Key="PinBallKickerSpriteOval_Width">40</s:Double>
    <s:Double x:Key="PinBallKickerSpriteOval_Height">10</s:Double>

    <s:Double x:Key="PinBallKickerSpriteOval_X">10</s:Double>
    <s:Double x:Key="PinBallKickerSpriteOval_Y">-5</s:Double>
    
    <!-- Make it fancy -->
    <DataTemplate DataType="{x:Type local:PinBallKickerSprite}">
        <Canvas>
            <!-- main outline -->
            <Ellipse Width="120" Height="120"
                     Stroke="Blue" StrokeThickness="3">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.33,0.66">
                        <GradientStop Offset="0" Color="DeepSkyBlue" />
                        <GradientStop Offset="1" Color="Blue"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="-60" 
                                            Y="-60"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="45"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="90"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="135"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="180"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="225"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="270"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Width="{StaticResource PinBallKickerSpriteOval_Width}" 
                     Height="{StaticResource PinBallKickerSpriteOval_Height}" 
                     StrokeThickness="{StaticResource PinBallKickerSpriteOval_StrokeThickness}"
                     Fill="{StaticResource PinBallKickerSpriteOval_Fill}"
                     Stroke="{StaticResource PinBallKickerSpriteOval_Stroke}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{StaticResource PinBallKickerSpriteOval_X}" 
                                            Y="{StaticResource PinBallKickerSpriteOval_Y}"/>
                        <RotateTransform Angle="315"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>
    </DataTemplate>
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


Written By
Engineer
Canada Canada
By day I'm a Professional Engineer, doing .NET, VB6, SQL Server, and Automation (Ladder Logic, etc.) programming.

On weekends I write and maintain an open source extensible application framework called SoapBox Core.

In the evenings I provide front line technical support for moms4mom.com and I help out with administrative tasks (like formatting stuff). I also pitch in as a moderator from time to time.

You can follow me on twitter.

Comments and Discussions