WPF data binding of a Ribbon control

Question

I have a working dynamic menu which is data bound to a hierarchical collection of items which are controlled by application dynamically. For reference below is WPF declaration:

        <Menu Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Actions}" Style="{StaticResource ResourceKey=dynamicMenu}">
       <Menu.Resources>
            <HierarchicalDataTemplate DataType="{x:Type wm:AppAction}" ItemsSource="{Binding Path=Items}">
                <HierarchicalDataTemplate.ItemContainerStyle>
                    <Style TargetType="MenuItem">
                        <Setter Property="IsCheckable" Value="{Binding IsCheckable}" />
                        <Setter Property="IsChecked" Value="{Binding IsChecked}" />
                        <Setter Property="Visibility" Value="{Binding Path=IsVisible, Converter={wc:BoolToCollapsedConverter}}"/>
                        <Setter Property="Command" Value="{Binding Command}" />
                        <Setter Property="Icon" Value="{Binding Image}" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Text}" Value="">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type MenuItem}">
                                            <Separator HorizontalAlignment="Stretch" IsEnabled="False"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </HierarchicalDataTemplate.ItemContainerStyle>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding ImageSource}" />
                    <TextBlock Text="{Binding Text}" />
                </StackPanel>
            </HierarchicalDataTemplate>
        </Menu.Resources>
    </Menu>

Now I would like to render this underlying menu structure using a Microsoft Ribbon control, initially structuring it using RibbonTab and RibbonGroup for level 0 and RibbonButton for level 1 (single group on each tab).

Unfortunately for some reason it does not show anything. Here is the declaration of what I've come with so far:

        <r:Ribbon Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="ribbon" Title="WPF Prototype App" ItemsSource="{Binding Actions}">
        <r:Ribbon.Resources>
            <DataTemplate DataType="{x:Type wm:AppAction}">
                <r:RibbonTab Header="{Binding Text}">
                    <r:RibbonGroup Header="{Binding Text}" ItemsSource="{Binding Actions}" Width="333">
                        <r:RibbonGroup.Resources>
                            <DataTemplate DataType="{x:Type wm:AppAction}">
                                <r:RibbonButton Label="{Binding Text}" LargeImageSource="{Binding ImageSource}"/>
                            </DataTemplate>
                        </r:RibbonGroup.Resources>
                    </r:RibbonGroup>
                </r:RibbonTab>
            </DataTemplate>
        </r:Ribbon.Resources>
    </r:Ribbon>

I have a feeling this might be something simple to solve. I tried using HierarchicalDataTemplate but there were errors about style for RibbonTab being applied to RibbonGroup.

Another related question would be: if AppAction object had a ribbon control style discriminator property (i.e. ControlStyle [Tab, Group, Button, CheckBox, ComboBox]), how easy would be to dynamically create appropriate control depending on the value of this property or is it even possible ? Or is it better for complex scenarios to just define parts of a ribbon in subsequent Views responsible for these tasks and just attach them when View is visible ?

Edit: Below are the contents of a simplified version of AppAction class:

    [ContentProperty("Items")]
public class AppAction: PropertyChangedBase
{
    public AppActionCollection Items { get; set; }

    ICommand command;
    public ICommand Command
    {
        get { return command; }
        set { CheckSet(ref command, value); }
    }

    string text;
    public string Text
    {
        get { return text; }
        set { CheckSet(ref text, value); }
    }

    Uri imageSource;
    public Uri ImageSource
    {
        get { return imageSource; }
        set { image = null; CheckSet(ref imageSource, value); NotifyOfPropertyChange(() => Image); }
    }

    public AppAction()
    {
        Items = new AppActionCollection();
    }
}

AppActionCollection simplified:

public class AppActionCollection: ObservableCollection<AppAction>
{
}

An example menu tree can be created by:

public class TestMenu
{
    AppActionCollection menu = new AppActionCollection();

    public TestMenu()
    {
        var m = new AppAction { Text = "File" };
        m.Items.Add(new AppAction { Text = "Open" });
        m.Items.Add(new AppAction { Text = "Save" });
        m.Items.Add(new AppAction { Text = "" });
        m.Items.Add(new AppAction { Text = "Exit", Command = ApplicationCommands.Close });
        menu.Add(m);

        m = new AppAction { Text = "Edit" };
        m.Items.Add(new AppAction { Text = "Copy" });
        m.Items.Add(new AppAction { Text = "Paste" });
        m.Items.Add(new AppAction { Text = "Cut" });
        m.Items.Add(new AppAction { Text = "Smile", Command = ApplicationCommands.Close });
        menu.Add(m);
    }
}

Answer 1

Sorry for delay, i was looking for solution to your problem, but unfortunately i didn't find. HierarchicalDataTemplate does't help you because the ribbon levels are not of the same type.

I think that the only way to solve your problem is to make new DataTemplate for each level. i know that this is not good solution, but i think that this is the only way. if you find better way please share your knowledge and tell me.

Note: in Menu situation you can use HierarchicalDataTemplate because there is one Type MenuItem.

Edit:

this what i reached to:

MainWindow.xaml.cs:

public ObservableCollection<AppAction> child
{
    get
    {
        ObservableCollection<AppAction> reVal = new ObservableCollection<AppAction>();
        reVal.Add(
            new AppAction() { Header = "File", Items = new ObservableCollection<AppAction>() { 
                new AppAction() { Header = "Font", Items = new ObservableCollection<AppAction>() { 
                    new AppAction() { Header = "Arial" }, 
                    new AppAction() { Header = "Segoe UI" }, 
                    new AppAction() { Header = "Tahoma" } } }, 
                new AppAction() { Header = "Other", Items = new ObservableCollection<AppAction>() { 
                    new AppAction() { Header = "Colse" } } } } });

        reVal.Add(
            new AppAction() { Header = "View", Items = new ObservableCollection<AppAction>() { 
                new AppAction() { Header = "A", Items = new ObservableCollection<AppAction>() { 
                    new AppAction() { Header = "AButton" } } }, 
                new AppAction() { Header = "B", Items = new ObservableCollection<AppAction>() { 
                    new AppAction() { Header = "BButton" } } }, 
                new AppAction() { Header = "C", Items = new ObservableCollection<AppAction>() { 
                    new AppAction() { Header = "CButton" } } } } });
        return reVal;
    }
}

and in MainWindow.xaml:

<Window x:Class="rebbon.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Name="wind">

    <Window.Resources>
        <DataTemplate x:Key="buttonTempl">
            <RibbonButton Label="{Binding Header}"/>
        </DataTemplate>
        <Style TargetType="RibbonGroup" x:Key="groupStyle">
            <Setter Property="Header" Value="{Binding Header}"/>
            <Setter Property="ItemsSource" Value="{Binding Items}"/>
            <Setter Property="ItemTemplate" Value="{StaticResource buttonTempl}"/>
        </Style>        
        <Style TargetType="RibbonTab" x:Key="tabStyle">
            <Setter Property="Header" Value="{Binding Header}"/>
            <Setter Property="ItemsSource" Value="{Binding Items}"/>
            <Setter Property="ItemContainerStyle" Value="{StaticResource groupStyle}"/>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Ribbon ItemContainerStyle="{StaticResource tabStyle}" ItemsSource="{Binding ElementName=wind, Path=child}"/>
    </Grid>
</Window>

Result:

I hope that this will help you.

I did my best.