RadRibbonComboBox and SelectionBoxTemplate in 2013.1.220.45

[Inger Marie]

I am trying to fix an error I've gotten when updating to 2013.1.220.45

This is my MainWindow:

<Window x:Class="TestListView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" xmlns:Controls3="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonView" xmlns:TestListView="clr-namespace:TestListView"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Controls3:RadRibbonComboBox
                                 Grid.Column="0"
                                 Grid.Row="0"
                                 Margin="1"
                AlternationCount="2"
                                 Name="_comboBox"
                                 ItemsSource="{Binding TheList}"
                                 SelectedItem="{Binding TheSelection, Mode=TwoWay}"
            telerik:TextSearch.Text="Name">
            <Controls3:RadRibbonComboBox.ItemContainerStyle>
                <Style TargetType="{x:Type Controls:RadComboBoxItem}">
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex"
                                     Value="1">
                            <Setter Property="Background"
                                        Value="#FFF5F7FB"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Controls3:RadRibbonComboBox.ItemContainerStyle>

            <Controls3:RadRibbonComboBox.SelectionBoxTemplate>
                <DataTemplate DataType="{x:Type TestListView:Animal}" >
                    <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name,Mode=TwoWay}" />
                        <TextBlock Text="{Binding Color,Mode=TwoWay}" />
                    </StackPanel>
                </DataTemplate>
            </Controls3:RadRibbonComboBox.SelectionBoxTemplate>
            <Controls3:RadRibbonComboBox.ItemTemplate>
                <DataTemplate >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding Color}"  Grid.Row="1" Foreground="LightGray" />
                    </Grid>
                </DataTemplate>
            </Controls3:RadRibbonComboBox.ItemTemplate>
        </Controls3:RadRibbonComboBox>

    </Grid>
</Window>

And the MainWindow.xaml.cs looks like this:

public class Animal
  {
      public string Name { get; set; }
      public string Description { get; set; }
      public string Color { get; set; }
  }
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {

      public MainWindow()
      {
          InitializeComponent();
          TheList.Add(new Animal { Name = "Elephant", Color = "Gray", Description = "Elephants are large mammals of the family Elephantidae and the order Proboscidea. Traditionally, two species are recognised, the African elephant (Loxodonta africana) and the Asian elephant (Elephas maximus), although some evidence suggests that African bush elephants and African forest elephants are separate species (L. africana and L. cyclotis respectively). Elephants are scattered throughout sub-Saharan Africa, and South and Southeast Asia. They are the only surviving proboscideans; extinct species include mammoths and mastodons. The largest living terrestrial animals, male African elephants can reach a height of 4 m (13 ft) and weigh 7,000 kg (15,000 lb). These animals have several distinctive features, including a long proboscis or trunk used for many purposes, particularly for grasping objects. Their incisors grow into tusks, which serve as tools for moving objects and digging and as weapons for fighting. The elephant's large ear flaps help to control the temperature of its body. African elephants have larger ears and concave backs while Asian elephants have smaller ears and convex or level backs." });
          TheList.Add(new Animal { Name = "Giraffe", Color = "Yellow", Description = "The giraffe (Giraffa camelopardalis) is an African even-toed ungulate mammal, the tallest living terrestrial animal and the largest ruminant. Its species name refers to its camel-like appearance and the patches of color on its fur. Its chief distinguishing characteristics are its extremely long neck and legs, its horn-like ossicones and its distinctive coat patterns. It stands 5–6 m (16–20 ft) tall and has an average weight of 1,600 kg (3,500 lb) for males and 830 kg (1,800 lb) for females. It is classified under the family Giraffidae, along with its closest extant relative, the okapi. The nine subspecies are distinguished by their coat patterns." });
          TheList.Add(new Animal { Name = "Lion", Color = "Yellow", Description = "The lion (Panthera leo) is one of the four big cats in the genus Panthera and a member of the family Felidae. With some males exceeding 250 kg (550 lb) in weight,[4] it is the second-largest living cat after the tiger. Wild lions currently exist in sub-Saharan Africa and in Asia (where an endangered remnant population resides in Gir Forest National Park in India) while other types of lions have disappeared from North Africa and Southwest Asia in historic times. Until the late Pleistocene, about 10,000 years ago, the lion was the most widespread large land mammal after humans. They were found in most of Africa, across Eurasia from western Europe to India, and in the Americas from the Yukon to Peru.[5] The lion is a vulnerable species, having seen a major population decline of 30–50% over the past two decades[date missing] in its African range.[2] Lion populations are untenable outside designated reserves and national parks. Although the cause of the decline is not fully understood, habitat loss and conflicts with humans are currently the greatest causes of concern. Within Africa, the West African lion population is particularly endangered." });
      }


      private readonly List<Animal> _theList = new List<Animal>();
      public List<Animal> TheList
      {
          get { return _theList; }
      }

      private Animal _theSelection;
      public Animal TheSelection
      {
          get
          {
              if (_theSelection == null)
              {
                  _theSelection = TheList.Any() ? TheList[0] : null;
              }
              return _theSelection;
          }
          set { _theSelection = value; }
      }
  }

My problem is that it is the type of the selected item which is shown in the combobox's selectionbox - not the Name and Color as I specified in the SelectionBoxTemplate.

This is a simplified example, my real-world problem look similar but is a bit more complex. But it worked in elder version and has stopped working. I never changed the combobox implementation but I did update telerik.

BTW: If I implement ToString() on Animal-class then that value is shown in the SelectionBox. Seems like the template is never used. But I want (in my real world example) to have different colors and fontsizes on different properties of the item shown in the seletionbox.

Thanks

[Vladi]

Hi Inger,

By default the RadRibbonComboBox is in editable mode in which the SelectionBoxTemplate is not supported. If you want the SelectionBoxTemplate to be applied you will need to set the IsEditable property of the control to false. Could you share with us from which version you have upgraded in order to see if there was a bug in the previous version that could have caused this unexpected behavior?

It is worth mentioning that the RadRibbonComboBox shouldn't be used outside of the RibbonView control and if you want to use it as a separate control you should use our RadComboBox control.

Kind regards,
Vladi
the Telerik team

[Inger Marie]

Thanks for your answer, it solved my problem.

I my real application, I use the RadRibbonComboBox inside a user control which are used on the ribbonview (I use the same usercontrol on several ribbons).

I do not remember the version of the telerik controls from before. But it was probably Q4 2012. I believe it has worked with the unexpected behavior much longer, though.

According to my source control, I have had this unexpected behavior at least since April last year (when we moved our project to team foundation server and history goes no further back in time). First I simply displayed the name of the selected item but at that time the item had no ToString()-function (I specifically added ToString()-function to the item's class at the time I started this thread as a temporary fix). Later I changed the displayed text to something a bit more complex (21th September 2012) and it worked at the time:

<telerik:RadRibbonComboBox
                               ItemsSource="{Binding TeamsList}"
                               SelectedItem="{Binding SearchTeam, Mode=TwoWay}">
          <telerik:RadRibbonComboBox.ItemContainerStyle>
              <Style TargetType="{x:Type telerik:RadComboBoxItem}">
                  <Style.Triggers>
                      <Trigger Property="ItemsControl.AlternationIndex"
                                   Value="1">
                          <Setter Property="Background"
                                      Value="#FFF5F7FB"></Setter>
                      </Trigger>
                  </Style.Triggers>
              </Style>
          </telerik:RadRibbonComboBox.ItemContainerStyle>
          <telerik:RadRibbonComboBox.SelectionBoxTemplate>
              <DataTemplate DataType="{x:Type DAL:EmployeeTeam}">
                  <StackPanel Orientation="Vertical">
                  <TextBlock Text="{Binding Name}" />
                      <TextBlock Text="{Binding Office.Name}"/>
              </DataTemplate>
          </telerik:RadRibbonComboBox.SelectionBoxTemplate>
          <telerik:RadRibbonComboBox.ItemTemplate>
              <DataTemplate>
                  <Grid>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="Auto" />
                          <RowDefinition Height="Auto" />
                      </Grid.RowDefinitions>
                      <TextBlock Text="{Binding Name}"
                                     Style="{StaticResource s_tb_h3}" />
                      <TextBlock Text="{Binding Office.Name}" Style="{StaticResource AdditionalInfo}" Grid.Row="1"
                              Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource NullOrEmpty2Collapsed}}" />
                  </Grid>
              </DataTemplate>
          </telerik:RadRibbonComboBox.ItemTemplate>
      </telerik:RadRibbonComboBox>