RadRibbonButton don't display content

[Sergey]

Hello. I have some problem after i've made update to the new version of telerik controls. I have ribbon with buttons (with path as content). And now buttons don't display any content. It' happen with buttons in group (in radOrderedWrapPanel). I don't khow what I need to do. 

    <telerik:RadOrderedWrapPanel CompressedItemsOrder="0,1,2">
        <telerik:RadRibbonComboBox x:Name="NamedWorkspaceConfigs" Width="170"
                                   ItemsSource="{Binding ElementName=MainWindow, Path=ConfigService.NamedWorkspaceConfigs}"
                                   DisplayMemberPath="Name"
                                   SelectedValuePath="Key" />

        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Click="LoadLayout_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Восстановить конфигурацию"
                                     telerik:ScreenTip.Description="Восстановить конфигурацию под выбранным именем"
                                     telerik:KeyTipService.AccessText="В">
                <Path Data="M1,15 L1,1 L7,1 L7,15 z M4,6 L12,6 L12,4 L15,8 L12,12 L12,10 L4,10 z"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
            <telerik:RadRibbonButton Click="LoadLayout_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Восстановить конфигурацию"
                                     telerik:ScreenTip.Description="Восстановить конфигурацию под выбранным именем"
                                     telerik:KeyTipService.AccessText="В">
                <StackPanel>
                    <Viewbox Stretch="Uniform">

                        <Grid Background="Red">
                            <Path Data="M1,15 L1,1 L7,1 L7,15 z M4,6 L12,6 L12,4 L15,8 L12,12 L12,10 L4,10 z"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
                        </Grid>
                            </Viewbox>
                </StackPanel>

            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>

        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Click="SaveLayout_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Сохранить конфигурацию"
                                     telerik:ScreenTip.Description="Сохранить конфигурацию под текущим именем"
                                     telerik:KeyTipService.AccessText="С">
                <Path Data="M1,15 L1,1 L7,1 L7,15 z M15,6 L9,6 L9,4 L6,8 L9,12 L9,10 L15,10 z "
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>

            <telerik:RadRibbonButton Click="SaveAsLayout_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Сохранить конфигурацию как"
                                     telerik:ScreenTip.Description="Сохранить конфигурацию под новым именем"
                                     telerik:KeyTipService.AccessText="СК">
                <Path Data="M1,15 L1,1 L7,1 L7,15 z M9,12 L15,12 M12,9 L12,15 "
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>

        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Click="RemoveLayout_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Удалить конфигурацию"
                                     telerik:ScreenTip.Description="Удалить конфигурацию"
                                     telerik:KeyTipService.AccessText="У">
                <Path Data="M1,1 L15,15 M1,15 L15,1" StrokeThickness="2"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}" />
            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>

        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Click="OpenConfigFolder_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Открыть папку"
                                     telerik:ScreenTip.Description="Открыть папку, в которой расположен файл с конфигурациями"
                                     telerik:KeyTipService.AccessText="П">
                <Path Data="M1,1 L8,1 L8,4 L15,4 L15,15 L1,15 z" StrokeThickness="2"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}" />
            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>

    </telerik:RadOrderedWrapPanel>
</telerik:RadRibbonGroup>

<telerik:RadRibbonGroup Header="Управление окнами"
                        telerik:KeyTipService.AccessText="УО">
    <telerik:RadOrderedWrapPanel CompressedItemsOrder="0,1,2">
        <telerik:RadRibbonComboBox Width="170"
                                   ItemsSource="{Binding Path=OpenWindows}"
                                   SelectedValue="{Binding Path=ActiveWrapper}"
                                   DisplayMemberPath="OlbMdiWindow.Title"
                                   telerik:ScreenTip.Title="Активное окно"
                                   telerik:ScreenTip.Description="Текущее активное окно"
                                   telerik:KeyTipService.AccessText="А" />

        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Command="{Binding Path=WindowsArrangeCommand}"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Окна каскадом"
                                     telerik:KeyTipService.AccessText="К">
                <telerik:RadRibbonButton.CommandParameter>
                    <enums:OlbMdiContainerLayout>Cascade</enums:OlbMdiContainerLayout>
                </telerik:RadRibbonButton.CommandParameter>
                <Path Data="M5,10 L1,10 L1,1 L10,1 L10,5 M5,5 L15,5 L15,15 L5,15 z"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>

            <telerik:RadRibbonButton Command="{Binding Path=WindowsArrangeCommand}"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Окна рядом"
                                     telerik:KeyTipService.AccessText="Р">
                <telerik:RadRibbonButton.CommandParameter>
                    <enums:OlbMdiContainerLayout>TileHorizontal</enums:OlbMdiContainerLayout>
                </telerik:RadRibbonButton.CommandParameter>
                <Path Data="M1,1 L6,1 L6,15 L1,15 z M10,1 L15,1 L15,15 L10,15 z"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
            <telerik:RadRibbonButton Command="{Binding Path=WindowsArrangeCommand}"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Окна стопкой"
                                     telerik:KeyTipService.AccessText="С">
                <telerik:RadRibbonButton.CommandParameter>
                    <enums:OlbMdiContainerLayout>TileVertical</enums:OlbMdiContainerLayout>
                </telerik:RadRibbonButton.CommandParameter>
                <Path Data="M1,1 L15,1 L15,6 L1,6 z M1,10 L15,10 L15,15 L1,15 z"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>
        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Command="{Binding Path=MinimizeAllWindowsCommand}"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Свернуть все окна"
                                     telerik:KeyTipService.AccessText="М">
                <Path Data="M1,15 L15,15"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
            <telerik:RadRibbonButton Command="{Binding Path=RestoreAllWindowsCommand}"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Восстановить все окна"
                                     telerik:KeyTipService.AccessText="В">
                <Path Data="M1,15 L1,4 L12,4 L12,15 z M3,1 L15,1 L15,13"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
            <telerik:RadRibbonButton Command="{Binding Path=CloseAllWindowsCommand}"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Закрыть все окна"
                                     telerik:KeyTipService.AccessText="З">
                <Path Data="M1,1 L15,15 M1,15 L15,1"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2"/>
            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>
        <telerik:RadButtonGroup>
            <telerik:RadRibbonButton Click="MoveWindowToOtherPane_OnClick"
                                     Height="24" Width="24"
                                     telerik:ScreenTip.Title="Переместить окно"
                                     telerik:ScreenTip.Description="Переместить активное окно на другую закладку"
                                     telerik:KeyTipService.AccessText="П">
                <Path Data="M8,1 L15,1 L15,15 L8,15 z M8,4 L15,4 M1,2 L5,2 M1,14 L5,14 M2,8 L5,8"
                      Stroke="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadRibbonButton}}}"
                      StrokeThickness="2" />
            </telerik:RadRibbonButton>
        </telerik:RadButtonGroup>
    </telerik:RadOrderedWrapPanel>

[Pavel R. Pavlov]

Hi Sergey,

The reason behind this issue is the fact the Size of the RadRibbonButton is Small. When a button is in small state it visualizes only the SmallImage and the Content is hidden. Recently we improved the resizing logic of the RadRibbonGroups and fixed some bugs concerning the size of the buttons. In the current release the RadButtonGroup sets the size of all RadRibbonButtons to small and this is why you can not see the content of your buttons.

However, the template of the RadRibbonGroup is simple and you can use an ItemsControl to achieve the same layout. You can use the following snipped:

<ItemsControl VerticalAlignment="Center" MinHeight="24" IsTabStop="False">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate >
            <telerikRibbonViewPrimitives:ButtonGroupPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <Grid>
                <Border Background="{StaticResource ButtonGroupBackgroundBrush}" BorderBrush="{StaticResource ButtonGroupOuterBorderBrush}" BorderThickness="1" CornerRadius="2">
                    <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1" />
                </Border>
                <ItemsPresenter Margin="1,0" />
            </Grid>
        </ControlTemplate>
    </ItemsControl.Template>
    <StackPanel Orientation="Horizontal">
        <Border BorderThickness="1 0 0 0" BorderBrush="#44FFFFFF" />
        <telerik:RadRibbonButton Content="Button1" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Border BorderThickness="1 0 0 0" BorderBrush="#44FFFFFF" />
       <telerik:RadRibbonButton >
            <Path Fill="Red" Data="M1,15 L1,1 L7,1 L7,15 z M4,6 L12,6 L12,4 L15,8 L12,12 L12,10 L4,10 z"/>
        </telerik:RadRibbonButton>
    </StackPanel>
</ItemsControl>

Where the telerikRibbonViewPrimitives is defined like this:

xmlns:telerikRibbonViewPrimirives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"

and the StaticResources are these:

<LinearGradientBrush x:Key="ButtonGroupBackgroundBrush" EndPoint="0,1">
    <GradientStop Color="White" />
    <GradientStop Color="#FFD4D4D4" Offset="1" />
    <GradientStop Color="Gainsboro" Offset="0.42" />
    <GradientStop Color="#FFADADAD" Offset="0.43" />
  </LinearGradientBrush>
<SolidColorBrush Color="#FF848484" x:Key="ButtonGroupOuterBorderBrush" />

An other way to achieve your previous layout is to wrap the buttons in other panel (e.g. RadRibbonGroup) which will not force them into Small size.

Please give some of these approaches a try and let us know if you need further assistance.

Regards,
Pavel R. Pavlov
Telerik