Ich habe eine WPF-Anwendung implementiert, die das Ribbon-Steuerelement mit dem MVVM-Muster verwendet, aber mein Ansatz bestand darin, eine Reihe von Navigationsschnittstellen zu erstellen, an die ich die Multifunktionsleiste gebunden habe. Ich nutze auch das Styling der Ribbon-Elemente, um die Datenbindung zu kontrollieren, von der ich glaube, dass sie Ihnen helfen können, das zu erreichen, was Sie suchen.
Nachdem Sie Ihr Ribbon-Steuerelement an das Ansichtsmodell gebunden haben, können Sie Ihre Registerkarten und ihre untergeordneten Gruppen so auffüllen, dass die anzuzeigenden Bilder gerendert werden. Geben Sie dann den ICommand für das zu überwachende Ansichtsmodell an Eine Gruppe ist ausgewählt. Dieser Befehl würde eine Methode aufrufen, um das aktuelle Element der Sammlung festzulegen.
Ribbon Control Styles:
<Window.Resources>
<!-- RibbonMenuItem -->
<Style TargetType="{x:Type ribbon:RibbonMenuItem}">
<Setter Property="Header" Value="{Binding Header}" />
<Setter Property="ImageSource" Value="{Binding Image}" />
<Setter Property="ribbon:RibbonControlService.ToolTipTitle" Value="{Binding ToolTipTitle}" />
<Setter Property="ribbon:RibbonControlService.ToolTipDescription" Value="{Binding ToolTipDescription}" />
<Setter Property="ribbon:RibbonControlService.ToolTipImageSource" Value="{Binding ToolTipImage}" />
<Setter Property="ribbon:RibbonControlService.ToolTipFooterTitle" Value="{Binding ToolTipFooterTitle}" />
<Setter Property="ribbon:RibbonControlService.ToolTipFooterDescription" Value="{Binding ToolTipFooterDescription}" />
<Setter Property="ribbon:RibbonControlService.ToolTipFooterImageSource" Value="{Binding ToolTipFooterImage}" />
<Setter Property="KeyTipService.KeyTip" Value="{Binding KeyTip}" />
<Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="IsCheckable" Value="{Binding IsCheckable}" />
<Setter Property="IsChecked" Value="{Binding IsChecked}" />
<Setter Property="CanUserResizeVertically" Value="{Binding IsVerticallyResizable}" />
<Setter Property="CanUserResizeHorizontally" Value="{Binding IsHorizontallyResizable}" />
<Setter Property="ItemsSource" Value="{Binding Items}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Command}" Value="{x:Null}">
<Setter Property="Command" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding CommandParameter}" Value="{x:Null}">
<Setter Property="CommandParameter" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding Image}" Value="{x:Null}">
<Setter Property="ImageSource" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding ToolTipImage}" Value="{x:Null}">
<Setter Property="ribbon:RibbonControlService.ToolTipImageSource" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding ToolTipFooterImage}" Value="{x:Null}">
<Setter Property="ribbon:RibbonControlService.ToolTipFooterImageSource" Value="{x:Null}" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- RibbonSplitMenuItem -->
<Style TargetType="{x:Type ribbon:RibbonSplitMenuItem}" BasedOn="{StaticResource {x:Type ribbon:RibbonMenuItem}}">
<Setter Property="HeaderQuickAccessToolBarId" Value="{Binding Command}" />
<Setter Property="QuickAccessToolBarId" Value="{Binding DropDownButtonData.Command}" />
<Setter Property="HeaderKeyTip" Value="{Binding KeyTip}" />
<Setter Property="KeyTip" Value="{Binding DropDownButtonData.KeyTip}" />
<Setter Property="DropDownToolTipTitle" Value="{Binding DropDownButtonData.ToolTipTitle}" />
<Setter Property="DropDownToolTipDescription" Value="{Binding DropDownButtonData.ToolTipDescription}" />
<Setter Property="DropDownToolTipImageSource" Value="{Binding DropDownButtonData.ToolTipImage}" />
<Setter Property="DropDownToolTipFooterTitle" Value="{Binding DropDownButtonData.ToolTipFooterTitle}" />
<Setter Property="DropDownToolTipFooterDescription" Value="{Binding DropDownButtonData.ToolTipFooterDescription}" />
<Setter Property="DropDownToolTipFooterImageSource" Value="{Binding DropDownButtonData.ToolTipFooterImage}" />
<Style.Triggers>
<DataTrigger Binding="{Binding DropDownButtonData.ToolTipImage}" Value="{x:Null}">
<Setter Property="DropDownToolTipImageSource" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding DropDownButtonData.ToolTipFooterImage}" Value="{x:Null}">
<Setter Property="DropDownToolTipFooterImageSource" Value="{x:Null}" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- RibbonApplicationMenuItem -->
<Style TargetType="{x:Type ribbon:RibbonApplicationMenuItem}" BasedOn="{StaticResource {x:Type ribbon:RibbonMenuItem}}">
<Style.Triggers>
<Trigger Property="Level" Value="Middle">
<Setter Property="ImageSource" Value="{Binding Image}" />
<Setter Property="KeyTipService.KeyTip" Value="{Binding KeyTip}" />
<Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="Header" Value="{Binding Header}" />
</Trigger>
</Style.Triggers>
</Style>
<!-- RibbonApplicationSplitMenuItem -->
<Style TargetType="{x:Type ribbon:RibbonApplicationSplitMenuItem}" BasedOn="{StaticResource {x:Type ribbon:RibbonSplitMenuItem}}" />
<!-- RibbonTab -->
<Style TargetType="{x:Type ribbon:RibbonTab}">
<Setter Property="Header" Value="{Binding Header}" />
<Setter Property="ItemsSource" Value="{Binding Groups}" />
</Style>
<!-- RibbonGroupItem -->
<Style TargetType="{x:Type ribbon:RibbonButton}" x:Key="RibbonGroupItemButton">
<Setter Property="Label" Value="{Binding Label}" />
<Setter Property="LargeImageSource" Value="{Binding LargeImage}" />
<Setter Property="SmallImageSource" Value="{Binding SmallImage}" />
<Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
<Setter Property="Command" Value="{Binding Command}" />
<Style.Triggers>
<DataTrigger Binding="{Binding LargeImage}" Value="{x:Null}">
<Setter Property="LargeImageSource" Value="{x:Null}" />
</DataTrigger>
<DataTrigger Binding="{Binding SmallImage}" Value="{x:Null}">
<Setter Property="SmallImageSource" Value="{x:Null}" />
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate DataType="{x:Type ribbon:RibbonControl}" x:Key="RibbonGroupItemTemplate">
<ribbon:RibbonButton Style="{StaticResource RibbonGroupItemButton}" />
</DataTemplate>
<!-- RibbonGroup -->
<Style TargetType="{x:Type ribbon:RibbonGroup}">
<Setter Property="Header" Value="{Binding Header}" />
<Setter Property="ItemsSource" Value="{Binding Items}" />
<Setter Property="ItemTemplate" Value="{StaticResource RibbonGroupItemTemplate}" />
</Style>
</Window.Resources>
von der View-Modell ausgesetzt Eigenschaften (Datenbindung):
#region MenuItems
/// <summary>
/// Gets the application menu items.
/// </summary>
/// <value>
/// A <see cref="SelectableObservableCollection{IMenuItem}"/> that contains
/// the application menu items. The default value is an <i>empty</i> collection.
/// </value>
public SelectableObservableCollection<IMenuItem> MenuItems
{
get
{
if (_viewModelMenuItems == null)
{
_viewModelMenuItems = new SelectableObservableCollection<IMenuItem>();
}
return _viewModelMenuItems;
}
}
private SelectableObservableCollection<IMenuItem> _viewModelMenuItems;
#endregion
#region Tabs
/// <summary>
/// Gets the application navigation tabs.
/// </summary>
/// <value>
/// A <see cref="SelectableObservableCollection{INavigationTab}"/> that contains
/// the application navigation tabs. The default value is an <i>empty</i> collection.
/// </value>
public SelectableObservableCollection<INavigationTab> Tabs
{
get
{
if (_viewModelTabs == null)
{
_viewModelTabs = new SelectableObservableCollection<INavigationTab>();
}
return _viewModelTabs;
}
}
private SelectableObservableCollection<INavigationTab> _viewModelTabs;
#endregion
anzeigen (Ribbon XAML):
<ribbon:Ribbon Grid.Row="0" ItemsSource="{Binding Path=Tabs}">
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu
Margin="0, 5, 0, 0"
LargeImageSource="/MyApp;component/Resources/Images/ApplicationMenu.png"
SmallImageSource="/MyApp;component/Resources/Icons/ApplicationMenu.png"
ItemsSource="{Binding Path=MenuItems}"
>
<ribbon:RibbonApplicationMenu.FooterPaneContent>
<DockPanel LastChildFill="False">
<ribbon:RibbonButton
DockPanel.Dock="Right" Margin="2" BorderBrush="#B8114EAF"
Command="{Binding Path=Shutdown}"
Label="Exit" ToolTipTitle="Quit application" KeyTip="X"
SmallImageSource="/MyApp;component/Resources/Icons/Exit.png" />
</DockPanel>
</ribbon:RibbonApplicationMenu.FooterPaneContent>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
</ribbon:Ribbon>
Navigation Schnittstellen:
public interface IMenuItem : ICloneable, INotifyPropertyChanged, INotifyPropertyChanging
{
#region Command
/// <summary>
/// Gets or sets the command associated with the menu item.
/// </summary>
/// <value>
/// The <see cref="ISurrogateCommand"/> associated with the menu item.
/// </value>
ISurrogateCommand Command
{
get;
set;
}
#endregion
#region CommandParameter
/// <summary>
/// Gets or sets the parameter to pass to the command associated with the menu item.
/// </summary>
/// <value>
/// The parameter to pass to the <see cref="Command"/> associated with the menu item.
/// </value>
object CommandParameter
{
get;
set;
}
#endregion
#region Header
/// <summary>
/// Gets or sets the item that labels the menu item.
/// </summary>
/// <value>
/// The item that labels the menu item.
/// </value>
object Header
{
get;
set;
}
#endregion
#region Image
/// <summary>
/// Gets or sets the image that is displayed on the menu item.
/// </summary>
/// <value>
/// The <see cref="ImageSource"/> that is displayed on the menu item.
/// </value>
ImageSource Image
{
get;
set;
}
#endregion
#region IsCheckable
/// <summary>
/// Gets or sets a value that indicates whether the menu item can be checked.
/// </summary>
/// <value>
/// <see langword="true"/> if the menu item can be checked; otherwise, <see langword="false"/>.
/// </value>
bool IsCheckable
{
get;
set;
}
#endregion
#region IsChecked
/// <summary>
/// Gets or sets a value that indicates whether the menu item is checked.
/// </summary>
/// <value>
/// <see langword="true"/> if the menu item is checked; otherwise, <see langword="false"/>.
/// </value>
bool IsChecked
{
get;
set;
}
#endregion
#region IsHorizontallyResizable
/// <summary>
/// Gets or sets a value that indicates whether the menu item can be resized horizontally.
/// </summary>
/// <value>
/// <see langword="true"/> if the menu item can be resized horizontally; otherwise, <see langword="false"/>.
/// </value>
bool IsHorizontallyResizable
{
get;
set;
}
#endregion
#region IsVerticallyResizable
/// <summary>
/// Gets or sets a value that indicates whether the menu item can be resized vertically.
/// </summary>
/// <value>
/// <see langword="true"/> if the menu item can be resized vertically; otherwise, <see langword="false"/>.
/// </value>
bool IsVerticallyResizable
{
get;
set;
}
#endregion
#region Items
/// <summary>
/// Gets the child menu items for the menu item.
/// </summary>
/// <value>
/// A <see cref="SelectableObservableCollection{IMenuItem}"/> collection that contains the child menu items for the menu item.
/// </value>
SelectableObservableCollection<IMenuItem> Items
{
get;
}
#endregion
#region KeyTip
/// <summary>
/// Gets or sets the text to use for the menu item key tip.
/// </summary>
/// <value>
/// The text to use for the menu item key tip.
/// </value>
string KeyTip
{
get;
set;
}
#endregion
#region ToolTipDescription
/// <summary>
/// Gets or sets the description for the menu item tooltip.
/// </summary>
/// <value>
/// The description for the menu item tooltip.
/// </value>
string ToolTipDescription
{
get;
set;
}
#endregion
#region ToolTipFooterDescription
/// <summary>
/// Gets or sets the description for the menu item tooltip footer.
/// </summary>
/// <value>
/// The description for the menu item tooltip footer.
/// </value>
string ToolTipFooterDescription
{
get;
set;
}
#endregion
#region ToolTipFooterImage
/// <summary>
/// Gets or sets the image for the menu item tooltip footer.
/// </summary>
/// <value>
/// The <see cref="ImageSource"/> for the menu item tooltip footer.
/// </value>
ImageSource ToolTipFooterImage
{
get;
set;
}
#endregion
#region ToolTipFooterTitle
/// <summary>
/// Gets or sets the title for the menu item tooltip footer.
/// </summary>
/// <value>
/// The title for the menu item tooltip footer.
/// </value>
string ToolTipFooterTitle
{
get;
set;
}
#endregion
#region ToolTipImage
/// <summary>
/// Gets or sets the image for the menu item tooltip.
/// </summary>
/// <value>
/// The <see cref="ImageSource"/> for the menu item tooltip.
/// </value>
ImageSource ToolTipImage
{
get;
set;
}
#endregion
#region ToolTipTitle
/// <summary>
/// Gets or sets the title for the menu item tooltip.
/// </summary>
/// <value>
/// The title for the menu item tooltip.
/// </value>
string ToolTipTitle
{
get;
set;
}
#endregion
}
public interface INavigationTab : ICloneable, INotifyPropertyChanged, INotifyPropertyChanging
{
#region Groups
/// <summary>
/// Gets the groups for the navigation tab.
/// </summary>
/// <value>
/// A <see cref="SelectableObservableCollection{INavigationTabGroup}"/> collection that contains
/// the navigation groups for the navigation tab.
/// </value>
SelectableObservableCollection<INavigationTabGroup> Groups
{
get;
}
#endregion
#region Header
/// <summary>
/// Gets or sets the item that labels the navigation tab.
/// </summary>
/// <value>
/// The item that labels the navigation tab.
/// </value>
object Header
{
get;
set;
}
#endregion
}
public interface INavigationTabGroup : ICloneable, INotifyPropertyChanged, INotifyPropertyChanging
{
#region Header
/// <summary>
/// Gets or sets the item that labels the navigation tab group.
/// </summary>
/// <value>
/// The item that labels the navigation tab group.
/// </value>
object Header
{
get;
set;
}
#endregion
#region Items
/// <summary>
/// Gets the items for the navigation tab group.
/// </summary>
/// <value>
/// A <see cref="SelectableObservableCollection{INavigationTabGroupItem}"/> collection that contains
/// the navigation items for the navigation tab group.
/// </value>
SelectableObservableCollection<INavigationTabGroupItem> Items
{
get;
}
#endregion
}
public interface INavigationTabGroupItem : ICloneable, INotifyPropertyChanged, INotifyPropertyChanging
{
#region Command
/// <summary>
/// Gets or sets the command associated with the navigation tab group item.
/// </summary>
/// <value>
/// The <see cref="ISurrogateCommand"/> associated with the navigation tab group item.
/// </value>
ISurrogateCommand Command
{
get;
set;
}
#endregion
#region CommandParameter
/// <summary>
/// Gets or sets the parameter to pass to the command associated with the navigation tab group item.
/// </summary>
/// <value>
/// The parameter to pass to the <see cref="Command"/> associated with the navigation tab group item.
/// </value>
object CommandParameter
{
get;
set;
}
#endregion
#region Label
/// <summary>
/// Gets or sets the item that labels the navigation tab group item.
/// </summary>
/// <value>
/// The item that labels the navigation tab group item.
/// </value>
object Label
{
get;
set;
}
#endregion
#region LargeImage
/// <summary>
/// Gets or sets the large image that is displayed by the navigation tab group item.
/// </summary>
/// <value>
/// The <see cref="ImageSource"/> that represents the large image that is displayed
/// by the navigation tab group item.
/// </value>
ImageSource LargeImage
{
get;
set;
}
#endregion
#region SmallImage
/// <summary>
/// Gets or sets the small image that is displayed by the navigation tab group item.
/// </summary>
/// <value>
/// The <see cref="ImageSource"/> that represents the small image that is displayed
/// by the navigation tab group item.
/// </value>
ImageSource SmallImage
{
get;
set;
}
#endregion
}
Hier ist ein Beispiel für das View-Modell seiner Tabs Sammlung bevölkern:
private void AddTabs()
{
INavigationTab homeTab = new NavigationTab(Properties.Resources.Shell_Tab_Home_Header);
INavigationTabGroup generalGroup = new NavigationTabGroup(Properties.Resources.Shell_TabGroup_General_Header);
generalGroup.Items.Add(
new NavigationTabGroupItem
{
Label = Properties.Resources.Shell_StartPage_Header,
LargeImage = GetImage("/MyApp;component/Resources/Images/Home.png"),
CommandParameter = this,
Command = this.DisplayStartPage
}
);
generalGroup.Items.Add(
new NavigationTabGroupItem
{
Label = Properties.Resources.Shell_Settings_Header,
SmallImage = GetImage("/MyApp;component/Resources/Icons/Settings.png")
}
);
generalGroup.Items.Add(
new NavigationTabGroupItem
{
Label = Properties.Resources.Shell_UserInformation_Header,
SmallImage = GetImage("/MyApp;component/Resources/Icons/UserInformation.png")
}
);
generalGroup.Items.Add(
new NavigationTabGroupItem
{
Label = Properties.Resources.Shell_About_Header,
SmallImage = GetImage("/MyApp;component/Resources/Icons/About.png"),
Command = this.AboutApplication
}
);
homeTab.Groups.Add(generalGroup);
this.Tabs.Add(homeTab);
}
Auch ich hatte anfangs einige Probleme Bildquellen zu binden, aber gefunden eine Lösung mit Freeze. Hier ein Beispiel:
// Build navigation tab
this.Tab = new NavigationTab(Properties.Resources.Module_Tab_Header);
var administrationImage = GetImage("/MyApp;component/Resources/Images/Administration.png");
administrationImage.Freeze();
INavigationTabGroup administrationGroup = new NavigationTabGroup(Properties.Resources.Module_TabGroup_Administration_Header);
administrationGroup.Items.Add(
new NavigationTabGroupItem
{
Label = Properties.Resources.Module_StartPage_Header,
LargeImage = administrationImage
}
);
/// <summary>
/// Gets an image resource in the assembly for the specified path.
/// </summary>
/// <param name="path">The relative path to the image resource.</param>
/// <returns>
/// The <see cref="System.Windows.Media.ImageSource"/> located at the specified <paramref name="path"/>.
/// </returns>
/// <example>
/// Path: <i>/MyAssembly;component/Resources/Icons/MyIcon.png</i>
/// </example>
protected static System.Windows.Media.ImageSource GetImage(string path)
{
return new System.Windows.Media.Imaging.BitmapImage(
new Uri(String.Format(null, "pack://application:,,,{0}", path))
);
}
Hope this Sie mit Ihrer verbindlichen Fragen hilft.
Während dies eine fantastische Antwort (+1) ist, bin ich nicht sicher, wie es mit meiner Anforderung passt. In meinem Fall habe ich eine Sammlung von Bildern, die ich in Buttons auf der Multifunktionsleiste zeigen möchte und im Hauptbereich des Fensters zeige ich eines dieser Bilder. Wenn der Benutzer auf eine der Schaltflächen klickt, möchte ich, dass das ausgewählte Bild im Hauptfenster angezeigt wird. Ich weiß nicht, wie viele Bilder es zu einem bestimmten Zeitpunkt geben wird und (derzeit) verwende ich nicht ICommand, um dies zu tun.Ich brauche nur den Klick auf den Button, um vom ListView-Steuerelement erkannt zu werden, so dass er auf dieselbe Weise auswählt, als würde ich das Bild einfach anzeigen. –