How to change Modern UI menu text to uppercase

Question

I am using Modern UI with WPF to create a project. Main menu items appears to be lowercase, which is the one thing on theme I want to change. Is there any way to change it from my project's MainWindow.xaml or MainWindow.xaml.cs or any other file?

My code for menu is:

<mui:LinkGroup DisplayName="Home" >
    <mui:LinkGroup.Links>
        <mui:Link DisplayName="Dashboard" Source="/Pages/home.xaml" />
    </mui:LinkGroup.Links>
</mui:LinkGroup>

FYI, I can change it from theme's code and build a new FirstFloor.ModernUI.dll file and use it. But that's not what I want, it will not be effective if I cannot override it after using one .dll. There must be a way, I must have missed it.

UPDATE I have an image of the display window.

I do not have problem with DASHBOARD but what I want to do is change home to uppercase, or how I write on xaml code.

Fulgor

what do you mean by lower case .. don't you provide the text for the headers ? are you saying that Home is displayed as home and Dashboard as dashboard ? – Lanctot

yes i am saying the same, i do provide DisplayName but it always shows it in lowercase – Fulgor

This appears to be something inside the Link control which is lowercasing everything. You need to create a Custom Control that will inherit from Link control. You can then override or hide the DisplayName dependency property. – Dorina

I agree with Mike , you should look inside Link and search for Display name . see who sets it. – Lanctot

Can you not expose the style template of the control to look at that binding in place to see if it's not as simple as pulling a converter off the binding base in the template? Like is there a ModernUI.xaml resource dictionary that holds the xaml templates? – Cavorilievo

Answer 1

If you look at the source code for the MUI project there is a theme called ModernMenu.xaml (under Themes in the FirstFloor.ModernUI project).

You can simply add a style to your own application like the following. (I removed the converter that sets the text to lowercase and increased the spacing between first-line menu options so options that have more than one word are clearly separated from neighbouring options.)

<Style TargetType="controls:ModernMenu">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:ModernMenu">
                <Grid>
                    <Grid.Resources>
                        <Style TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
                            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
                            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
                        </Style>
                    </Grid.Resources>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="16" />
                    </Grid.RowDefinitions>

                    <ListBox ItemsSource="{TemplateBinding VisibleLinkGroups}"
                     SelectedItem="{Binding SelectedLinkGroup, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                <Setter Property="FontFamily" Value="Segoe UI Light" />
                                <Setter Property="Foreground" Value="{DynamicResource MenuText}" />
                                <Setter Property="FontSize" Value="23"/>
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                                <Setter Property="TextOptions.TextFormattingMode" Value="Ideal" />
                                <Setter Property="Margin" Value="0,0,25,0" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <TextBlock DataContext="{TemplateBinding Content}"
                                               Text="{Binding DisplayName}"
                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                            <ControlTemplate.Triggers>
                                                <Trigger Property="IsMouseOver" Value="true">
                                                    <Setter Property="Foreground" Value="{DynamicResource MenuTextHover}"/>
                                                </Trigger>
                                                <Trigger Property="IsSelected" Value="true">
                                                    <Setter Property="Foreground" Value="{DynamicResource MenuTextSelected}"/>
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>

                    <ListBox Grid.Row="1"
                     ItemsSource="{Binding SelectedLinkGroup.Links, RelativeSource={RelativeSource TemplatedParent}}"
                     SelectedItem="{Binding SelectedLink, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                     VerticalAlignment="Top">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                <Setter Property="FontFamily" Value="Segoe UI" />
                                <Setter Property="Foreground" Value="{DynamicResource SubMenuText}" />
                                <Setter Property="FontSize" Value="11"/>
                                <Setter Property="Margin" Value="0,0,12,0" />
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <Grid DataContext="{TemplateBinding Content}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                                <TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" TextAlignment="Center"/>
                                                <TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" FontWeight="Bold" Visibility="Hidden" />
                                            </Grid>

                                            <ControlTemplate.Triggers>
                                                <Trigger Property="IsMouseOver" Value="true">
                                                    <Setter Property="Foreground" Value="{DynamicResource SubMenuTextHover}"/>
                                                </Trigger>
                                                <Trigger Property="IsSelected" Value="true">
                                                    <Setter Property="Foreground" Value="{DynamicResource SubMenuTextSelected}"/>
                                                    <Setter Property="FontWeight" Value="Bold" />
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

To do this you need a reference to the namespace at the top of your XAML file:

xmlns:controls="clr-namespace:FirstFloor.ModernUI.Windows.Controls;assembly=FirstFloor.ModernUI"

That should do the trick.

Mixedup

How to change the style of the LinkGroup.Links? – Bolen

Did not work for me. Where exactly do I put this? I'm including the style on my main window but nothing happens. – Tang

Answer 2

I have got the same problem metioned in the description above.

It seems to be that the ModernMenu which contains the links converts the DisplayName value to lower case.

With the help of Blend i found out that the basic ControlTemplate contains a TextBlock with a binding to the DisplayNameProperty.

<TextBlock.Text> <Binding Path="DisplayName"> <Binding.Converter> <mui:ToLowerConverter/> </Binding.Converter> </Binding> </TextBlock.Text>

To solve this problem i have created a new ControlTemplate for the ModernMenu based on the basic ModernMenu ControlTemplate but without the BindingConverter. Unfortunately this solution does not work because the whole control is not visible or get not painted when i define a custom ControlTemplate.

In my opinion there is no way at the moment to change the the Style of the DisplayNameProperty easily.. I spent a lot of hours to find a solution for the problem and every try failed in sprout..

Maybe a custom control which inherits from the ModernMenu and a new ControlTemplate based on the ModernMenu without that converter will be work..

I will test it in the next few days and post my experience with this attemp.

Charissecharita