Load different user control or page present in different module(application) on Navigation View item click using MVVM with Prism

[Nilesh]

Hi Team,

     I am very new to WPF world and we are designing an application which will be having multiple menus and sub menus. As the application is bigger and having lot more functionality we are using Modular approach defined by PRISM along with complete use of MVVM(zero code behind). We are using Telerik controls for rich UI and for design of the Menu we are using Navigation View(Hamburger Menu). While designing such architecture we are facing many issues as follows:

1. How to bind command to the Navigation View Item events for MVVM prism architecture? I have tried many ways to achieve this but no success(Approaches are mentioned below the questions).

2. How to navigate and load different pages or user control on click of the Navigation View Items as our pages or user controls are present in separate application?(PRISM Modular approach)

3. Want to load this contents in ContentControl Prism Region Manager at runtime.

I have gone through the documentation of Rad Navigation View but not found any ways to achieve the above issues.

Below is the approach we tried to bind command.

1. Approach One :  Tried setting in Style with property setter at both ItemStyle and ItemBaseStyle but both are not working.

<p><UserControl.Resources><br>        <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" /><br>        <telerik:NullToVisibilityConverter x:Key="NullToVisibilityConverter" /><br>        <Style x:Key="ItemPreviewStyle" TargetType="telerik:RadNavigationViewItem"><br>            <Setter Property="IconTemplate"><br>                <Setter.Value><br>                    <DataTemplate><br>                        <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}"<br>                                          HorizontalAlignment="Center" VerticalAlignment="Center"/><br>                    </DataTemplate><br>                </Setter.Value><br>            </Setter><br>        </Style></p><p>        <Style x:Key="ItemBaseStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource ItemPreviewStyle}"><br>            <Setter Property="Content" Value="{Binding Title}" /><br>            <Setter Property="ItemsSource" Value="{Binding SubItems}"/><br>            <Setter Property="Icon" Value="{Binding Icon}" /><br>            <Setter Property="IconVisibility" Value="{Binding Icon, Converter={StaticResource NullToVisibilityConverter}}"/><br>            </Style><br>        <Style x:Key="ItemStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource ItemBaseStyle}">            <Setter Property="ItemContainerStyle" Value="{StaticResource ItemBaseStyle}"/><br>            <Setter Property="CommandTarget" Value="{Binding ElementName=RadTimeline}"/><br>            <Setter Property="Command" Value="{Binding NavigateCommand}"/><br>            <Setter Property="CommandParameter" Value="{Binding Title}"/></p><p></Style></p><p>        <DataTemplate x:Key="TransitionControlContentTemplate"></p><p><TextBlock Text="{Binding Title}" FontSize="40"></TextBlock></p><p></DataTemplate><br>    </UserControl.Resources></p>

2. Approach Two : Tried with Telerik event Command Behavior Event Bindings. 

<telerik:EventToCommandBehavior.EventBindings><br>                <telerik:EventBinding Command="{Binding NavigateCommand}" EventName="MouseLeftButtonDown" CommandTarget="{Binding Title}"/><br>            </telerik:EventToCommandBehavior.EventBindings>

3. Tried in Telerik radNavigationView.Item it is also not working

<telerik:RadNavigationView.Items><br>                <telerik:RadNavigationViewItem Command="{Binding NavigateCommand}"CommandParameter="{Binding Title}"><br>                </telerik:RadNavigationViewItem><br>            </telerik:RadNavigationView.Items>

We are able to show the static value like title with the below code : 

<p><telerik:RadNavigationView ItemsSource="{Binding Items}" x:Name="RadTimeline" BorderBrush="LightGreen" BorderThickness="1"<br>                                   ItemContainerStyle="{StaticResource ItemStyle}" ScrollViewer.CanContentScroll="True" ><br>            <br>            <telerik:EventToCommandBehavior.EventBindings><br>                <telerik:EventBinding Command="{Binding NavigateCommand}" EventName="MouseLeftButtonDown" CommandTarget="{Binding Title}"/><br>            </telerik:EventToCommandBehavior.EventBindings>            </p><p><telerik:RadNavigationView.Content><br>                <telerik:RadTransitionControl Content="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType=telerik:RadNavigationView}}" ContentTemplate="{StaticResource TransitionControlContentTemplate}" Foreground="Black" Duration="0:0:0.4"><br>                    <telerik:RadTransitionControl.Transition><br>                        <telerik:FadeTransition /><br>                    </telerik:RadTransitionControl.Transition><br>                </telerik:RadTransitionControl><br>            </telerik:RadNavigationView.Content></p><p></telerik:RadNavigationView></p>

But instead of the RadNavigation View Content we wanted to use Content Control to load dynamic controls using MVVM and Prism like this.

<ContentControl prism:RegionManager.RegionName="ContentRegion" Margin="1,3,3,3"><br>            </ContentControl>

Below is my ViewModel Code.

P<code style="color: rgb(0, 0, 0);">ublic class MenuControlViewModel : BindableBase<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>    {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        private readonly IRegionManager _regionManager;<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        private List<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">> items;<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        public List<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">> Items<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            get<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                return this.items;<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            set<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                if (this.items != value)<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                    this.items = value;<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        public MenuControlViewModel(IRegionManager regionManager)<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            _regionManager = regionManager;<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            this.items = this.GetItems();<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            NavigateCommand = new DelegateCommand<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">string</code><code style="color: rgb(0, 0, 0);">>(Navigate);<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        private void Navigate(string navigatePath)<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            if (navigatePath != null)<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                _regionManager.RequestNavigate("ContentRegion", navigatePath);<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        private List<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">> GetItems()<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            var Menu-1 = new MenuControlModel() { Icon = "&#xe802;", Title = "Menu-1" };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            Menu-1.SubItems = new ObservableCollection<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe811;", Title = "SubMenu-1" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe81f;", Title = "SubMenu-2" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe815;", Title = "SubMenu-3" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe63d;", Title = "SubMenu-4" }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            var Menu-2 = new MenuControlModel() { Icon = "&#xe303;", Title = "Menu-2" };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>             Menu-2.SubItems = new ObservableCollection<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-1" }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-2" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-3" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-4" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-5" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            var  Menu-3 = new MenuControlModel() { Icon = "&#xe303;", Title = " Menu-3" };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>             Menu-3.SubItems = new ObservableCollection<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-1"},<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-2"}<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            var  Menu-4 = new MenuControlModel() { Icon = "&#xe303;", Title = " Menu-4"<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>             Menu-4.SubItems = new ObservableCollection<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-1" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-2" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-3" }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            var  Menu-5 = new MenuControlModel() { Icon = "&#xe303;", Title = " Menu-5" };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>             Menu-5.SubItems = new ObservableCollection<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-1" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-2" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-3" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-4" },<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Title = "SubMenu-5" }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            return new List<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">MenuControlModel</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            {<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                Menu-1,<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                Menu-2,<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                Menu-3,<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                Menu-4,<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                Menu-5,<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe809;", Title = "Menu-6"},<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe403;", Title = "Menu-7"},<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>                new MenuControlModel() { Icon = "&#xe10c;", Title = "Menu-8"},<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>            };<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>        public DelegateCommand<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">string</code><code style="color: rgb(0, 0, 0);">> NavigateCommand { get; private set; }<</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">><</code><code style="color: rgb(0, 102, 153); font-weight: bold;">br</code><code style="color: rgb(0, 0, 0);">>    }</code>

Kindly Help us to achieve this.

 

 

[Martin Ivanov]

Hello Nilesh,

I already answered a very similar question opened by this account in the following forum. There you can find some additional information about the requirement and also a runnable project with PRISM and RadNavigationView.

About the commands, you can set the Command property of the RadNavigationViewItem controls. In the data binding scenario, you can do this via the ItemContainerStyle of RadNavigationView as in your first approach. This said, you can check the Output pane of Visual Studio for binding errors on the Command property and share them if any. 

Regards,
Martin Ivanov
Progress Telerik

[Nilesh]

Hello Martin,

The sample is provided by you is very basic sample and it does not work with subitems in rad navigation view. When implementing the same sample with subitems we are getting the value for selected view as this 'WpfApp3.Services.MenuControlModel' instead of name on click of menu and subitems both. We are using subitems in the same way the code provided above. Can you please tell us how we can we navigate in this scenario. 

[Martin Ivanov]

Hello Nilesh,

I've already answered your question in the ticket. If you prefer you can share your code and the solution also here.

Regards,
Martin Ivanov
Progress Telerik

[Senthilnathan]

Hi Martin,  I am literally frustrated with identifying some insights about MVVM Prism implementation along with Navigation Menu. Very basic documentation available now. I am currently scratching my head to incorporate some complex content presentation i.e., File Upload along with Charts controls while clicking on particular navigation menu.

[Stenly]

Hello Senthilnathan,

I attached a sample project that showcases a RadNavigationView with two RadNavigationViewItem instances, one of which contains a RadGridView, and the other contains several RadCartesianChart and RadPieChart instances. The example follows the MVVM pattern, however, it does not contain the Prism library.

Nevertheless, I hope the sample project will be a good starting point for introducing the desired behavior on your end. 

[Senthilnathan]

Hi Stenly, This sample project will give me some insights about MVVM implementation. Thank you for sharing the sample project.