ItemContainerStyle error

2 posts, 0 answers
  1. yoochul
    yoochul avatar
    15 posts
    Member since:
    Feb 2014

    Posted 05 Oct 2014 Link to this post

    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));
                }
            }
        }


  2. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 07 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top