Click here to Skip to main content
15,898,134 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.6K   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:ad="clr-namespace:AvalonDock">

    
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/AvalonDock;component/Resources/Brushes.xaml"/>
        <ResourceDictionary Source="/AvalonDock;component/Resources/Common.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <ContextMenu
		     x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type ad:DockingManager}, ResourceId={x:Static ad:ContextMenuElement.DocumentPane}}"
		     >
        <MenuItem Header="Close" 
			Command="ApplicationCommands.Close"  />
        <MenuItem Command="ad:DocumentPane.CloseAllButThisCommand" />
        <Separator/>
        <MenuItem Command="ad:DocumentPane.NewHorizontalTabGroupCommand">
            <MenuItem.Icon>
                <ad:AlignedImage VerticalAlignment="Center"  HorizontalAlignment="Center">
                    <Image Source="/AvalonDock;component/resources/Images/HTabGroup.png" Width="13" Height="14"/>
                </ad:AlignedImage>
            </MenuItem.Icon>
        </MenuItem> 
        <MenuItem Command="ad:DocumentPane.NewVerticalTabGroupCommand">
            <MenuItem.Icon>
                <ad:AlignedImage VerticalAlignment="Center"  HorizontalAlignment="Center">
                    <Image Source="/AvalonDock;component/resources/Images/VTabGroup.png" Width="13" Height="14" />
                </ad:AlignedImage>
            </MenuItem.Icon>
        </MenuItem>
    </ContextMenu>

	<!--ManagedContent-->
	<Style TargetType="{x:Type ad:ManagedContent}">
		<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ad:ManagedContent}">
					<Border
						Background="{TemplateBinding Background}"
					    Margin="{TemplateBinding Padding}"
						>
						<ContentPresenter/>
					</Border>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>


	<!--DocumentTabItemStyle-->
    <Style x:Key="DocumentTabItemStyle" TargetType="{x:Type ad:ManagedContent}">
        <Setter Property="Background"
                Value="Transparent"/>
		<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
		<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ad:ManagedContent}">
                    <Border 
						x:Name="PART_DragArea" 
						BorderBrush="{StaticResource ManagedContentTabControlNormalBorderBrush}"
                        Margin="-10,0,0,0"
						SnapsToDevicePixels="True"
                        ContextMenu="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:ContextMenuElement.DocumentPane}}}"
                        >
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Path Data="M 20,0.5 Q 16,0.5 10,10 Q 5,19.5 0,19.5 L 20,19.5"
                                x:Name="tabItemIntPathBackground"  
                                  Fill="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBackground}}}"/>
                            <Path 
                                x:Name="tabItemIntPathBorder"  
                                Stroke="{StaticResource ManagedContentTabControlNormalBorderBrush}"
                                Data="M 20,0.5 Q 16,0.5 10,10 Q 5,19.5 0, 19.5"
                            />
                            <Border
                                    x:Name="tabItemIntBorder"
                                    Grid.Column="1"
                                    BorderThickness="0,1,1,0"
                                    Margin="-0.5,0,0,0"
                                    CornerRadius="0,3,0,0"
                                    BorderBrush="{StaticResource ManagedContentTabControlNormalBorderBrush}"
                                    Background="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBackground}}}"
                                >
								<StackPanel Orientation="Horizontal" 
                                            Margin="5,0,4,0">
									<TextBlock 
							            x:Name="tabItemTitle" 
							            TextTrimming="CharacterEllipsis" 
                                        TextWrapping="NoWrap"
							            Text="{TemplateBinding Title}" 
							            Margin="5,0,4,0"  
							            Foreground="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderForeground}}}"/>
									<ad:AlignedImage x:Name="PART_LockedIcon" Margin="2,0,0,0" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center">
										<Image Source="/AvalonDock;component/resources/Images/Locked.png" Width="6" Height="8" Stretch="Uniform"/>
									</ad:AlignedImage>
								</StackPanel>
                            </Border>  
                        </Grid>
                        
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter Property="Background" 
                                    TargetName="tabItemIntBorder" 
                                    Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBackgroundSelected}}}"
                                    />
                            <Setter Property="Fill" 
                                    TargetName="tabItemIntPathBackground" 
                                    Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBackgroundSelected}}}"
                                    />
                            <Setter Property="BorderBrush" TargetName="tabItemIntBorder" Value="#FFC1D2EE"/>
                            <Setter Property="Stroke" TargetName="tabItemIntPathBorder" Value="#FFC1D2EE"/>
                            <!--<Setter Property="Panel.ZIndex" Value="1"/> DOES NOT WORK! I DON'T KNOW WHY!!???--> 
                        </Trigger>
                        <DataTrigger Binding="{Binding Path=IsActiveDocument, RelativeSource={RelativeSource Self}}" Value="True"> 
                            <Setter Property="TextBlock.FontWeight" TargetName="tabItemTitle" Value="Bold"/>
                        </DataTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" SourceName="tabItemIntBorder" Value="True"/>
                                <Condition Property="Selector.IsSelected" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" 
                                    TargetName="tabItemIntBorder" 
                                    Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBackgroundMouseOver}}}"
                                    />
                            <Setter Property="Fill" 
                                    TargetName="tabItemIntPathBackground" 
                                    Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBackgroundMouseOver}}}"
                                    />
                        </MultiTrigger>
						<DataTrigger Binding="{Binding Path=IsLocked, RelativeSource={RelativeSource Self}}" Value="True">
							<Setter Property="Visibility" Value="Visible" TargetName="PART_LockedIcon"/>
						</DataTrigger>

					</ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

	<!--DocumentPane-->
    <Style TargetType="{x:Type ad:DocumentPane}">
        <Setter Property="Background" Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DefaultBackgroundBrush}}}"/>
		<Setter Property="Focusable" Value="False"/>
		<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ad:DocumentPane}" >
                    <ControlTemplate.Resources>
                        <ContextMenu x:Key="DocumentsListMenu" StaysOpen="True" ><!--ItemTemplate="{StaticResource ManagedContentHeaderDataTemplate}"-->
                            <ContextMenu.ItemContainerStyle>
                                <Style TargetType="{x:Type MenuItem}">
                                    <Setter Property="CommandParameter" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Header}"/>
                                    <Setter Property="Command" Value="ad:DocumentPane.ActivateDocumentCommand"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="MenuItem">
                                                <Border x:Name="intBorder" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="2">
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto" MinWidth="24"/>
                                                            <ColumnDefinition Width="*"/>
                                                        </Grid.ColumnDefinitions>
                                                        <ContentPresenter x:Name="Icon" Margin="2" Content="{Binding Path=Icon}" Grid.Column="0" VerticalAlignment="Center"/>
                                                        <TextBlock x:Name="intMenuTitle" Margin="5,2,20,2" Text="{Binding Path=Title}" Grid.Column="1" VerticalAlignment="Center"/>
				                                    </Grid>
                                                </Border>
                                                <ControlTemplate.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="true">
                                                        <Setter Property="Background" TargetName="intBorder">
                                                            <Setter.Value>
                                                                <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ActiveCaptionColorKey}}" Opacity="0.3"/>
                                                            </Setter.Value>
                                                        </Setter> 
                                                        <Setter Property="BorderBrush" TargetName="intBorder" Value="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}"/>
                                                    </Trigger>
                                                    <DataTrigger Binding="{Binding Path=IsActiveDocument}" Value="True">
                                                        <Setter Property="FontWeight" Value="Bold" TargetName="intMenuTitle"/>
                                                    </DataTrigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ContextMenu.ItemContainerStyle>
                        </ContextMenu>
                    </ControlTemplate.Resources>
                    <Border 
                        Focusable="False"
                        Background="{TemplateBinding Background}"
                        >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="1" Margin="0,-1,0,0">
                                <Border 
                                    BorderThickness="5" 
                                    BorderBrush="#FFC1D2EE" 
                                    CornerRadius="3" 
                                    Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.Background}" Focusable="False"/>
                                <Border BorderThickness="2" BorderBrush="#FFD6E2F8" CornerRadius="3" Margin="1" Focusable="False">
                                    <ContentPresenter 
                                        Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.Content}"
                                        Margin="2"
								        KeyboardNavigation.TabNavigation="Local"
								        KeyboardNavigation.DirectionalNavigation="Contained"
								        KeyboardNavigation.TabIndex="1"
                                        />
                                </Border>
                            </Grid>
                            <Border x:Name="PART_Header" 
							    Grid.Row="0" 
							    Focusable="False" 
							    BorderThickness="1,1,1,0">
                                <DockPanel LastChildFill="True">
                                    <Button DockPanel.Dock="Right" Width="18" Height="18" Style="{StaticResource PaneHeaderCommandStyle}" Command="ApplicationCommands.Close">
										<ad:AlignedImage>
											<Image Source="Images\PinClose.png" Width="13" Height="13" Stretch="Uniform"/>
										</ad:AlignedImage>
                                    </Button>
                                    <Button x:Name="PART_ShowContextMenuButton" DockPanel.Dock="Right" Width="18" Height="18" Style="{StaticResource PaneHeaderCommandStyle}" Command="ad:DocumentPane.ShowDocumentsListMenuCommand">
										<ad:AlignedImage>
											<Image x:Name="ShowContextMenuIcon" Source="Images\PinMenu.png" Width="13" Height="13" Stretch="Uniform"/>
										</ad:AlignedImage>
                                    </Button>
                                    <ad:DocumentTabPanel 
                                        x:Name="paneTabsPanel" 
                                        Panel.ZIndex ="1" 
                                        KeyboardNavigation.TabIndex="2"								
								        IsItemsHost="True" 
								        Margin="10,2,0,0"
                                        TabItemStyle="{StaticResource DocumentTabItemStyle}"/>
                                </DockPanel>
                            </Border>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="False">
                            <Setter Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <DataTrigger Binding="{Binding Path=IsMainDocumentPane, RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Source" Value="Images\PinDocMenu.png" TargetName="ShowContextMenuIcon"/>
                        </DataTrigger>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetProperty="Opacity"
                                        From="0" To="1"  Duration="0:0:0.200" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</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