This is a migrated thread and some comments may be shown as answers.

DataBinding Ribbon Tabs

1 Answer 160 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
jed
Top achievements
Rank 1
jed asked on 08 Sep 2012, 09:55 AM
Hi

I have the following simple Objects (Tablist):

class tabObject
  
{
       public string Header { set; get; }
   }

class
tabsObjects
   {
       public string Header { set; get; }
       private List<tabObject> _tabs = new List<tabObject>();
       public tabsObjects()
       {
           _tabs.Add(new tabObject { Header = "Tab1" });
           _tabs.Add(new tabObject { Header = "Tab2" });
           _tabs.Add(new tabObject { Header = "Tab3" });
       }
       public List<tabObject> Tabs
       {
           get { return _tabs; }
           set { _tabs = value; }
       }
   }

my xaml:

<Window x:Class="RibbonTest.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"
                xmlns:code="clr-namespace:RibbonTest"
                Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <code:tabsObjects/>
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate DataType="{x:Type code:tabObject}">
            <telerik:RadRibbonTab Header="{Binding Path=Header}">
                <telerik:RadRibbonGroup Header="Group1">
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Group2">
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Group3">
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <telerik:RadRibbonView VerticalAlignment="Top" ItemsSource="{Binding Tabs}">
        </telerik:RadRibbonView>
    </Grid>
</Window>

the result is attached, as you see the 3 Tabs were generated as expected, but the RibbonGroups are missing.

In the DesignView i get an Exception if i click in the line <telerik:RadRibbonTab Header="{Binding Path=Header}"> or </telerik:RadRibbonTab> the Designer crashes with this Exception: ArgumentException: Property Items not found in the property collection

has anyone an idea whats missing or wrong?

Thanks in advance

unfortunately attaching the project is not allowed

1 Answer, 1 is accepted

Sort by
0
jed
Top achievements
Rank 1
answered on 09 Sep 2012, 08:20 AM
finaly found the Solution.. had to think another way:

class groupObject : INotifyPropertyChanged
    {
        private string _header;
        public string Header
        {
            set
            {
                _header = value;
                RaisePropertyChanged("Header");
            }
            get { return _header; }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
 
class tabObject
    {
        public string Header { set; get; }
        private ObservableCollection<groupObject> _groups = new ObservableCollection<groupObject>();
        public ObservableCollection<groupObject> Groups
        {
            get { return _groups; }
            set
            {
                _groups = value;
            }
        }
    }
 
 class tabsObjects
    {
        public string Header { set; get; }
        public List<tabObject> _tabs = new List<tabObject>();
        public tabsObjects()
        {
            _tabs.Add(new tabObject { Header = "Tab1", Groups = new ObservableCollection<groupObject>() { new groupObject { Header = "Group 1" }, new groupObject { Header = "Group 2" }, new groupObject { Header = "Group 3" } } });
            _tabs.Add(new tabObject { Header = "Tab2", Groups = new ObservableCollection<groupObject>() { new groupObject { Header = "Group 1" }, new groupObject { Header = "Group 3" } } });
            _tabs.Add(new tabObject { Header = "Tab3", Groups = new ObservableCollection<groupObject>() { new groupObject { Header = "Group 1" }, new groupObject { Header = "Group 7" }, new groupObject { Header = "Group 8" } } });
        }
        public List<tabObject> Tabs
        {
            get { return _tabs; }
        }
    }

xaml very simple, no DataTemplates needed:

<Window xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"  x:Class="WpfApplication1.MainWindow"
        xmlns:code="clr-namespace:RibbonTest"
        Title="MainWindow" Height="350" Width="525" x:Name="mainWindow">
     
    <Window.DataContext>
        <code:tabsObjects/>
    </Window.DataContext>
     
    <Window.Resources>
        <!-- RibbonTab -->
        <Style TargetType="{x:Type my:RibbonTab}">
            <Setter Property="Header" Value="{Binding Header}" />
            <Setter Property="ItemsSource" Value="{Binding Groups}" />
        </Style>
        <!-- RibbonGroup -->
        <Style TargetType="{x:Type my:RibbonGroup}">
            <Setter Property="Header" Value="{Binding Header}" />
        </Style>
    </Window.Resources>
     
    <DockPanel LastChildFill="True">
        <my:Ribbon DockPanel.Dock="Top" ItemsSource="{Binding Tabs}"/>
        <ContentControl/>
    </DockPanel>
</Window>

INotifyPropertyChanged works fine

very good MVVM Example for Ribbon Binding in this Sample: http://www.microsoft.com/en-us/download/details.aspx?id=11877
Tags
RibbonView and RibbonWindow
Asked by
jed
Top achievements
Rank 1
Answers by
jed
Top achievements
Rank 1
Share this question
or