Custom Navigation content And items

[Ahmad]

Can i achieve this type of WPF navigation view in Telerik
With items having GroupBox above them with seperator.

[Stenly]

Hello Ahmad,

The RadNavigationView control does not support this behavior out-of-the-box, however, it could still be achieved by writing some custom code.

To do so, create a new class that derives from the RadNavigationView class and overrides the IsItemItsOwnContainerOverride method. If the type of the item parameter is RadNavigationViewItem return the base implementation of this method. Otherwise, return true. This will allow you to set custom elements inside the Items collection of the control, without them being wrapped in a RadNavigationView container.

The following code snippets show this suggestion's implementation:

public class CustomNavigationView : RadNavigationView
{
    protected override bool IsItemItsOwnContainerOverride(object item)
    {
        if (item is RadNavigationViewItem)
        {
            return base.IsItemItsOwnContainerOverride(item);
        }

        return true;
    }
}

The following snippet shows the custom RadNavigationView control with two user controls in its Items collection. These user controls hold some elements to show a scenario where the control is populated with not just RadNavigationViewItems:

<local:CustomNavigationView x:Name="customNavigationView"
                            IsPaneOpen="True"
                            PaneOpened="CustomNavigationView_PaneOpened"
                            PaneClosed="CustomNavigationView_PaneClosed">
    <telerik:RadNavigationView.Items>
        <!--The OnlineUserControl and OfflineUserControl hold several elements such as TextBlocks and separators-->
        <local:OnlineUserControl/>
        <telerik:RadNavigationViewItem Content="Parameters"/>
        <local:OfflineUserControl/>
        <telerik:RadNavigationViewItem Content="Offline Parameters"/>
    </telerik:RadNavigationView.Items>
</local:CustomNavigationView>

However, with this approach, the visibility of each element that is not of the RadNavigationViewItem type would have to be manually modified. To do so, the PaneOpened and PaneClosed events could be used to find and update the elements' visibility.

The following snippet shows the above suggestion of showing and hiding the OnlineUserControl and OfflineUserControl:

private void CustomNavigationView_PaneOpened(object sender, RoutedEventArgs e)
{
    foreach (var item in this.customNavigationView.Items)
    {
        if (item is OnlineUserControl)
        {
            (item as OnlineUserControl).Visibility = Visibility.Visible;
        }
        else if (item is OfflineUserControl)
        {
            (item as OfflineUserControl).Visibility = Visibility.Visible;
        }
    }
}

private void CustomNavigationView_PaneClosed(object sender, RoutedEventArgs e)
{
    foreach (var item in this.customNavigationView.Items)
    {
        if (item is OnlineUserControl)
        {
            (item as OnlineUserControl).Visibility = Visibility.Collapsed;
        }
        else if (item is OfflineUserControl)
        {
            (item as OfflineUserControl).Visibility = Visibility.Collapsed;
        }
    }
}

The produced result is as follows:

In addition, I have logged a new feature request about including a way to separate items. The request could be found at the following link:

NavigationView: Implement a separator item (telerik.com)

With this said, I have attached a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik