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.

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.

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.