RibbonContextualTabGroup header text trimmed until hovered

[znakeeye]

This bug only affects certain text widths. Tried a few times, and found at least one string that is reproducible, hehe... "Hundkrevtab"

Now, please see attached image. When the RibbonContextualTabGroup becomes visible, the header text is trimmed. When hovered with the mouse, it resizes itself properly. XAML looks something like this:

...
<fluent:RibbonContextualTabGroup Header="Hundkrevtab" x:Name="BlahGroup"
    BorderBrush="Aqua" Background="Aqua" Foreground="Blue"
    Visibility="Visible"/>
...
<fluent:RibbonTabItem Header="Blah" KeyTip="B" Style="{StaticResource MyRibbonTabItemStyle}"
    Group="{Binding ElementName=BlahGroup}">
							  
<Style x:Key="MyRibbonTabItemStyle" TargetType="{x:Type fluent:RibbonTabItem}">
  <Setter Property="Visibility" Value="Visible"/>
  <Style.Triggers>
    <DataTrigger Binding="{Binding IsBlehVisible}" Value="False">
      <Setter Property="Visibility" Value="Collapsed"/>
    </DataTrigger>
  </Style.Triggers>
</Style>

---

Environment

• Fluent.Ribbon v6.1.0.233
• Windows 10
• .NET Framework 4.5.1

[batzen]

It should either stay trimmed or expanded, but not change on mouse over.
Will have a look.

[batzen]

I can't reproduce your issue.
Could you provide a small repro project showing the issue?

[batzen]

@znakeeye ping

[znakeeye]

Modify v6.1.0 source code as follows.

TestContent.xaml

Add this style:

<Style x:Key="ProblematicTabItemStyle" TargetType="{x:Type Fluent:RibbonTabItem}">
  <Setter Property="Visibility" Value="Visible"/>
  <Style.Triggers>
    <DataTrigger Binding="{Binding IsKeyTipsVisible}" Value="False">
      <Setter Property="Visibility" Value="Collapsed"/>
    </DataTrigger>
  </Style.Triggers>
</Style

Then set Header="Hundkrevtab" for tabGroup1 and apply the style on "KeyTips" tab item:

<Fluent:RibbonTabItem Header="KeyTips" Style="{StaticResource ProblematicTabItemStyle}" ... />

MainViewModel.cs

private bool isKeyTipsVisible;
public bool IsKeyTipsVisible
{
    get => this.isKeyTipsVisible;
    set
    {
        this.isKeyTipsVisible = value;
        OnPropertyChanged(nameof(IsKeyTipsVisible));
    }
}

public ICommand TestCommand
{
    get
    {
        if (this.testCommand == null)
        {
            this.testCommand = new RelayCommand(() => IsKeyTipsVisible = true);
        }

        return this.testCommand;
    }
}

Finally, press the Pink button in the Quick Access menu. Voilà! If you hover any of the contextual tabs, it will re-render correctly.