ItemContainerStyle error

[yoochul]

http://stackoverflow.com/questions/15950458/wpf-data-binding-of-a-ribbon-control

WPF 4.5  Ribbon is ok.


but, RadRibbonView is error (error.jpg)

How fix error.


# Full source

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

    <Window.Resources>

        <DataTemplate x:Key="MyButtonTemplate">            
            <telerik:RadRibbonButton Text="{Binding Header}" Background="Beige" />
        </DataTemplate>
        
        <DataTemplate x:Key="MySplitButtonTemplate">
            <telerik:RadRibbonSplitButton Text="{Binding Header}" Background="Yellow" />
        </DataTemplate>
        
        <DataTemplate x:Key="buttonTempl">
            <ContentControl x:Name="cc" Content="{Binding}"  ContentTemplate="{DynamicResource MySplitButtonTemplate}" />
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Items.Count}" Value="0">
                    <Setter TargetName="cc" Property="ContentTemplate" Value="{DynamicResource MyButtonTemplate}"/>
                </DataTrigger>      
            </DataTemplate.Triggers>
        </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>

        <Style TargetType="telerik:RadRibbonGroup" x:Key="groupStyleForRad">
            <Setter Property="Header" Value="{Binding Header}"/>
            <Setter Property="ItemsSource" Value="{Binding Items}"/>
            <Setter Property="ItemTemplate" Value="{StaticResource buttonTempl}"/>
        </Style>
        <Style TargetType="telerik:RadRibbonTab" x:Key="tabStyleForRad">
            <Setter Property="Header" Value="{Binding Header}"/>
            <Setter Property="ItemsSource" Value="{Binding Items}"/>
            <Setter Property="ItemContainerStyle" Value="{StaticResource groupStyleForRad}"/>
        </Style>
    </Window.Resources>

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

        <Ribbon ItemContainerStyle="{StaticResource tabStyle}" ItemsSource="{Binding ElementName=wind, Path=child}"/>
        <!--<telerik:RadRibbonView Grid.Row="1" ItemContainerStyle="{StaticResource tabStyleForRad}" ItemsSource="{Binding ElementName=wind, Path=child}"/>-->
    </Grid>

</Window>

==================

/// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        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", Items = new ObservableCollection<AppAction> () {
                            new AppAction() { Header = "..." }
                        } }, 
                    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;
            }
        }
    }

    public class AppAction : INotifyPropertyChanged
    {
        public ObservableCollection<AppAction> Items { get; set; }

        string header;
        public string Header
        {
            get { return header; }
            set { header = value; OnPropertyChanged("Header"); }
        }

        public AppAction()
        {
            Items = new ObservableCollection<AppAction>();
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }

[Kiril Vandov]

Hello Yoochul,

There are few ways that you can populate the Items of the RadRibbonView hierarchically:
- using ItemContainerStyle, like you did. In this case due to the hierarchical nature of the control you need to set the ItemContainerStyle of your "groupStyleForRad" style  to null, in order to stop the template from propagating to its children.

<Style TargetType="telerik:RadRibbonGroup" x:Key="groupStyleForRad">
          <Setter Property="ItemContainerStyle" Value="{x:Null}" />
...

- using implicit styles and directly bind the ItemsSource properties without ItemContainerStyle;
- using HierarchicalDataTemplates, you can find such implementation in our online MVVM ribbon demo;

I hope this information helps. Please let us know if you need further assistance.

Kind regards,
Kiril Vandov
Telerik