How do I force PanelBar to always have one item expanded?

[Joe]

I have a `RadPanelBar` bound to an `ItemsSource`.    I have it set to `SelectionMode` single.  And my view-model ensures that there is always a a selected item. 

But how do I force the Panel Bar to make the selected item always be expanded.   I do not want to allow the user to be allowed to ever collapse it. Is it a property I can set in the ItemContainerStyle? Something else?

At one point I tried binding the RadPanelBarItem.IsExpanded property to its `IsSelected` property.  But that didn't work.

<tk:RadPanelBar x:Name="PanelBar" BorderThickness="0"  
        Padding="0 3 0 0" 
        tk:AnimationManager.IsAnimationEnabled="True"
        SelectedItem="{Binding CurrentAnalysisCategory, Mode=TwoWay}"
        ItemsSource="{Binding AnalysisCategories}"
        VerticalContentAlignment="Stretch"
        VerticalAlignment="Stretch">


 <tk:RadPanelBar.Resources>
 <DataTemplate DataType="{x:Type avm:RoutinesVm}">
 <views:RoutinesPanel />
 </DataTemplate>
 <DataTemplate DataType="{x:Type avm:MeasurementsVm}">
 <views:MeasurementsPanel/>
 </DataTemplate>
<DataTemplate x:Key="ViewTemplate">
<ContentPresenter Content="{Binding}" />
 </DataTemplate>
 </tk:RadPanelBar.Resources>

 <tk:RadPanelBar.ItemTemplate>

<HierarchicalDataTemplate 
                ItemsSource="{Binding Data}"
				    ItemTemplate="{StaticResource ViewTemplate}">
			 <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</HierarchicalDataTemplate>


 </tk:RadPanelBar.ItemTemplate>

 <tk:RadPanelBar.ItemContainerStyle>
 <Style TargetType="{x:Type tk:RadPanelBarItem}">
                <Setter Property="Padding"                  Value="3"/>
                <Setter Property="VerticalAlignment"        Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="MinHeight"                Value="0"/>
                <Setter Property="BorderThickness"          Value="0"/>
                <Setter Property="MaxHeight"                Value="{Binding ElementName='Root', Path=MaxItemHeight}"/>
                <Setter Property="MaxWidth"                 Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type views:ScanImagePanel}}, Path=ActualWidth}"/>
                <Setter Property="tk:AnimationManager.AnimationSelector" Value="{StaticResource FastAnimator}"/>

            </Style>
 </tk:RadPanelBar.ItemContainerStyle>


 </tk:RadPanelBar>

[Dimitar]

Hi Joe,

There is a similar post for this. Could you try the solution there and see if it fits your case: PanelBar selected/collapsed in UI for WPF

I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Joe]

Hi Dimitar,

Unfortunately this solution did not work for me.   In fact it caused more problems.  Not only did my SelectedItem still not show expanded when the control first loaded (because the approach relied upon an event) but also the handler prevented any item from being collapsed, even if the RadPanelBar were set to ExpandMode="Single">  Once I clicked on a second item, they both showed as expanded.

It did help me find the solution though, so thank you..  I will detail how I fixed both problems here.

First, I fixed the first problem of showing the initially selected item as expanded (at load time) with some simple one-time logic when the control first loads.  This is the logic.  Just find the PanelBarItem for the current selection and expand it.

var sel = PanelBar.SelectedItem;
if (sel != null)
{
    var cont = PanelBar.ItemContainerGenerator.ContainerFromItem(sel);
    if (cont is RadPanelBarItem item)
        item.IsExpanded = true;

}

The trick was where to put that logic.  It did not work to put it in the PanelBar.Loaded handler.  In fact it prevented the control from even appearing at all!  It also did not work if I put it in the PanelBar.IsVisibleChanged handler.  I had to put it  in the constructor of the parent control that contains the PanelBar. and then use the Dispatcher to run it after everything loaded.  Like this (my parent control is named 'ScanImagePanel')

public ScanImagePanel()   // This control contains the PanelBar
{
    Dispatcher.BeginInvoke(
        DispatcherPriority.Loaded,   // Run at 'Loaded' priority
        new Action(() =>
        {
            var sel = PanelBar.SelectedItem;
            if (sel != null)
            {
                var cont = PanelBar.ItemContainerGenerator.ContainerFromItem(sel);
                if (cont is RadPanelBarItem item)
                    item.IsExpanded = true;

            }
        } ));      
  
    InitializeComponent();
}

Second, to solve the problem of always keeping the selection expanded, I used that PreviewCollapsed handler but on the RadPanelBarItem instead of on the RadPanelBar parent control.    First I put an EventSetter in the ItemContainerStyle

<tk:RadPanelBar.ItemContainerStyle>
    <Style TargetType="{x:Type tk:RadPanelBarItem}">
        <EventSetter Event="PreviewCollapsed" Handler="OnPanelBarItemCollapsed"/>
    </Style>
</tk:RadPanelBar.ItemContainerStyle>

Then in the setter, I marked the PreviewCollapsedEvent as handled if the item being collapsed happened to be the currently selected item.

    private void OnPanelBarItemCollapsed(object? sender, RadRoutedEventArgs e)
    {
        e.Handled = sender is RadPanelBarItem item && item.IsSelected;
    }

This appears to do the trick for me.  A lot of work.

[Dimitar]

Hi Joe, 

I am glad that you have found a solution for your case. Thanks for sharing it with the community. I have added some points to your Telerik account. 

Regards, 

Dimitar