RadDropDownButton - RadComboBox.ItemTemplate problem

5 posts, 1 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 02 Feb 2012 Link to this post

    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"   
     
        <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!
  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 07 Feb 2012 Link to this post

    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
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 08 Feb 2012 Link to this post

    Thanks Peter, that's very helpful.

    Sam
Back to Top
DevCraft banner