PanelBar Display Issue

[Jonathan]

I am using the PanelBar to display a two level hierarchy of menu items (Menu Sections and Menu Items). I am using a DataTemplate for the menu items and a HierarchicalDataTemplate for the root collection of menu sections. The binding is all working correctly. My problem arose when I attempted to make use of the SelectedItem Property on the PanelBar. When I bound the property to my view model (using either TwoWay or OneWayToSource) when expanding or collapsing the headers, a red border appears around the PanelBar. The animation becomes a little sluggish as well but I can live with that.

If I select one of the items the red border disappears - it will re-appear if I expand or collapse the header.  If I simply remove the binding or set the binding to OneWay the red border does no appear.

With the binding set to TwoWay or OneWayToSource the view model is updated correctly. Any other binding mode results in no update of the view model.

The appearance of the red border will be unacceptable to my client and I would really appreciate any help with how I can get it so stop appearing.

Here are snippets of my XAML:

01.<!-- Menu Item Data Template -->
02.<DataTemplate DataType="{x:Type entities:MenuItemModel}">
03.    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
04.        <StackPanel.ToolTip>
05.            <TextBlock Text="{Binding MenuItemDescription}"
06.                           HorizontalAlignment="Stretch" />
07.        </StackPanel.ToolTip>
08.        <TextBlock Text="{Binding MenuItemText}" HorizontalAlignment="Stretch"/>
09.    </StackPanel>
10.</DataTemplate>
11.
12.<!-- Menu Section Data Template -->
13.<HierarchicalDataTemplate DataType="{x:Type entities:MenuSectionModel}"
14.                          ItemsSource="{Binding MenuItems}">
15.    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
16.        <StackPanel.ToolTip>
17.            <TextBlock Text="{Binding MenuSectionDescription}"
18.                          HorizontalAlignment="Stretch" />
19.        </StackPanel.ToolTip>
20.        <Image Source="{Binding IconData, Converter={StaticResource StrToImgConverter}}"
21.                        Height="32" Width="32"/>
22.        <TextBlock Text="{Binding MenuSectionText}"
23.                    VerticalAlignment="Center" HorizontalAlignment="Stretch"
24.                      Margin="6,0,0,0"/>
25.    </StackPanel>
26.</HierarchicalDataTemplate>
27....
28.<telerik:RadPane Header="{Binding ApplicationData.ApplicationName, Mode=OneWay}"
29.     CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" >
30.    <telerik:RadPanelBar Height="Auto" HorizontalAlignment="Stretch"
31.         ExpandMode="Multiple"
32.             ItemsSource="{Binding ApplicationData.ApplicationMenu.MenuSections}"
33.             SelectionMode="Single"
34.             SelectedItem="{Binding SelectedMenuItem, Mode=OneWayToSource}">
35.     </telerik:RadPanelBar>
36.</telerik:RadPane>

[Petar Mladenov]

Hello Jonathan,

We tried to reproduce this in an isolated project but we did not succeed. Furthermore , we saw your RadPanelBar is in RadPane. Could you please confirm the red border is not a visual child of other control, different than RadPanelBar ? You can check this with some wpf inspection tools - WPF Inspector, XAML Spy, etc. If the border is in the Template of the RadPanelBar - do you have any customs styles / templates applied ? Are you able to reproduce the red border issue when the application consist of single RadPanelBar ? If yes, can you send us its XAML ? Thank you in advance for your cooperation.

Regards,
Petar Mladenov
Telerik

 

 

[Jonathan]

Petar,

Thanks for your attempt to recreate the issue. I started looking into the debug output and found the following:

01.System.Windows.Data Error: 23 : Cannot convert 'MenuSectionId=1...'
02.from type 'MenuSectionModel' to type 'MenuItemModel' for 'en-US' culture with default
03.conversions;
04.consider using Converter property of Binding.
05.NotSupportedException:'System.NotSupportedException: TypeConverter cannot convert
06.from MenuSectionModel.
07.   at System.ComponentModel.TypeConverter.GetConvertFromException(Object value)
08.   at System.ComponentModel.TypeConverter.ConvertFrom(ITypeDescriptorContext context,
09.    CultureInfo culture, Object value)
10.   at MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o,
11.    Type destinationType, DependencyObject targetElement, CultureInfo culture,
12.    Boolean isForward)'
13....
14.System.Windows.Data Error: 7 : ConvertBack cannot convert value 'MenuItems=...'
15. (type 'MenuSectionModel'). BindingExpression:Path=SelectedMenuItem;
16.  DataItem='MainWindowViewModel' (HashCode=12291287);
17.  target element is 'RadPanelBar' (Name=''); target property is
18.   'SelectedItem' (type 'Object')
19.    NotSupportedException:'System.NotSupportedException: TypeConverter cannot convert
20.    from MenuSectionModel.
21.   at MS.Internal.Data.DefaultValueConverter.ConvertHelper(Object o,
22.   Type destinationType, DependencyObject targetElement, CultureInfo culture,
23.   Boolean isForward)
24.   at MS.Internal.Data.DefaultValueConverter.ConvertFrom(Object o,
25.   Type destinationType, DependencyObject targetElement, CultureInfo culture)
26.   at MS.Internal.Data.ObjectTargetConverter.ConvertBack(Object o, Type type,
27.   Object parameter, CultureInfo culture)
28.   at System.Windows.Data.BindingExpression.ConvertBackHelper(IValueConverter
29.   converter, Object value, Type sourceType, Object parameter, CultureInfo culture)'

I made the mistake of making the ViewModel to which I bound the SelectedItem event a concrete type and the element at different levels of my hierarchy are not of the same type (expanding panels are MenuSectionModel and items are MenuItemModel).  I made my ViewModel property of type MenuItemModel and this was causing the type conversion error and resulted in my model validaiton causing the border color change.

I have corrected the issue by changing my SelectedItem binding property to type object. Is there a more elegant way I could handle the situation - a converter is not really relevant as the two types do not technically have a conversion (I mean unless there is a way to hack a converter so that I can have a concrete type for my parameter)?
​

[Jonathan]

Correction:
"I made the mistake of making the ViewModel to which I bound the SelectedItem property" - not event as I stated in my last post

[Petar Mladenov]

Hello Jonathan,

You can make the MenuSectionModel and MenuItemModel inherit from Telerik.Windows.Controls.ViewModelBase (which implements INotifyPropertyChanged interface). The the SelectedItem could be also of type ViewModelBase. I think this is more elegant than using object.

Regards,
Petar Mladenov
Telerik