Sunday, November 8, 2015

Adding combo Box Items from code behind

In my previous blog WPF Combo Box we saw how to create simple combo box and combo box items in XAML. Here we will see how to add combo box items from code behind (.cs) file


<Window x:Class="ComboBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Name="CountryLabel" Content="Country" Grid.Row="0" Grid.Column="0" Height ="25" Margin="5"></Label>
        <ComboBox Name="CountryComboBox"  Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5">           
        </ComboBox>
    </Grid>

</Window>


.cs file
1. By calling method LoadComboBoxData.

namespace ComboBoxDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            CountryComboBox.ItemsSource = LoadComboBoxData();
        }

        private string[] LoadComboBoxData()
        {
            var array = new[] {"Austria", "Belgium", "China", "Germany", "India", "Norway"};
            return array;
        }
    }
}

2.  directly adding items in the comboBox

 namespace ComboBoxDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            CountryComboBox.Items.Add("Austria");
            CountryComboBox.Items.Add("Belgium");
            CountryComboBox.Items.Add("China");
            CountryComboBox.Items.Add("Germany");
            CountryComboBox.Items.Add("India");
            CountryComboBox.Items.Add("Norway");
        }

    }
}

Output:















Tuesday, November 3, 2015

WPF ComboBox

WPF ComboBox:

Combobox control is used to display items in the dropdown combobox. It is similar to ListBox control but only one item from the collection is visible at a time.

By default ComboBox is non editable .It only displays items but it can be made editable by setting IsEditable property to True

The element <comboBox> represents a comboBox control in the XAML
<comboBox></comboBox>
When we drag and drop a comboBox to the window this causes the visual studio to insert the comboBox element in the xaml file.
  • Adding combo box in WPF window
<Window x:Class="ComboBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Name="CountryLabel" Content="Country" Grid.Row="0" Grid.Column="0" Height ="25" Margin="5"></Label>
        <ComboBox Name="CountryComboBox" Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5"></ComboBox>
    </Grid>
</Window>


    • Adding items in the combo box 
    <ComboBox Name="CountryComboBox" Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5">
         <ComboBoxItem Content="Austria"></ComboBoxItem>
         <ComboBoxItem Content="Belgium"></ComboBoxItem>
         <ComboBoxItem Content="China"></ComboBoxItem>
         <ComboBoxItem Content="Germany"></ComboBoxItem>
         <ComboBoxItem Content="India"></ComboBoxItem>
         <ComboBoxItem Content="Norway"></ComboBoxItem>
    </ComboBox>









    • Making a ComboBoxItem selected as default when loaded Eg: country Austria selected as default, do do that we use the property IsSelected="True" in the comboBoxItem

           <ComboBoxItem IsSelected="True" Content="Austria"></ComboBoxItem>



    • Lets customize the combo box items by inserting the flag images along with the country name.
    Eg:











            <ComboBox Name="CountryComboBox"  Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5">
                <ComboBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/flag_of_Austria.gif"  Height="24" Width="24"></Image>
                        <TextBlock Text="Austria" ></TextBlock>
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/flag_of_Belgium.gif"  Height="24" Width="24"></Image>
                        <TextBlock Text="Belgium" ></TextBlock>
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/flag_of_China.gif"  Height="24" Width="24"></Image>
                        <TextBlock Text="China" ></TextBlock>
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/flag_of_Germany.gif"  Height="24" Width="24"></Image>
                        <TextBlock Text="Germany" ></TextBlock>
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/flag_of_India.gif"  Height="24" Width="24"></Image>
                        <TextBlock Text="India" ></TextBlock>
                    </StackPanel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/flag_of_Norway.gif"  Height="24" Width="24"></Image>
                        <TextBlock Text="Norway" ></TextBlock>
                    </StackPanel>
                </ComboBoxItem>

            </ComboBox>