Posted by: Zeeshan Amjad | March 15, 2010

Using Combo Box in Tool Bar


Implement combo box in tool bar is not very difficult. We have already made one program of using built in command with tool bar here. Now we are going to extend this program and introduce one combo box to select the foreground color of text. In first step we simply create a list of string of color names.

  1: List<String> colors = new List<string>();
  2: 
  3: colors.Add("Black");
  4: colors.Add("Blue");
  5: colors.Add("Red");
  6: colors.Add("Green");
  7: colors.Add("Yellow");
  8: colors.Add("Brown");
  9: colors.Add("Navy");
 10: colors.Add("Olive");
 11: colors.Add("Pink");
 12: colors.Add("Salmon");
 13: colors.Add("Violet");
 14: 

Then we create a combo box. To give better visual idea, we define the data template for combo box to not only display the name of the color, but also one rectangle filled with same color. Here is XAML code to create that combo box.

  1: <ComboBox Margin="2" Name="cmb" SelectedIndex="0"
  2: 		  HorizontalContentAlignment="Stretch" Width="100" ItemsSource="{Binding}">
  3: 	<ComboBox.ItemTemplate>
  4: 		<DataTemplate>
  5: 			<Grid>
  6: 				<Grid.ColumnDefinitions>
  7: 					<ColumnDefinition/>
  8: 					<ColumnDefinition Width="2*"/>
  9: 				</Grid.ColumnDefinitions>
 10: 				
 11: 				<Rectangle Grid.Column="0" Margin="5, 1" Fill="{Binding}"/>
 12: 				<TextBlock Grid.Column="1" Margin="5, 1" Text="{Binding}"/>
 13: 			</Grid>
 14: 		</DataTemplate>
 15: 	</ComboBox.ItemTemplate>
 16: </ComboBox>
 17: 

Now we select the binding of text box foreground color to the selected item of the combo box. Here is a XAML code of this.

  1: <TextBox Name="txt" Margin="5" TextWrapping="Wrap" 
  2: 	Foreground="{Binding ElementName=cmb, Path=SelectedItem}" />
  3: 

Here is complete XAML code of the program.

  1: <Window x:Class="WpfToolBar.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Toolbar" Height="300" Width="400">
  5:     <DockPanel>
  6:         <ToolBar DockPanel.Dock="Top">
  7:             <Button Content="Cut" Command="ApplicationCommands.Cut"/>
  8:             <Button Content="Copy" Command="ApplicationCommands.Copy"/>
  9:             <Button Content="Paste" Command="ApplicationCommands.Paste"/>
 10:             <Separator Margin="5"/>
 11:             <ComboBox Margin="2" Name="cmb" SelectedIndex="0"
 12:                       HorizontalContentAlignment="Stretch" Width="100" ItemsSource="{Binding}">
 13:                 <ComboBox.ItemTemplate>
 14:                     <DataTemplate>
 15:                         <Grid>
 16:                             <Grid.ColumnDefinitions>
 17:                                 <ColumnDefinition/>
 18:                                 <ColumnDefinition Width="2*"/>
 19:                             </Grid.ColumnDefinitions>
 20:                             
 21:                             <Rectangle Grid.Column="0" Margin="5, 1" Fill="{Binding}"/>
 22:                             <TextBlock Grid.Column="1" Margin="5, 1" Text="{Binding}"/>
 23:                         </Grid>
 24:                     </DataTemplate>
 25:                 </ComboBox.ItemTemplate>
 26:             </ComboBox>
 27:         </ToolBar>
 28:         <Grid>
 29:             <TextBox Name="txt" Margin="5" TextWrapping="Wrap" 
 30:                 Foreground="{Binding ElementName=cmb, Path=SelectedItem}" />
 31:         </Grid>
 32:     </DockPanel>
 33: </Window>

And here is complete C# code of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace WpfToolBar
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             InitializeComponent();
 25: 
 26:             List<String> colors = new List<string>();
 27: 
 28:             colors.Add("Black");
 29:             colors.Add("Blue");
 30:             colors.Add("Red");
 31:             colors.Add("Green");
 32:             colors.Add("Yellow");
 33:             colors.Add("Brown");
 34:             colors.Add("Navy");
 35:             colors.Add("Olive");
 36:             colors.Add("Pink");
 37:             colors.Add("Salmon");
 38:             colors.Add("Violet");
 39: 
 40:             DataContext = colors;
 41:         }
 42:     }
 43: }
 44: 

This is the output of this program.

ToolBarComboBoxOutput

Advertisements

Responses

  1. […] Here we saw combo box inside tree view, here inside list view,  here inside tab control and here inside toolbar. Now we are going to insert combo box inside the list box. By definition, it is very […]

  2. Thank you. I really do appreciate this example. It was easy.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: