Hierarchy menu is hidden.

[Psyduck]

Hello.

 

I found something unknown while using the hierarchical menu.

Click the hierarchical menu and click the ESC or menu to hide the hierarchical menu.

I made it short as a gif, but I hope it helps you understand.

Attach the source. What is the problem.

Xaml

<Grid>
        <Grid.Resources>
            <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
            <Style x:Key="BaseNavigationViewItemStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource RadNavigationViewItemStyle}">
                <Setter Property="DisplayMemberPath" Value="Title" />
                <Setter Property="Icon" Value="{Binding Glyph}" />
                <Setter Property="IconTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <telerik:RadGlyph Glyph="{Binding Converter={StaticResource StringToGlyphConverter}}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="NavigationSubItemStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource BaseNavigationViewItemStyle}">
                <Setter Property="IconVisibility" Value="Collapsed" />
            </Style>
        </Grid.Resources>

        <telerik:RadNavigationView Grid.Row="1"
                                   CanKeyboardNavigationSelectItems ="True"
                                   CompactPaneWidth="60"
                                   AutoChangeDisplayMode="False"
                                   DisplayMode="Expanded"
                                   DisplayMemberPath="Title"
                                   PaneHeader    ="{Binding Header, Mode=OneTime}"
                                   ItemsSource   ="{Binding Menu1}"
                                   SelectedItem  ="{Binding MenuItem1,  Mode=TwoWay}"
                                   >
            <telerik:RadNavigationView.ItemContainerStyle>
                <Style TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource BaseNavigationViewItemStyle}">
                    <Setter Property="ItemsSource" Value="{Binding SubItems}" />
                    <Setter Property="ItemContainerStyle" Value="{StaticResource NavigationSubItemStyle}" />
                </Style>
            </telerik:RadNavigationView.ItemContainerStyle>


            <telerik:RadNavigationView.Content>
                <ContentControl Content="{Binding ViewContent, Mode=TwoWay}"/>
            </telerik:RadNavigationView.Content>

        </telerik:RadNavigationView>

    </Grid>

 

ViewModel

private void Data()
        {
            var multiBatchView = new MultiBatchView();
            Menu1.Add(new navi
            {
                Glyph = "",
                Title = "Multi File Check",
                TypeUserControl = multiBatchView,
            });

            Menu1.Add(new navi
            {
                Title = "Settings",
                Glyph = "",
                TypeUserControl = null,
                SubItems = new ObservableCollection<navi>
                {
                    new navi
                    {
                        Title           = "Test",
                        TypeUserControl = null,
                    },
                    new navi
                    {
                        Title           = "Overlap",
                        TypeUserControl = optionOverlapView,
                    },
                    new navi
                    {
                        Title           = "Connection",
                        TypeUserControl = optionConnectionView
                    },
                    new navi
                    {
                        Title           = "Quality",
                        TypeUserControl = optionQualityView
                    },
                    new navi
                    {
                        Title           =  "Export/Import",
                        TypeUserControl = optionExportImportView
                    },
                }
            });


            MenuItem1 = Menu1.FirstOrDefault();
        }

 

Model

public class navi
{
    public string Glyph { get; set; }

    public string Title { get; set; }

    public UserControl TypeUserControl { get; set; }

    public ObservableCollection<navi> SubItems { get; set; }
}

 

 

Thanks.

 

[Martin Ivanov]

Hello KIM,

Thank you for the report. This is an issue with the Office2013 theme. I've logged it in our feedback portal where you can track its status. You can also find your Telerik points updated.

To work this around, you can extract the ControlTemplate of RadNavigationItem and change the settings of one of its data triggers. More specifically, you can change the brush used to the foregrounds. Currently, the MainBrush is used. You can change it to another one like AccentBrush or a color of your choice.

<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsExpanded}" Value="False"/>
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=HasSelectedSubItem}" Value="True"/>
	</MultiDataTrigger.Conditions>
	<Setter TargetName="IconContent" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=AccentBrush}"/>
	<Setter TargetName="Content" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=AccentBrush}"/>
	<Setter TargetName="ExpandedIcon" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=AccentBrush}"/>
	<Setter TargetName="CollapsedIcon" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=AccentBrush}"/>
	<Setter Property="BorderBrush" Value="{StaticResource NavigationView_NavItemBorderBrush_Selected}"/>
	<Setter TargetName="SelectedVisual" Property="helpers:ThemeHelper.CheckedBrush" Value="{telerik:Office2013Resource ResourceKey=AccentBrush}"/>
	<Setter TargetName="SelectedVisual" Property="Opacity" Value="1"/>
</MultiDataTrigger>

I've attached a small example showing this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik

[Psyduck]

Hello.

 

Thank you. I have followed the example and have a little problem.

I confirmed that it is applied, but when I click it, the color inversion is different.

The source of my project is getting too long.

 

Can you use the same style as the main item selection and update the navigation on the Office2013 theme?

[Martin Ivanov]

Hello KIM,

I am not sure that I understand the question. Can you provide a bit more details on the following requirement?

Can you use the same style as the main item selection and update the navigation on the Office2013 theme? 

Regards,
Martin Ivanov
Progress Telerik

[Psyduck]

Hello Martin.

 

For the first problem, please check the attached image. (check.png)

Doesn't it seem like the background and text colors are reversed?

 

And it is too complicated to put the modified source in Grid Resource.

So I modified the example file in x:Key="RadNavigationViewItemTemplate" part in the place defined in StaticResource RadNavigationViewItemStyle.

That is, the source was modified in Telerik.Windows.Controls.Navigation.xaml of Office2013 theme.

So, Could you update the modified Office2013 Theme xaml file? It is a question.

 

Thanks.

[Martin Ivanov]

Hello KIM,

Thank you for the clarification.

The selected item in the check.png image is colored differently because in the situation where you click directly on "Menu File Check" or  "Settings" those items are getting selected. This activates their selected states and highlights them. However, when you click on "Test" (or any other child of "Settings"), the "Settings" item is no longer selected, so it looks differently. The idea here is that in one case the item is selected and in the other case the item is no longer selected, but one of its children has the selection. So, the item should indicate this in a way, especially when it is collapsed and you cannot see the selected child item. But if the parent item ("Settings") coloring in this case is the same as the selection color (the blue background with the white foreground), it is going to be confusing because the items is not actually selected, but it looks like it is.

However, if you prefer this visualization and want to color the item's background in blue when it is in collapsed state and has selected sub item, you can slightly alter the trigger and change the background of the element instead of its foreground. Here is a modified version of the trigger:

<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsExpanded}" Value="False"/>
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=HasSelectedSubItem}" Value="True"/>
	</MultiDataTrigger.Conditions>
	<Setter TargetName="IconContent" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=MainBrush}"/>
	<Setter TargetName="Content" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=MainBrush}"/>
	<Setter TargetName="ExpandedIcon" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=MainBrush}"/>
	<Setter TargetName="CollapsedIcon" Property="TextElement.Foreground" Value="{telerik:Office2013Resource ResourceKey=MainBrush}"/>
	<Setter Property="BorderBrush" Value="{StaticResource NavigationView_NavItemBorderBrush_Selected}"/>
	<Setter Property="helpers:ThemeHelper.CheckedBrush" Value="{telerik:Office2013Resource ResourceKey=AccentBrush}"/>
	<Setter TargetName="SelectedVisual" Property="Opacity" Value="1"/>
</MultiDataTrigger>

About the Telerik.Windows.Controls.Navigation.xaml  file modification, I would suggest you to avoid changes in the file. This is because when you need to upgrade to a newer version of Telerik UI for WPF, you will need to replace also the .xaml files (in case you use them instead of the theme dll). This replacing will require to extract any customizations from your version of the file and manually merge them into the .xaml file from the new version. Instead, I could recommend you to keep any custom styles into separate ResourceDictionary, so you can find and manage them easily. 

I've updated y last project to show both approaches suggested in this reply. I hope that helps. 

Regards,
Martin Ivanov
Progress Telerik