Shape inside RadComboBox

[Samuel]

I'm trying to insert a Rectangle as a RadComboxItem using the following XAML code:

<telerik:RadComboBox Grid.Row="1" Grid.Column="1" Height="25" Margin="5,0,0,0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <telerik:RadComboBoxItem>
        <Rectangle Margin="2" HorizontalAlignment="Stretch" Height="15">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.RelativeTransform>
                        <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="90"/>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="Red"/>
                    <GradientStop Color="Blue" Offset="1"/>
                    <GradientStop Color="Lime" Offset="0.5"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </telerik:RadComboBoxItem>
</telerik:RadComboBox>

The Rectangle appears normally when I click to open the RadComboBox (in list), but when selected (the list closes) it disappears from the closed RadComboBox.

How can I solve this?

Thanks.

[Samuel]

Sorry for posting in the wrong section.
My mistake.

[Konstantina]

Hi Samuel,

Thank you for contacting us.

You can try setting the SelectionBoxTemplate. You can find more information in this help article: http://www.telerik.com/help/silverlight/radcombobox-populating-with-data-selectionbox.html

Hope this information helps. Please let us know if you have any other questions.

All the best,
Konstantina
the Telerik team

[Samuel]

Hello Konstantina,

Sorry for not reply to you earlier.
I tried to set the SelectionBoxTemplate and an ArgumentException with message "Value does not fall within the expected range" is thrown.

Here is my code:

<telerik:RadWindow.Resources>
    <DataTemplate x:Key="ModeloSimboloSelecionado">
        <Rectangle Fill="{Binding Fill}" Margin="2" HorizontalAlignment="Left" Width="50"  Height="15" VerticalAlignment="Top"/>
    </DataTemplate>
</telerik:RadWindow.Resources>

<telerik:RadComboBox Grid.Row="1" Grid.Column="1" Height="25" Margin="5,0,0,0" SelectionBoxTemplate="{StaticResource ModeloSimboloSelecionado}">
    <Rectangle Width="300" Margin="2" Height="10" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="White"/>
                <GradientStop Color="Black" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="300" Margin="2" Height="10" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="#FFFFEFEF"/>
                <GradientStop Color="#FF951313" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="300" Margin="2" Height="10" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="#FF0D3D00" Offset="1"/>
                <GradientStop Color="#FFEFFFF0"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="300" Margin="2" Height="10" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="#FF000768" Offset="1"/>
                <GradientStop Color="#FFF0EFFF"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="300" Margin="2" Height="10" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="#FF7C6C00" Offset="1"/>
                <GradientStop Color="#FFFFFEEF"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="300" Margin="2" Height="10" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="#FF0000"/>
                <GradientStop Color="#00FF00" Offset="0.5"/>
                <GradientStop Color="#0000FF" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</telerik:RadComboBox>

What am I missing?

[Konstantina]

Hi Samuel,

Thank you for your reply.

In that case, I can suggest you do the following - use the ItemTemplate to format the items of the ComboBox and bind the ComboBox to a source of items. You can find more information how to achieve this in this help article: http://www.telerik.com/help/silverlight/radcombobox-creating-itemtemplate.html

Hope this information helps. Please let us know if you have further questions.

Greetings,
Konstantina
the Telerik team

[Samuel]

Hi Konstantina,

I tried your solution with no success. Here is the code:

XAML

<telerik:RadWindow.Resources>
        <DataTemplate x:Key="ModeloSimboloSelecionado">
            <Ellipse Fill="{Binding Fill}" Margin="2" HorizontalAlignment="Left" Width="50"  Height="15" VerticalAlignment="Top"/>

        </DataTemplate>

        <DataTemplate x:Key="ModeloSimbolo">
            <Ellipse Fill="{Binding Fill}" Margin="2" HorizontalAlignment="Left" Width="50"  Height="15" VerticalAlignment="Top"/>
        </DataTemplate>
</telerik:RadWindow.Resources>

<telerik:RadComboBox SelectionBoxTemplate="{StaticResource ModeloSimboloSelecionado}" ItemTemplate="{StaticResource ModeloSimbolo}" ItemsSource="{Binding ListaModeloSimbolosQuantidade}" Grid.Row="1" Grid.Column="1" Height="25" Margin="5,0,0,0">

Code Behind (ViewModel)

public ObservableCollection<Rectangle> ListaModeloSimbolosQuantidade
        {
            get
            {
                if (listaModeloSimbolosQuantidade == null)
                {
                    listaModeloSimbolosQuantidade = new ObservableCollection<Rectangle>();

                    listaModeloSimbolosQuantidade.Add(new Rectangle()
                    {
                        Margin = new Thickness(2),
                        HorizontalAlignment = HorizontalAlignment.Stretch,
                        Height = 15,
                        Fill = new LinearGradientBrush()
                        {
                            StartPoint = new Point(0.5, 0),
                            EndPoint = new Point(0.5, 1),
                            GradientStops = new GradientStopCollection()
                            {
                                new GradientStop()
                                {
                                    Color = Color.FromArgb(255, 255, 0, 0)
                                },

                                new GradientStop()
                                {
                                    Color = Color.FromArgb(255, 0, 0, 255),
                                    Offset = 1
                                },

                                new GradientStop()
                                {
                                    Color = Color.FromArgb(255, 0, 255, 0),
                                    Offset = 0.5
                                }
                            },

                            RelativeTransform = new CompositeTransform()
                            {
                                CenterY = 0.5,
                                CenterX = 0.5,
                                Rotation = 90
                            }
                        }
                    });

                    listaModeloSimbolosQuantidade.Add(new Rectangle()
                        {
                            Fill = new SolidColorBrush(Colors.Blue)
                        });

                    listaModeloSimbolosQuantidade.Add(new Rectangle()
                    {
                        Margin = new Thickness(2),
                        HorizontalAlignment = HorizontalAlignment.Stretch,
                        Height = 15,
                        Fill = new LinearGradientBrush()
                        {
                            StartPoint = new Point(0.5, 0),
                            EndPoint = new Point(0.5, 1),
                            GradientStops = new GradientStopCollection()
                            {
                                new GradientStop()
                                {
                                    Color = Color.FromArgb(255, 0, 0, 0),

                                },

                                new GradientStop()
                                {
                                    Color = Color.FromArgb(255, 255, 255, 255),
                                    Offset = 1
                                }
                            },

                            RelativeTransform = new CompositeTransform()
                            {
                                CenterY = 0.5,
                                CenterX = 0.5,
                                Rotation = 90
                            }
                        }
                    });

                    RaisePropertyChanged("ListaModeloSimbolosQuantidade");
                }

                return listaModeloSimbolosQuantidade;
            }
        }

The ItemTemplate works but SelectionBoxTemplate doesn't. If I remove the binding from the SelectionBoxTemplate and set it to Black, for example, the Ellipse is shown normally. With the binding, it doesn't.

Any ideas?

[Konstantina]

Hi Samuel,

Thank you for the code snippets.

To make it work, you will have to create a DataItem object, which is not a visual element. The DataItem can have Width, Height and Fill properties. This is a better approach, as the ComboBox handles the visual and non-visual elements differently. You can find more information about binding the ComboBox to an object in this help article: http://www.telerik.com/help/silverlight/radcombobox-populating-with-data-binding-to-object.html

Hope this information helps. Please let us know if you need further assistance.

Kind regards,
Konstantina
the Telerik team