Display an Image into each RadCombobox's item

8 posts, 0 answers
  1. Uyen Thao
    Uyen Thao avatar
    8 posts
    Member since:
    Feb 2009

    Posted 05 Mar 2009 Link to this post

    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

  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 05 Mar 2009 Link to this post

    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
  3. DevCraft banner
  4. Uyen Thao
    Uyen Thao avatar
    8 posts
    Member since:
    Feb 2009

    Posted 06 Mar 2009 Link to this post

    Hi Serrin,

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

    Best regards,
    Uyen Thao


  5. Pinho
    Pinho avatar
    42 posts
    Member since:
    Mar 2009

    Posted 10 Mar 2009 Link to this post

    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



  6. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 10 Mar 2009 Link to this post

    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. ;)
  7. Pinho
    Pinho avatar
    42 posts
    Member since:
    Mar 2009

    Posted 10 Mar 2009 Link to this post

    Hi Serrin,
     thanks for your reply.

    Do you know any workaround for this?

    Thanks,

    L. Pinho
  8. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 12 Mar 2009 Link to this post

    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 { getset; }  
            [TypeConverter(typeof(UriTypeConverter))]  
            public string ImageSource { getset; }  
        }  
     
        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.
  9. Pinho
    Pinho avatar
    42 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2009 Link to this post

    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 :)
Back to Top
DevCraft banner