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

RadDropDownButton - RadComboBox.ItemTemplate problem

4 Answers 204 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 03 Feb 2012, 03:27 AM
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!

4 Answers, 1 is accepted

Sort by
0
Accepted
Petar Mladenov
Telerik team
answered on 07 Feb 2012, 03:01 PM
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 >>
0
Sam
Top achievements
Rank 1
answered on 07 Feb 2012, 11:56 PM
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
0
Petar Mladenov
Telerik team
answered on 08 Feb 2012, 07:04 AM
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 >>
0
Sam
Top achievements
Rank 1
answered on 08 Feb 2012, 07:21 AM
Thanks Peter, that's very helpful.

Sam
Tags
Buttons
Asked by
Sam
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Sam
Top achievements
Rank 1
Share this question
or