DataBinding Ribbon Tabs

2 posts, 0 answers
  1. jed
    jed avatar
    9 posts
    Member since:
    Feb 2012

    Posted 08 Sep 2012 Link to this post

    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
  3. jed
    jed avatar
    9 posts
    Member since:
    Feb 2012

    Posted 09 Sep 2012 Link to this post

    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
Back to Top