Custom Navigation content And items

1 Answer 54 Views
NavigationView (Hamburger Menu)
Ahmad
Top achievements
Rank 1
Ahmad asked on 31 Aug 2022, 08:24 PM

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

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 05 Sep 2022, 04:12 PM

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

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Tags
NavigationView (Hamburger Menu)
Asked by
Ahmad
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or