Need a drop-down list that will display only the color.

<ComboBox Grid.Row="11" Grid.Column="2" Width="Auto" Height="Auto" MinWidth="100" VerticalAlignment="Bottom" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding ColorList}" SelectedIndex="{Binding ColorSelect}" SelectedValue="{Binding ColorSelectValue}" SelectedValuePath="Id" Text="variable"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Rectangle Width="16" Height="16" Margin="0,2,5,2" Fill="{Binding Name}" /> <TextBlock Text="{Binding Name}" /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> 

Viewmodel

 private void GetColorId() { ColorCollection.Add(new ColorsServices(0, Colors.Black)); ColorCollection.Add(new ColorsServices(1, Colors.Yellow)); ColorCollection.Add(new ColorsServices(2, Colors.Green)); ColorCollection.Add(new ColorsServices(3, Colors.Gray)); ColorCollection.Add(new ColorsServices(4, Colors.PaleGreen)); ColorCollection.Add(new ColorsServices(5, Colors.Violet)); ColorCollection.Add(new ColorsServices(6, Colors.CadetBlue)); } private ObservableCollection<ColorsServices> ColorCollection = new ObservableCollection<ColorsServices>(); 

and Service

 public class ColorsServices { public ColorsServices(int id, Color name) { Id = id; Name = name; } public int Id { get; set; } public Color Name { get; set; } } public ObservableCollection<ColorsServices> ColorList { get { return ColorCollection; } set { ColorCollection = value; } } 

At the moment, the result is this: enter image description here

How to do what next to the list were displayed circles with the background of this color?

  • And what type of your ColorList ? - VladD
  • Of type ObservableCollection <ColorsServices>, this property returns a ColorCollection. - Ivan Prodaiko

1 answer 1

No problem. Suppose your item type is ColorServices . Then use this XAML:

 <ComboBox Width="100" ItemsSource="{Binding ColorList}"> <ComboBox.ItemTemplate> <DataTemplate DataType="{x:Type local:ColorsServices}"> <DockPanel LastChildFill="True"> <Ellipse Height="15" Width="15" VerticalAlignment="Center" DockPanel.Dock="Left"> <Ellipse.Fill> <SolidColorBrush Color="{Binding Name}"/> </Ellipse.Fill> </Ellipse> <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="2"/> </DockPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> 

Result:

trivial

  • everything works, thank you) - Ivan Prodaiko
  • @IvanProdaiko: Please! - VladD