Display an Image into each RadCombobox's item

[Uyen Thao]

Hi,

I have used RadCombobox control in my test project and i want to display an image into the RadCombobox (each item of the RadCombobox is an image), but i don't know how to do that.
So would you please to show me how to do it?
I'm looking forward to your answer. Thanks for your help.

Best regards,
Uyen Thao

[Serrin]

Hello Nguyen,

You can see an example of setting a custom item template in this Silverlight demo.  Using a similar idea, instead of placing different textboxes in the grid you can use an Image control, using a bound value for the image's source.

Let us know if this works for you!

Serrin

[Uyen Thao]

Hi Serrin,

Thanks for your help and prompt reply. It works very well.

Best regards,
Uyen Thao

[Pinho]

Hi,

 I used the following:

 

      <telerikInput:RadComboBox HorizontalAlignment="Center" VerticalAlignment="Center" Width="65" Height="22" Margin="2,2,2,2" x:Name="cmbCultureSelection" Grid.Column="3">
            <telerikInput:RadComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/Flags/us.png" Height="11" Margin="2,2,2,2"/>
                    <TextBlock Text="US" FontFamily="Verdana" FontSize="9" VerticalAlignment="Center" />
                </StackPanel>
            </telerikInput:RadComboBoxItem>
            <telerikInput:RadComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/Flags/pt.png" Height="11" Margin="2,2,2,2"/>
                    <TextBlock Text="PT" FontFamily="Verdana" FontSize="9" VerticalAlignment="Center" />
                </StackPanel>
            </telerikInput:RadComboBoxItem>
            <telerikInput:RadComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/Flags/de.png" Height="11" Margin="2,2,2,2"/>
                    <TextBlock Text="DE" FontFamily="Verdana" FontSize="9" VerticalAlignment="Center" />
                </StackPanel>
            </telerikInput:RadComboBoxItem>
        </telerikInput:RadComboBox>

But after selecting one of the items, the image that exists in the selected item, doesn't appears, it only shows the text, could you please help me? Or it's better to open a new thread?

This works:

<ComboBox x:Name="cmbCultureSelection" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Width="65" Height="22" Margin="2,2,2,2">
            <ComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/Flags/us.png" Height="11" Margin="2,2,2,2"/>
                    <TextBlock Text="US" FontFamily="Verdana" FontSize="9" VerticalAlignment="Center" />
                </StackPanel>
            </ComboBoxItem>
            <ComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/Flags/pt.png" Height="11" Margin="2,2,2,2"/>
                    <TextBlock Text="PT" FontFamily="Verdana" FontSize="9" VerticalAlignment="Center" />
                </StackPanel>
            </ComboBoxItem>
            <ComboBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/Flags/de.png" Height="11" Margin="2,2,2,2"/>
                    <TextBlock Text="DE" FontFamily="Verdana" FontSize="9" VerticalAlignment="Center" />
                </StackPanel>
            </ComboBoxItem>
        </ComboBox>

Thanks,

L. Pinho

[Serrin]

This is where visual state issues come into play (or that's my best guess), as once you select an item it has a different state than when it is sitting there waiting for action.  Hopefully enhancements in our ability to edit controls in Blend for this upcoming release will give us access to the full control template so you can persist your changed itemstyle over different visual states. ;)

[Pinho]

Hi Serrin,
 thanks for your reply.

Do you know any workaround for this?

Thanks,

L. Pinho

[Hristo]

Hello Luis,

Sorry for the late response.
The reason why ComboBox is working is that the ComboBoxItem.Content is transferred into the ComboBox. RadComboBox do not move the content (we believe that transferring ComboBoxItem content is not correct - you should always have your content in the ComboBoxItem).
But you are still able to achieve your goal. The only change that you should do is to set ItemsSource to RadComboBox instead of adding directly RadComboBoxItems.

Here is a sample code demonstrating this:
this is the page XAML:

<UserControl x:Class="SilverlightDockingDemo.Page49"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SilverlightDockingDemo;assembly=SilverlightDockingDemo"
        xmlns:input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
        Width="300" Height="300">
    <UserControl.Resources>
        <local:MySource x:Key="comboSource">
            <local:DataItem2 Text="1" ImageSource="Images/off.jpg" />
            <local:DataItem2 Text="2" ImageSource="Images/Web.png" />
        </local:MySource>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <input:RadComboBox VerticalAlignment="Center" ItemsSource="{Binding}"
                DataContext="{StaticResource comboSource}" SelectedIndex="0">
            <input:RadComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ImageSource}" Stretch="None" />
                        <TextBlock Text="{Binding Text}" VerticalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </input:RadComboBox.ItemTemplate>
        </input:RadComboBox>
    </Grid>
</UserControl>

and this is the page code-behind:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Controls;

namespace SilverlightDockingDemo
{
    public partial class Page49 : UserControl
    {
        public Page49()
        {
            InitializeComponent();
        }
    }

    public class DataItem2
    {
        public string Text { get; set; }
        [TypeConverter(typeof(UriTypeConverter))]
        public string ImageSource { get; set; }
    }

    public class MySource : ObservableCollection<object>
    {
    }
}

Some notes here:
In my project I have Images folder with two files: off.jpg and Web.png. Both of them are with Build Action: Resource.

Let me know if you need more information.

Sincerely yours,
Hristo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Pinho]

Hi Hristo,

 thanks for the reply, it worked fine.

 I've got another issue related to RadComboBox but I will try to search the forum before posting it :)