Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Buttons > RadDropDownButton - RadComboBox.ItemTemplate problem

• Sam

  Posted on Feb 2, 2012 (permalink)

  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!
  

  Reply

• Answer Petar Mladenov Petar Mladenov

  Posted on Feb 7, 2012 (permalink)

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

  Reply

• Sam

  Posted on Feb 7, 2012 (permalink)

  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
  

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Feb 8, 2012 (permalink)

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

  Reply

• Sam

  Posted on Feb 8, 2012 (permalink)

  Thanks Peter, that's very helpful.
  
  Sam

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Buttons > RadDropDownButton - RadComboBox.ItemTemplate problem