This is a migrated thread and some comments may be shown as answers.

RadRibbonSplitButton - MVVM

5 Answers 132 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
Nicolas
Top achievements
Rank 1
Nicolas asked on 20 Apr 2012, 03:17 AM

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

5 Answers, 1 is accepted

Sort by
0
Nicolas
Top achievements
Rank 1
answered on 20 Apr 2012, 02:28 PM
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.
0
Trang
Top achievements
Rank 1
answered on 25 Apr 2012, 10:50 PM
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
0
Nicolas
Top achievements
Rank 1
answered on 26 Apr 2012, 12:45 PM
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
0
Tina Stancheva
Telerik team
answered on 30 Apr 2012, 03:46 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Trang
Top achievements
Rank 1
answered on 01 May 2012, 05:31 PM
Thanks Nicolas and Tina!  After using System.Windows.Controls.Image and setting the Source for the image, it worked.
Tags
RibbonView and RibbonWindow
Asked by
Nicolas
Top achievements
Rank 1
Answers by
Nicolas
Top achievements
Rank 1
Trang
Top achievements
Rank 1
Tina Stancheva
Telerik team
Share this question
or