I would like to change the content of the main surface (the stuff below the ribbon itself)in a WPF application when a ribbon tab is clicked. I'm using the office ribbon, not that is matters much. So which WPF container control should I use, and how would I do it? Should I just have various controls with visibility hidden, or what. I'm not a WPF expert so I need a little inspiration.
.net – WPF ribbon, change main content when ribbontab is selected
netribbonwpfxaml
Related Solutions
The Office Ribbon was the wrong choice for my design.
I've seen posts on using Prism with Office Ribbon to get plugins working
This may be old news to you now but there wasn't a selected answer so here you go:
http://msdn.microsoft.com/en-us/library/ff799534.aspx
You can download the source, examples, and assemblies for including a ribbon. The documentation can be found on MSDN at http://msdn.microsoft.com/en-us/library/microsoft.windows.controls.ribbon.aspx.
Simple example from a project that includes the 4.0 version of the RibbonControlsLibrary.dll
<Window x:Class="WpfRibbonApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="MainWindow"
x:Name="RibbonWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ribbon:Ribbon x:Name="Ribbon" Title="Ribbon Title">
<ribbon:Ribbon.HelpPaneContent>
<ribbon:RibbonButton SmallImageSource="Icon.ico" />
</ribbon:Ribbon.HelpPaneContent>
<ribbon:Ribbon.QuickAccessToolBar>
<ribbon:RibbonQuickAccessToolBar >
<ribbon:RibbonButton x:Name="QATButton1"
SmallImageSource="Icon.ico" />
<ribbon:RibbonButton x:Name="QATButton2"
SmallImageSource="Icon.ico" />
</ribbon:RibbonQuickAccessToolBar>
</ribbon:Ribbon.QuickAccessToolBar>
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu SmallImageSource="Icon.ico">
<ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
x:Name="MenuItem1"
ImageSource="Icon.ico"/>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
<ribbon:RibbonButton x:Name="Button1"
LargeImageSource="Icon.ico"
Label="Button1" />
<ribbon:RibbonButton x:Name="Button2"
SmallImageSource="Icon.ico"
Label="Button2" />
<ribbon:RibbonButton x:Name="Button3"
SmallImageSource="Icon.ico"
Label="Button3" />
<ribbon:RibbonButton x:Name="Button4"
SmallImageSource="Icon.ico"
Label="Button4" />
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
</Grid>
</Window>
Produces something that looks like this:
Best Answer
Ill preface by saying I doubt this is the best way to do this.
This is my style for RibbonTab notice IsSelected is bound to IsSelected in The view model
This is view model code
In the constructor for the TabViewModel I take a parameter for the ViewModel of the content
Then I used an ItemsControl to display the selected content in my xaml
And the ContentControlTemplate I have is
Also make sure you have a datatemplate pointing your content to a view
Hope this helps.