Thursday, September 24, 2009

Prism - Creating a Custom Region Adapter for Ribbon

After using the Office Ribbon control in my WPF application, I thought to include that in a CWPFG project. My first step was to create a custom region adapter (OfficeRibbonRegionAdapter) that inherits from the RegionAdapterBase<Ribbon> .

public class OfficeRibbonRegionAdapter : RegionAdapterBase<Ribbon>

{

public OfficeRibbonRegionAdapter(IRegionBehaviorFactory regionBehaviourFactory) : base(regionBehaviourFactory) { }

//Maintain the ribbon instance

private Ribbon ___Instance;

protected override void Adapt(IRegion region, Ribbon ribbon)

{

___Instance = ribbon;

ribbon.Tabs.Clear();

//Implementing the collectionChanged handler

region.ActiveViews.CollectionChanged +=

new System.Collections.Specialized.NotifyCollectionChangedEventHandler((x, y) =>

{

switch (y.Action)

{

case NotifyCollectionChangedAction.Add:

foreach (RibbonTab __RibbonTab in y.NewItems)

___Instance.Tabs.Add(__RibbonTab);

break;

case NotifyCollectionChangedAction.Remove:

foreach (RibbonTab __RibbonTab in y.NewItems)

___Instance.Tabs.Remove(__RibbonTab);

break;

}

});

region.ActiveViews.ToList().ForEach( x => ribbon.Tabs.Add(x as RibbonTab));

}

protected override IRegion CreateRegion()

{

//This region keeps all the views in it as active.

//Deactivation of views is not allowed.

//This is the region used for ItemsControl controls.

return new AllActiveRegion();

}

}

Once the adapter is ready you can register it with the RegionAdapterMappings

var __Mappings = base.ConfigureRegionAdapterMappings();

__Mappings.RegisterMapping(typeof(Microsoft.Windows.Controls.Ribbon.Ribbon), this.Container.Resolve<OfficeRibbonRegionAdapter>());

return __Mappings;

Now we can create RibbonTabs in individual modules

RibbonTab __FolderTab = new RibbonTab();

__FolderTab.Label = "Folder";

RibbonGroup __FolderGroup = new RibbonGroup();

__FolderGroup.GroupSizeDefinitions = FindResource("FolderGroup") as Collection<RibbonGroupSizeDefinition>;

RibbonButton __DocButton = CreateRibbonButton("DocCommand");

RibbonButton __MusicButton = CreateRibbonButton("MusicCommand");

RibbonButton __PictureButton = CreateRibbonButton("PictureCommand");

RibbonButton __VideosButton = CreateRibbonButton("VideosCommand");

__FolderGroup.Controls.Add(__DocButton);

__FolderGroup.Controls.Add(__MusicButton);

__FolderGroup.Controls.Add(__PictureButton);

__FolderGroup.Controls.Add(__VideosButton);

__FolderTab.Groups.Add(__FolderGroup);

return __FolderTab;

Once the ribbon tabs are ready you can add it to the Region using ViewDiscoveryUIComposition method or using the Add method like

___RegionManager.RegisterViewWithRegion("ShellRibbon", () => ___Container.Resolve<RibbonView>().FolderRibbonTab);

Or

___RegionManager.Regions["ShellRibbon"].Add(___RibbonView.OfficeRibbonTab);

Output




Wednesday, September 23, 2009

Creating Office Ribbon Control in WPF

Microsoft Office UI licensing development center has released the Office Ribbon control from WPF which is available for Free download. The office UI ribbon is shipped with three themes (Blue, Black and Silver). You can access the Ribbon control by accepting the license terms from MS from this link.

I have created a sample application using the ribbon control.

1. Adding reference to the Ribbon assembly

xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

2. Creating Ribbon resources for GroupSizeDefentions and commands

<Window.Resources>

<ribbon:RibbonGroupSizeDefinitionCollection x:Key="OfficeGroup">

<ribbon:RibbonGroupSizeDefinition>

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />

ribbon:RibbonGroupSizeDefinition>

ribbon:RibbonGroupSizeDefinitionCollection>

<ribbon:RibbonCommand x:Key="WheelMenuCommand" LabelTitle="Main" ToolTipTitle="Main menu"

ToolTipDescription="Click to access application main menu"

LargeImageSource="Images/Wheel.png" />

<ribbon:RibbonCommand x:Key="AddProjectCommand"

Executed="OnAddProjectInvoked"

LabelTitle="Add Project"

LabelDescription="Add a new project"

LargeImageSource="Images/Add.png"

SmallImageSource="Images/Add20.png" />

Window.Resources>

3. Creating Ribbon application menu items

<ribbon:Ribbon DockPanel.Dock="Top">

<ribbon:Ribbon.ApplicationMenu>

<ribbon:RibbonApplicationMenu Name="ApplicationMenu" Command="{StaticResource WheelMenuCommand}">

<ribbon:RibbonApplicationSplitMenuItem Command="{StaticResource AddProjectCommand}">

<ribbon:RibbonApplicationMenuItem Command="{StaticResource ExcelCommand}" />

<ribbon:RibbonApplicationMenuItem Command="{StaticResource WordCommand}" />

ribbon:RibbonApplicationSplitMenuItem>

<ribbon:RibbonApplicationMenuItem Command="{StaticResource SaveCommand}" />

<ribbon:RibbonApplicationMenuItem Command="{StaticResource OpenCommand}" />

<ribbon:RibbonSeparator Margin="40 0 0 0" />

<ribbon:RibbonApplicationMenuItem Command="{StaticResource CloseCommand}" />

<ribbon:RibbonApplicationMenu.Footer>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

<Button HorizontalAlignment="Right" Content="Application Options"/>

<Button HorizontalAlignment="Right" Content="Exit Application" Margin="10 0 0 0" />

StackPanel>

ribbon:RibbonApplicationMenu.Footer>

ribbon:RibbonApplicationMenu>

ribbon:Ribbon.ApplicationMenu>

4. Creating Ribbon Tabs

<ribbon:RibbonTab Label="Office">

<ribbon:RibbonGroup HasDialogLauncher="True" Command="{StaticResource OfficeGroupCommand}"

GroupSizeDefinitions="{StaticResource OfficeGroup}">

<ribbon:RibbonButton Command="{StaticResource WordCommand}" />

<ribbon:RibbonButton Command="{StaticResource ExcelCommand}" />

<ribbon:RibbonButton Command="{StaticResource OneNoteCommand}" />

<ribbon:RibbonButton Command="{StaticResource AccessCommand}" />

<ribbon:RibbonButton Command="{StaticResource PresentationCommand}" />

<ribbon:RibbonButton Command="{StaticResource OutlookCommand}" />

ribbon:RibbonGroup>

ribbon:RibbonTab>

Screenshots