Not able to apply theme dynamically and properly to Navigation View SubMenu items

[Nilesh]

Hi Team,
We are using RadNavigation view for our menu control. We are using it in submenu configuration way. We are able to create and navigate to different views. We are using .Net Core with No Xaml configuration. We wanted to have theme option for our entire application. For this we have referred and followed CRM application and created the Theme part same as CRM application. We are able to apply theme and change theme as per choice of user for entire application but we are facing some issues with RadNavigationView control. Below are the challenges that we are facing and something that we want to achieve in our application.

1. We are able to apply the theme but on submenus theme does not get applied also it does not get applied for hover and selected state of the menu. We have tried few approaches and still no success?

2. We want user to select theme once and once they have selected the theme we will save their choice and will open the app in the previously saved theme. We are not able to implement it currently.

We are using NoXAML approach hence we have added necessary files .XAML file in the resource dictionary in App.XAML. 

Kindly help us design our application with above 2 points as we are struck in this from few days.

Things we have tried to apply theme colors on hover, for selected menu and for dropdown icon in case of submenu.

<Style x:Key="ItemPreviewStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource RadNavigationViewItemStyle }">
            <Setter Property="IconTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}"
                                          Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=telerik:RadNavigationViewItem}}"
                                          HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ItemBaseStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource ItemPreviewStyle}">
            <Setter Property="Content" Value="{Binding Title}"/>
            <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
            <Setter Property="Foreground" Value="{theme:VoyagerThemeResource Resource=Foreground}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="FocusVisualStyle" Value="{theme:VoyagerThemeResource Resource=AccentBrush}" />
            <Setter Property="Icon" Value="{Binding Icon}" />
            <Setter Property="IconVisibility" Value="{Binding Icon, Converter={StaticResource NullToVisibilityConverter}}"/>
        </Style>

Because of this changes submenus text get the background color but still no affect on hover, selected state and proper theme color of menu. let us know if we are doing anything wrong. Also help us achieving the second case.

[Martin Ivanov]

Hello Nilesh,

Thank you for the information.

The theme of the items doesn't change probably because the ItemPreviewStyle and ItemBaseStyle definitions are not reset. Basically, when using NoXaml and implicit styling you will need to re-merge also any custom Styles targeting Telerik controls. Otherwise, they won't be refreshed with the new base Style. Note that the StaticResource keyword doesn't update the underlying style when the base style changes and also BasedOn doesn't support DynamicResource. This is described in the Switching Custom Styles with Themes at Runtime article.

You can extract those Styles into a separate ResourceDictionary and merge them along with the Telerik theme resources, and see if this helps.

For the saving of the selected theme, can you tell me what exactly doesn't work? Based on the used theme changing approach, you can save different settings, but the basic idea should be the same - saving the setting on the file system, the isolate storage, a database, or whatever type of storage works for you. Then restoring the saved value in the theme changing mechanism which should apply it.

Regards,
Martin Ivanov
Progress Telerik

[Nilesh]

Hello Martin,

Thanks for the reply.

We tried moving the ItemPreviewStyle and ItemBaseStyle into different resource dictionary and merging this resource dictionary in app.xaml as well as at the time when user clicks on different themes. Still my issue is not resolved.
I had gone through the link provided by you and as per the link we need to create different resource Xaml for different theme, this is what we need to do or just need to create the one resource dictionary and merge it with all other resource files? Do you have any sample with RadNavigationView then please share with us it will be lot more helpful(As I mentioned first we referred and followed the same way which was implemented in CRM wpf application.)
Also for saving the theme part we are able to save the user choice and able to retrieve the same from db. The challenge we are facing is to apply the theme once application starts. For example when the app loads first time for any user we are applying office2016  as default theme to it, user have choice of selecting 9 different themes in application once user select theme any other than default theme there preference is being recorded into data base. Next time when user start the application the we should load the application with user selected theme. To achieve this how can we merge files for user selected theme in app.Xaml, we are using MVVM with Prism framework. We are facing the challenge here. Let me know if you need any other information. Help use achieve this it is very important for us.

[Martin Ivanov]

Hello Nilesh,

I've prepared a small example showing one way to achieve your requirements. I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Nilesh]

Thanks Martin your sample helped us lot also we realized our mistake. Mine code also start working when we started using without static resource style. And thank you for showing us how we can apply the theme at runtime.

[Nilesh]

Hi Martin,
One strange behavior we have observed after applying theme, this behavior is present in the sample application provided by you also.
We are losing the selected menu and it's content when we change the theme, this was not happening with our previous approach but that was giving theme issue. How to resolve this? And how can we set particular menu as selected on load of the screen?

Help us to resolve this issue.

[Martin Ivanov]

Hello Nilesh,

The selection is lost because the items container style is reset when you change the theme, thus the ItemsSource with the children is reset too. 

To preserve the selection, you can create a new property in the NavigationItemModel and data bind it to the IsSelected property of the RadNavigationViewItems via the item container style. You can find this approach shown in the attached project. Can you try it and tell me if it helps?

Regards,
Martin Ivanov
Progress Telerik

[Nilesh]

Hi Martin,

Thanks for the response.

It helps maintaining selected item, but one issue still exist with this application is that parent menu get collapsed automatically and we are not able to know which menu was selected. To stop that we tried to bind  IsExpanded property in the same way we bound IsSelected but no success. May we know how can we control this?

Also when pane is in compact mode on change of theme, selected menu is lost while it's content is visible. Any way to resolve this 2 issues?

[Martin Ivanov]

Hello Nilesh,

For the IsExpanded property, there is an issue with the initial binding there. I've logged it in the feedback portal where you can track its status. To work this around, you can override the IsExpandedProperty's metadata and return the base binding value in the CoerceValueCallback of the DependencyProperty. This solution resolves also the second behavior from your description.

I've attached a sample project showing this. Can you please give it a try and let me know if it helps?

Regards,
Martin Ivanov
Progress Telerik