NavigationView "crop" items text if PaneDisplayMode=LeftFluent

[marcoaoteixeira]

Hi everyone,

I started to play with WPF-UI and I think it's really great, so thank you guys for all effort that was put into it.

Ok, now, I'm pretty new to the WPF world and I'm a little bit frustrated with something. When using NavigationView, if I set PaneDisplayMode to LeftFluent, it "crops" the item text if it's too large. The sample in WPFUI Gallery has the same issue.

I try to use Snoop to find if there was a property that could change this behavior and what I found was that the Border control (MainBorder), inside the NavigationViewItem has a fixed width value of 60, defined in a resource called NavigationViewConstants (PaneFluentButtonWidth). If I change it (with Snoop) to another value, let's say 120, we then have more "room" and the text is displayed correctly.

So, my question, is there a way to change PaneFluentButtonWidth? Without need to override the NavigationViewItem whole template.

Thanks!

[facreationz]

I've made the button width into a property by changing the following source code:

In NavigationViewItem.cs, add the following:

    /// <summary>Identifies the <see cref="FluentButtonWidth"/> dependency property.</summary>
    public static readonly DependencyProperty FluentButtonWidthProperty = DependencyProperty.Register(
        nameof(FluentButtonWidth),
        typeof(double),
        typeof(NavigationViewItem),
        new PropertyMetadata(60D)
    );


    [Bindable(true)]
    [Category("Appearance")]
    public double FluentButtonWidth
    {
        get => (double)GetValue(FluentButtonWidthProperty);
        set => SetValue(FluentButtonWidthProperty, value);
    }

This creates a new property called FluentButtonWidth in the NavigationVIewItem. Now you need to change the constant value in the Control Template. Make the following change in the NavigationLeftFluent.xaml code:

<Border
    x:Name="MainBorder"
    Width="{TemplateBinding FluentButtonWidth}"
    Height="{StaticResource PaneFluentButtonHeight}"
    ...

This will bind the width of this button to your dynamic property. Now you can change the width through the designer:

<ui:NavigationViewItem
    Content="Dashboard"
    Icon="{ui:SymbolIcon Home24}"
    FluentButtonWidth="100"
    TargetPageType="{x:Type samples:SamplePage1}" />

I hope the developers of this can embed this into their permanent codebase.

[facreationz]

Alternatively, you could reduce the font size of your button: #934

Both these methods are of course workarounds for now.