I'm attempting to use the Layout Definitions in the Fluent Ribbon. The problem I'm having is that it is not displaying the icons on the buttons inside the first Group Definition. This is the appropriate snippet below:
<Fluent:RibbonToolBar>
<Fluent:RibbonToolBar.LayoutDefinitions>
<Fluent:RibbonToolBarLayoutDefinition Size="Large">
<Fluent:RibbonToolBarRow>
<Fluent:RibbonToolBarControlGroupDefinition>
<Fluent:RibbonToolBarControlDefinition Target="buttonCameraLock" />
</Fluent:RibbonToolBarControlGroupDefinition>
<Fluent:RibbonToolBarControlGroupDefinition>
<Fluent:RibbonToolBarControlDefinition Target="buttonPanMode" />
<Fluent:RibbonToolBarControlDefinition Target="buttonRoamMode" />
</Fluent:RibbonToolBarControlGroupDefinition>
</Fluent:RibbonToolBarRow>
</Fluent:RibbonToolBarLayoutDefinition>
</Fluent:RibbonToolBar.LayoutDefinitions>
<Fluent:Button x:Name="buttonCameraLock"
Icon="histogram_small.png"
HorizontalAlignment="Center"
SizeDefinition="Small" />
<Fluent:Button x:Name="buttonPanMode"
Icon="histogram_small.png"
HorizontalAlignment="Center"
SizeDefinition="Small" />
<Fluent:Button x:Name="buttonRoamMode"
Icon="histogram_small.png"
HorizontalAlignment="Center"
SizeDefinition="Small" />
</Fluent:RibbonToolBar>
In this example, the first button exists, but has no icon. If I put them all in one group, none of the buttons have an icon.
I found the solution to the problem. In the snippet for brevity I left out that the icons were set with relative paths. This is a known bug apparently. Setting them to hardcoded paths solved the issue.