RadRibbonSplitButton - MVVM

6 posts, 0 answers
  1. Nicolas
    Nicolas avatar
    10 posts
    Member since:
    Jun 2011

    Posted 19 Apr 2012 Link to this post

    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
  2. Nicolas
    Nicolas avatar
    10 posts
    Member since:
    Jun 2011

    Posted 20 Apr 2012 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Trang
    Trang avatar
    11 posts
    Member since:
    Feb 2012

    Posted 25 Apr 2012 Link to this post

    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
  5. Nicolas
    Nicolas avatar
    10 posts
    Member since:
    Jun 2011

    Posted 26 Apr 2012 Link to this post

    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
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 30 Apr 2012 Link to this post

    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 >>

  7. Trang
    Trang avatar
    11 posts
    Member since:
    Feb 2012

    Posted 01 May 2012 Link to this post

    Thanks Nicolas and Tina!  After using System.Windows.Controls.Image and setting the Source for the image, it worked.
Back to Top
UI for WPF is Visual Studio 2017 Ready