Hi everyone!
Today we are going to see how we can change the color of particular Combo box item.
We will need to controls for this sample:
Now, add both the controls to application. To use color picker control, we need to refer the downloaded DLL. Here is code snippet for adding these controls (with addition text block for usability perspective):
Now, we need to bind some data with this combo box. Let's create one data class - which will have two fields:Today we are going to see how we can change the color of particular Combo box item.
We will need to controls for this sample:
- Combo box
- Color picker control
Now, add both the controls to application. To use color picker control, we need to refer the downloaded DLL. Here is code snippet for adding these controls (with addition text block for usability perspective):
<Window x:Class="ComboboxWithColoredItems.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit.Extended"
Title="Colored rows in ComboBox" Height="150" Width="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Please select the item in combo box, and select the color for this item from colorpicker."
Grid.ColumnSpan="2" TextWrapping="Wrap"></TextBlock>
<ComboBox Grid.Row="1" HorizontalAlignment="Left" Width="320"
Grid.Column="0" x:Name="SampleCombo">
</ComboBox>
<toolkit:ColorPicker ShowAdvancedButton="False" Grid.Row="1" Grid.Column="1"
Width="50" HorizontalAlignment="Left" Margin="5,0,0,0"></toolkit:ColorPicker>
</Grid>
</Window>
- Name - text to be displayed as combo item
- MyBackColor - Solid color brush - the color for this combo item
public class MyData : INotifyPropertyChanged
{
public MyData()
{
// Make the item transparent by default.
MyBackColor = new SolidColorBrush(Colors.Transparent);
}
public string Name { get; set; }
private SolidColorBrush _backColor;
public SolidColorBrush MyBackColor
{
get
{
return _backColor;
}
set
{
_backColor = value;
OnPropertyChanged("MyBackColor");
}
}
///
/// Called when [property changed].
///
///
Name of the property. void OnPropertyChanged(string propertyName)
{
if (!string.IsNullOrEmpty(propertyName) && PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
Now, we will be adding one List of MyData objects to xaml.cs file, which we will use as items source of the combo box. Also, we will initialize this list in constructor of xaml:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
InitializeData();
}
private void InitializeData()
{
_dataList = new List();
_dataList.Add(new MyData { Name = "Mr. Abc" });
_dataList.Add(new MyData { Name = "Mr. Def" });
_dataList.Add(new MyData { Name = "Mr. Ghi" });
_dataList.Add(new MyData { Name = "Mr. Jkl", MyBackColor = new SolidColorBrush(Colors.SeaShell) });
_dataList.Add(new MyData { Name = "Mr. Mno" });
_dataList.Add(new MyData { Name = "Mr. Pqr" });
}
private List _dataList;
public List DataList
{
get
{
return _dataList;
}
set
{
_dataList = value;
OnPropertyChanged("DataList");
}
}
private MyData _selectedData = new MyData();
public MyData SelectedData
{
get
{
return _selectedData;
}
set
{
_selectedData = value;
OnPropertyChanged("SelectedData");
}
}
void OnPropertyChanged(string propertyName)
{
if (!string.IsNullOrEmpty(propertyName) && PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
<Window.Resources>
<DataTemplate x:Key="ColoredTemplate">
<Grid Background="{Binding Path=MyBackColor}" Width="310" >
<TextBlock Text="{Binding Name}" Margin="10,0,0,0"/>
</Grid>
</DataTemplate>
</Window.Resources>
<ComboBox Grid.Row="1" HorizontalAlignment="Left" Width="320" Grid.Column="0" x:Name="SampleCombo"
ItemTemplate="{StaticResource ColoredTemplate}"
SelectedItem="{Binding Path=SelectedData, Mode=TwoWay}"
ItemsSource="{Binding Path=DataList}">
</ComboBox>
private void ColorPicker_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgse) { // Prepare new brush and assign it to the currently selected items's back color property. ((SampleCombo.SelectedItem) as MyData).MyBackColor = new SolidColorBrush(e.NewValue); }
And specify this event in Xaml also:
<toolkit:ColorPicker SelectedColorChanged="ColorPicker_SelectedColorChanged"
ShowAdvancedButton="False" Grid.Row="1" Grid.Column="1"
Width="50" HorizontalAlignment="Left" Margin="5,0,0,0"></toolkit:ColorPicker>
Yup, we are done now. Whenever we change the color in color picker, the background color of selected combo item will also be changed:
And, all the rows can have their own color:
Enjoy!
