Reader Level:
Articles

WPF ComboBox at a Glance - Overview

By Purushottam Rathore on January 13, 2009
This is a simple article to show the data into Combobox usinf WPF, you can use multiple columns in a combobox.
  • 0
  • 0
  • 52078
Download Files:
 

ComboBox:

The ComboBox is a user interface (UI) item that presents users with a list of options. The contents can be shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice. The user clicks a button to see the complete list of options.

Here I am creating a simple application to show ComboBox in WPF.

First Off all open Visual Studio 2008 -> File -> New -> Project then select WPF Application as follows:

Figure 1: Open new wpf application

Now drag two ComboBox from toolBox and drop within grid of the window (See figure 2).

Figure 2:

Window.xaml:

<Window x:Class="ComboBox.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Title="ComboBox" Height="300" Width="450" Loaded="Window_Loaded">

    <Grid Width="430">
       
<Button Height="23" HorizontalAlignment="Left" Margin="57,20,0,0" Name="Button1" ToolTip="Click here to view ComboBox" FontSize="10pt" VerticalAlignment="Top" Width="98" Click="Button1_Click">Button1</Button>

        <Button Height="23" Margin="177,20,135,0" Name="Button2" ToolTip="Click here to view Multiple Column in a ComboBox" FontSize="10pt" VerticalAlignment="Top" Click="Button2_Click">Button2</Button>

        <!--Multiple column in combobox-->

        <ComboBox Visibility="Hidden" Margin="57,79,135,0" Name="comboBox1" ItemsSource="{Binding}" VerticalAlignment="Top" Height="20">
           
<ComboBox.ItemTemplate>
               
<DataTemplate>
                   
<StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding CountryId}" Width="50" />
                        <TextBlock Text="{Binding Country}" Width="100" />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <!--This is simple Combobox-->

        <ComboBox Visibility="Hidden" Margin="57,105,135,0" Name="comboBox2" ItemsSource="{Binding}" VerticalAlignment="Top" Height="20" Background="Plum">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Country}" Width="100" />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
        
       
<Separator Height="4" Margin="0,62,0,0" Name="separator1" VerticalAlignment="Top" />
   
</Grid>
</
Window>

Now add the following namespace to establish the connection from the SQL server.

using System.Data;
using System.Data.SqlClient;

Window.xaml.cs:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Data;
using System.Data.SqlClient;

namespace ComboBox
{
   
public partial class Window1 : Window
   
{
        public Window1()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
           
DataSet ds = new DataSet();
           
SqlConnection con = new SqlConnection("Data source=.;initial catalog=Puru;uid=sa;password=;");
            SqlCommand cmd = new SqlCommand("select CountryId,Country from Country", con);
            SqlDataAdapter sqlDa = new SqlDataAdapter();
            sqlDa.SelectCommand = cmd;
            sqlDa.Fill(ds);
            comboBox1.DataContext = ds.Tables[0].DefaultView;
            comboBox2.DataContext = ds.Tables[0].DefaultView;
        }

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            comboBox2.Visibility = System.Windows.
Visibility.Visible;
            comboBox1.Visibility = System.Windows.
Visibility.Hidden;
        }

        private void Button2_Click(object sender, RoutedEventArgs e)
        {
            comboBox1.Visibility = System.Windows.
Visibility.Visible;
            comboBox2.Visibility = System.Windows.
Visibility.Hidden;
        }
    }
}

Now debug the application: The Following output will occur.



Figure 3:

Click on button1 like this

Figure 4:

The Following output will occur.

Figure 5: data in combobox.

When you Click on button2, Then the Following output will occur.

Figure 6: Multiple columns in a combobox.

Purushottam Rathore

I am working as a Software Developer and has 6 years of experience on Microsoft Technology and having a Master Degree in Computer Application. I really like to work in the .NET platform. and working with ASP.NET 2.0/3.5/... Read more

COMMENT USING

Trending up