Need Help on loading and controlling RadPanelBar programatically in MVVM mode

3 posts, 1 answers
  1. Vivek
    Vivek avatar
    33 posts
    Member since:
    Oct 2012

    Posted 23 Jan 2013 Link to this post

    Hi,

    I need help in loading and controlling RadPanelBar programatically in MVVM pattern start from loading the panelBarItems.
    I want to create a RadPanelBar which will have set of items and each item will have the ContentControl (loads an UserControl). I want to control the expand and selection of each item by set of buttons. Let me explain this briefly,

    my RadPanelBar has 3 items, each PanelBarItem loads an usercontrol. I should be able to control expand of these panelbar items by a listbox having 3 buttons i.e. 1st RadPanelBar item expands on 1st button click, 2nd item expands on 2nd button click etc.
    I should be able to do everything progrmatically i.e. even loading the panelbar items and List box items.

    I am attaching the XAML code i have used to achieve this, 
    <telerik:RadPanelBar x:Name="mybar" Width="830" Height="430" HorizontalAlignment="Left" Grid.Row="0" Focusable="False"
                                            VerticalAlignment="Stretch" BorderBrush="#FFCBD8E8" BorderThickness="1 1 0 1"                                       ExpandMode="Multiple" Margin="10,10,10,10" Background="Transparent"
                                            ItemsSource="{Binding PanelBarItemsList}"
                                            SelectedItem="{Binding PanelBarSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                             
                            <telerik:RadPanelBar.ItemTemplate>
                                <DataTemplate>
                                    <telerik:RadPanelBarItem x:Name="pnliTopic" IsSelected="{Binding IsSelectedValue, Mode=TwoWay}" IsExpanded="{Binding IsExpandedValue, Mode=TwoWay}" >
                                        <telerik:RadPanelBarItem.Header>
                                            <TextBlock Text="{Binding Name}"  />
                                        </telerik:RadPanelBarItem.Header>
                                        <ContentControl x:Name="View" Margin="10,10,10,10" Visibility="Visible"  HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Height="Auto"
                                                 Content="{Binding UserControlView}" />
                                    </telerik:RadPanelBarItem>
                                    </DataTemplate>
                            </telerik:RadPanelBar.ItemTemplate>
    </telerik:RadPanelBar>

    Here is the view model code,

    private ObservableCollection<ToolOption> m_PanelBarItems;
    public ObservableCollection<ToolOption> SettingsList
            {
                get { return m_PanelBarItems; }
                set
                {
                    m_PanelBarItems = value;
                }
            }
    Contructor()
    {
     m_PanelBarItems = new ObservableCollection<PanelBarItem>();
     foreach (string strTool in m_LocalCollection)
     {
       PanelBarItem  item= new ToolOption(strTool );
       m_PanelBarItems.Add(item);
     }
     m_PanelBarItems[0].IsExpandedvalue = true;
     m_PanelBarItems[0].IsSelectedValue = true;
     m_PanelBarItems[0].UserControlView = new UserControlView1();
     PanelBarSelected = m_PanelBarItems[0];
     m_PanelBarItems[0].UserControlView.Visibility = Visibility.Visible;
     this.OnPropertyChanged("PanelBarSelectTool");
    }
     public object PanelBarSelectTool { get; set; }
     
    //PanelBarItem Class definition
     
    public class PanelBarItem: INotifyPropertyChanged
        {
            public string Name { get; set; }
            private bool selected;
            private bool expanded;
            public System.Windows.Controls.ContentControl m_View = null;
            //private object m_View = null;
     
            public bool IsSelectedValue
            {
                get
                {
                    return selected;
                }
                set
                {
                    selected = value;
                    this.OnPropertyChanged("IsSelectedValue");
                }
            }
     
            public bool IsExpandedvalue
            {
                get
                {
                    return expanded;
                }
                set
                {
                    expanded = value;
                    this.OnPropertyChanged("IsExpandedvalue");
                }
            }
     
            public System.Windows.Controls.ContentControl UserControlView
            {
                get
                {
                    return m_View;
                }
                set
                {
                    if (m_View != value)
                    {
                        m_View = value;
                    }
                }
            }
     
            public PanelBarItem(string name)
            {
                this.Name = name;
                this.IsSelectedValue = false;
                this.IsExpandedvalue = false;
            }
     
            public event PropertyChangedEventHandler PropertyChanged;
            private void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }

    I hope you understand what i want to achieve.
    Let me know if you need more information.
  2. Vivek
    Vivek avatar
    33 posts
    Member since:
    Oct 2012

    Posted 27 Jan 2013 Link to this post

    Please let me know if you have problems in understanding my post. 
    I have simplified my issue by loading the Usercontrols statically.
    How can i expand/collapse and bring into view the RadPanelBar Item with respect to selected item in "Listbox" ? or How can I bring into view a Grid/Expander programatically? 

    Any help is appreciated. Thanks for your support.

    P.S: It should be MVVM pattern. Assume that Listbox entry name and RadPanelBar item name are same. 

    Thanks,
    Vivek
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 28 Jan 2013 Link to this post

    Hi Vivek,

    There are a few points you need to consider before implementing your scenario.

    Firstly, you need to keep in mind the the RadPanelBar control is designed to display hierarchical data. This means that its items are essentially HeaderedItemsControls. This is why the RadPanelBarItem exposes an Items and ItemsSource properties which you should use to create the children collection of the item. This tutorial describes how you can display a hierarchical business collection in the RadPanelBar.

    If your data isn't hierarchical, then you can create a Converter to convert it properly. This would mean that you have to define a HierarchicalDataTemplate for the RadPanelBar.ItemTemplate and pass a collection of business items as the ItemsSource of the template. In the attached solution, the business data that should be displayed by the RadPanelBar is a flat collection and I had to create a converter to display some of the business class members in the PanelBarItem.ItemsSource collection.

    Another important aspect you have to consider is the essence of MVVM. The main purpose of the pattern is to allow you to separate the UI layer from the business logic. This is why the ViewModels in an MVVM application shouldn't contain any visual elements as this would tightly couple them with the UI layer of the app. Instead, you should take advantage of the ItemTemplate/ItemTemplateSelector properties of the ItemsControls.

    In your scenario, instead of defining a ContentControl in the PanelBarItem class, it is better to define the ContentControl in the DataTemplate representing the child items. And in case you need to define different UserControls to represent the different items, then you can create a DataTemplateSelector and use it to apply different templates for each item.

    Please have this in mind while examining the sample solution I sent and let me know if it helps of if we can further assist you.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top