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,
Here is the view model code,
I hope you understand what i want to achieve.
Let me know if you need more information.
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 definitionpublic 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 Answers, 1 is accepted
0
Vivek
Top achievements
Rank 2
Rank 2
answered on 28 Jan 2013, 05:59 AM
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
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
0
Accepted
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
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.