Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Weird Behaviors with RibbonToolBar and LayoutDefinitions

See original GitHub issue

I’m new to WPF and Fluent so, I’m sorry in advance if there is something that I missed. With the following codes below, I’m trying to smoothly resize a RibbonGroupBox into the ‘Collapsed’ state. Here, I encountered a weird behavior using SizeDefinition. As I reduce the main window horizontally from the initial state, ‘Cut’ button gets resized to a large icon, then both buttons disappear, then they get collapsed. When I enlarge the window or click the collapsed RibbonGroupBox, ‘Cut’ button remains to be a large icon. Image

<Fluent:RibbonTabItem Header="Tab" ReduceOrder="Clipboard, Clipboard, Clipboard">
    <Fluent:RibbonGroupBox Header="Group" Name="Group">
        <Fluent:RibbonToolBar>
            <Fluent:Button Header="Paste" Name="Paste" SizeDefinition="Large"
            Icon="pack://application:,,,/Paint;component/Images/2-1.png"
            LargeIcon="pack://application:,,,/Paint;component/Images/2-1.png">

            <Fluent:Button Header="Cut" Name="Cut" SizeDefinition="Medium"
            Icon="pack://application:,,,/Paint;component/Images/2-2.png"
            LargeIcon="pack://application:,,,/Paint;component/Images/2-2.png">
        </Fluent:RibbonToolBar>
    </Fluent:RibbonGroupBox>
</Fluent:RibbonTabItem>

I tried to fix this behavior by setting LayoutDefinitions. This fixed most of the problems from the code above but, when I click the collapsed RibbonGroupBox, the pop up box doesn’t correctly display the buttons. Also, it seems like ‘Cut’ button is getting resized to a large icon again, Image

<Fluent:RibbonTabItem Header="Tab" ReduceOrder="Clipboard, Clipboard, Clipboard">
    <Fluent:RibbonGroupBox Header="Group" Name="Group">
        <Fluent:RibbonToolBar>
            <Fluent:RibbonToolBar.LayoutDefinitions>
                <Fluent:RibbonToolBarLayoutDefinition Size="Large">
                    <Fluent:RibbonToolBarRow>
                        <Fluent:RibbonToolBarControlDefinition Target="Paste" Size="Large"/>
                        <Fluent:RibbonToolBarControlDefinition Target="Cut" Size="Middle"/>
                    </Fluent:RibbonToolBarRow>
               </Fluent:RibbonToolBarLayoutDefinition>
            </Fluent:RibbonToolBar.LayoutDefinitions>

            <Fluent:Button ... />
            <Fluent:Button ... />
        </Fluent:RibbonToolBar>
    </Fluent:RibbonGroupBox>
</Fluent:RibbonTabItem>

Am I doing anything wrong here? Thanks!