RadDropDownButton - RadComboBox.ItemTemplate problem

[Sam]

Hi,

I'm having some display issues with menu items inside a RadContextMenu, which is assigned as the drop down content of a RadDropDownButton.

The menu items are displayed using a DataTemplate set as the ItemTemplate of the RadContextMenu, but this generates a weird inner border effect around each of the RadMenuItems, as if they were contained in an outer RadMenuItem or something similar.

If I just use a TextBlock inside the DataTemplate then the inner border effect goes away, but I lose the ability to associate a command and a command parameter.

Can you recommend a way of fixing this so that the behaviour is the same, but the inner border disappears?

Here's the XAML and C# code that illustrates the problem:

<UserControl
    x:Name="myControl"
    x:Class="RadComboBoxProblem.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <telerik:RadDropDownButton x:Name="NewInstrumentDropDownButton">
            <telerik:RadDropDownButton.Content>
                <TextBlock Text="New Object" Margin="2,0,0,0" />
            </telerik:RadDropDownButton.Content>

            <telerik:RadDropDownButton.DropDownContent>
                <telerik:RadContextMenu ItemsSource="{Binding AvailableObjectTypes}" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="ItemClick">
                            <ei:ChangePropertyAction
                                TargetName="NewInstrumentDropDownButton"
                                PropertyName="IsOpen"
                                Value="false" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>

                    <telerik:RadContextMenu.ItemTemplate>
                        <DataTemplate>
                            <telerik:RadMenuItem
                                Header="{Binding}"
                                Command="{Binding ElementName=myControl, Path=ViewModel.AddCommand}"
                                CommandParameter="{Binding}" />
                        </DataTemplate>
                    </telerik:RadContextMenu.ItemTemplate>
                </telerik:RadContextMenu>
            </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>
    </Grid>
</UserControl>

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Input;
using Microsoft.Expression.Interactivity.Core;

namespace RadComboBoxProblem
{
    public partial class MainPage
    {
        public MainPage()
        {
            DataContext = new ViewModel();
            InitializeComponent();
        }

        public ViewModel ViewModel
        {
            get { return (ViewModel)DataContext; }
        }
    }

    public class ViewModel : INotifyPropertyChanged
    {
        public ViewModel()
        {
            AddCommand = new ActionCommand(type => MessageBox.Show((string)type));
        }

        public ICommand AddCommand { get; private set; }

        public ObservableCollection<string> AvailableObjectTypes
        {
            get { return new ObservableCollection<string> { "Apple", "Pear", "Orange" }; }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Thanks!

[Petar Mladenov]

Hello Sam,

 Yes, you are right - there are two nested RadMennuItems. You don't have to add RadMenuItems in an ItemTemplate of a ContextMenu - it does it automatically. So you can only use a Template like:

<telerik:RadContextMenu.ItemTemplate>
                      <DataTemplate>
                          <TextBlock Text="{Binding}" />
                      </DataTemplate>
                  </telerik:RadContextMenu.ItemTemplate>

Now, the rest of the work is to bind the Command and the CommandParameter properties. This could be achieved by the Telerik's ContainerBinding Collection in Silverlight 4. In Silverlight 5 you can do it the same way you do in WPF - with Style Bindings.

Kind regards,
Petar Mladenov
the Telerik team

[Sam]

Hi Peter, thanks for that - ContainerBindings works well and solves my immediate problem.

Can you provide a more complete example for the Silverlight 5 scenario with Style bindings for Command and CommandParameter? I don't know how to do that in XAML for this example, as I'm not familiar with how it's done in WPF.

Thanks,

Sam

[Petar Mladenov]

Hello Sam,

Below is a typical Style binding code:

<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
    <Setter Property="IsSelected" Value="{Binding Path=Selected}"/>
    <Setter Property="IsExpanded" Value="{Binding Path=Expanded}"/>
</Style>

You can find more info in this WPF help article. You are able to use the same code in Silverlight 5, but not in SL 4. Feel free to ask if you need further assistance.

Regards,
Petar Mladenov
the Telerik team

[Sam]

Thanks Peter, that's very helpful.

Sam