RadRibbonSplitButton - MVVM

[Nicolas]

I played with the sample for the RadRibbon in MVVM.
There is an example of DataTemplate for the RadRibbonSplitButton.
However, the sample is not complete and does not show how to bind "Contextual" items of the RadRibbonSplitButton.

I tried this

<DataTemplate x:Key="MenuItemTemplate">
    <TextBlock Text="{Binding Text}" />
</DataTemplate>

<DataTemplate x:Key="SplitButtonTemplate">
    <telerik:RadRibbonSplitButton
            Text="{Binding Text}"
            Size="{Binding Size}"
            SmallImage="{Binding SmallImage}"
            LargeImage="{Binding LargeImage}">
        <telerik:RadRibbonSplitButton.DropDownContent>
            <telerik:RadContextMenu
                    ItemTemplate="{StaticResource MenuItemTemplate}"
                    ItemsSource="{Binding SplitSubButtons}" VerticalAlignment="Top">
                <telerik:RadContextMenu.ItemContainerStyle>
                    <Style TargetType="telerik:RadMenuItem">
                        <Setter Property="Icon">
                            <Setter.Value>
                                <Image Source="{Binding Path=SmallImage}"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerik:RadContextMenu.ItemContainerStyle>
            </telerik:RadContextMenu>
        </telerik:RadRibbonSplitButton.DropDownContent>
    </telerik:RadRibbonSplitButton>
</DataTemplate>

As soon as I have more that one item, only the last icon is shown.

Any advice?

Regards,

Nic

[Nicolas]

Found it myselft.

I write the solution here for reference, anyone how want to complete/discuss or maybe invalidate is welcomed.

<DataTemplate x:Key="SplitButtonTemplate">
    <telerik:RadRibbonSplitButton Text="{Binding Text}"
            Size="{Binding Size}"
            SmallImage="{Binding SmallImage}"
            LargeImage="{Binding LargeImage}">
        <telerik:RadRibbonSplitButton.DropDownContent>
            <telerik:RadContextMenu
                    ItemContainerStyle="{StaticResource MenuItemStyle}"
                    ItemTemplate="{StaticResource MenuItemTemplate}"
                    ItemsSource="{Binding SplitSubButtons}"/>
        </telerik:RadRibbonSplitButton.DropDownContent>
    </telerik:RadRibbonSplitButton>
</DataTemplate>

and

<HierarchicalDataTemplate x:Key="MenuItemTemplate">
    <TextBlock Text="{Binding Text}" />
</HierarchicalDataTemplate>

<Style x:Key="MenuItemStyle" TargetType="telerik:RadMenuItem">
    <Setter Property="Icon" Value="{Binding Icon}" />
</Style>

It seems that I need to bind the icon to an Image to make it work. It is probably my knowledge of WPF that is not sufficient.

[Trang]

Hi,

I'm actually running into the same problem that is described.  When I have more than one item, only the image for the last item is displayed.  I've not been able to get all images to display.

Nicolas, what is the type for the "Icon" property that you are binding to?
<Setter Property="Icon" Value="{Binding Icon}" /> 

Shouldn't the following work as well though?

<Style x:Key="MenuItemStyle" TargetType="telerik:RadMenuItem">
<Setter Property="Icon">
<Setter.Value>
<Image Source="{Binding Path=SmallImage}"/>
    </Setter.Value>
</Setter>

</Style>

Thanks,
Trang

[Nicolas]

Hi,

The type for the "Icon" property that I'm binding to is "Image".
Regarding your question about why the first solution does not work, I really don't know.
I'm far away from being an expert in WPF, maybe someone else could answer that.

Regards,

Nicolas

[Tina Stancheva]

Hello Trang,

In a databinding scenario, you need to bind the RadMenuItem.Icon to a business property of type Image as described here.

Also please keep in mind that the RadContextMenu is designed to work as a context menu and open on a right button click. This is why using it in a RadRibbonSplitButton may lead to issues and we recommend using the RadMenu control instead.

Kind regards,
Tina Stancheva
the Telerik team

[Trang]

Thanks Nicolas and Tina!  After using System.Windows.Controls.Image and setting the Source for the image, it worked.