WPF Country Combobox

• Download source - 257.57 KB

Introduction

This article will help you to create a country combobox with country flags. You will be able to understand the capability of WPF converters while binding.

Background

The reader is assumed to be at least a beginner in WPF who knows the basics of data binding techniques, dependency properties, etc.

Using the Code

You first create a WPF usercontrol "countryDropdown" in which you place a WPF combobox. Bind country data from a dependency property. Add data template for the combobox in which it is divided into two parts; one is an image where flag image is shown and the other is the country name part which is a textblock.

Code for CountryDropdown.xaml

<UserControl x:Class="Customcontrols.CountryDropdown" Name="ucCountryCombo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Convert="clr-namespace:Customcontrols.Converter" 
             mc:Ignorable="d" 
            Height="40" Width="200">
    <UserControl.Resources>
        <Convert:Converter x:Key="Converters"></Convert:Converter>
    </UserControl.Resources>
    <Grid>
        <ComboBox Name="CountryrCombo" 
    ItemsSource="{Binding ElementName=ucCountryCombo, Path=Countries}" 
	SelectedValuePath="code"  SelectedValue="{Binding ElementName=ucCountryCombo, 
	Path=SelectedCountry}" >
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="20" Height="20" Margin="5" 
			Source="{Binding code, 
			Converter={StaticResource Converters}}"/>
                        <TextBlock Margin="5" Text="{Binding country_Text}"/>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</UserControl>

Two dependency properties are being created in the CS file.

Countries property is used to load the whole country names and SelectedCountry property is used for setting the selected country from the list.

In this combobox control, the country data is stored in an XML file in which you have a list of all countries till date along with their ISO country codes. You can download the country XML from here. We can either directly read XML data into a dataset using built-in function or you can use LINQ to XML for reading the data.

Code for CountryDropdown.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
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;

namespace Customcontrols
{
    /// <summary>
    /// Interaction logic for CountryDropdown.xaml
    /// </summary>
    public partial class CountryDropdown : UserControl
    {
        public CountryDropdown()
        {
            InitializeComponent();
            Countries = GetData();
        }
        public DataTable Countries
        {
            get { return (DataTable)GetValue(CountriesProperty); }
            set { SetValue(CountriesProperty, value); }
        }
        
        public static readonly DependencyProperty CountriesProperty =
            DependencyProperty.Register("Countries", 
	   typeof(DataTable), typeof(CountryDropdown), new UIPropertyMetadata(null));

        public String SelectedCountry
        {
            get { return (String)GetValue(SelectedCountryProperty); }
            set { SetValue(SelectedCountryProperty, value); }
        }
     
        public static readonly DependencyProperty SelectedCountryProperty =
            DependencyProperty.Register("SelectedCountry", 
	   typeof(String), typeof(CountryDropdown), new UIPropertyMetadata(null));

        public DataTable  GetData()
        {
            DataTable dt = new DataTable();

            DataSet ds = new DataSet();

            ds.ReadXml(AppDomain.CurrentDomain.BaseDirectory + "XML\\countries.xml");
            return ds.Tables[0];
        }
    }
}

Thus, we get a combo box having a datasource as a datatable which contains the whole country names and their associated ISO country codes. The next thing in this control is the associated flags. The flags icons can be downloaded from here. We get a list of icons whose file name is ISO code + extension. So the trick here is for each country data in the combobox we have an associated country code in the data source, so we can convert this ISO code to image source and bind to an image in the data template of combobox.

Code for converter.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Globalization;

namespace Customcontrols.Converter
{
    public class Converter : IValueConverter
    {
        public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
        {
            string urImage = AppDomain.CurrentDomain.BaseDirectory + 
			"Images\\Countries\\"+ value.ToString() + ".png";
            return urImage;
        }

        public object ConvertBack(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            return null;
        }
    }
} 

In the XAML, we can bind this converter for the image data. Thus, at run time, it automatically converts the ISO code to image source.

History

• 17^th April, 2011: Initial post