Bindings in Silverlight - Bonus post :)

Hi ,
  I was just experimenting with the listbox and combobox ,and decided to combine and use the two together. 
 Effectively,  I want to have a listbox , which contains several combo boxes instead of regular text. 

 And it should all be done with data binding.

So the first step is to create sample data.
 With this requirement in mind, i  decided to create a few classes.

  public class MyObject
    {
        public int Id { get; set; }
    }

  public class encaps
    {
        public List<MyObject> mylist{get;set;}
    }

 As you can see, the data i want to display in the ComboBoxes are integers.  The objects of encaps will be the ItemSource for the Listbox .

We need to bind data to the listbox, and each of that data inturn should be bound to a combo box. So we make use of List<> collection. Create the sample data as shown below.


         List<encaps> l = new List<encaps>();

            for (int j = 0; j < 10; j++)
            {
                List<MyObject> myo = new List<MyObject>();
                for (int i = 0; i < 10; i++)
                {
                    MyObject m = new MyObject();
                    m.Id = i*j;
                    myo.Add(m);
                }
                encaps e = new encaps();
                e.mylist = myo;
                l.Add(e);
            }

            listBox1.ItemsSource = l;
         
The second step is to  create Data templates for the listbox and combobox to display the items.   So you need to change the xaml accordingly.


  <ListBox Height="193" HorizontalAlignment="Left" Margin="48,28,0,0" Name="listBox1" VerticalAlignment="Top" Width="325" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="{Binding Path=mylist}" >
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Width="35"  Height="35" Text="{Binding Path=Id}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                     </ComboBox>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


Observe the bindings here.  The property Id is retrieved from the mylist because the Combobox is exposing that to the TextBlock.    We get our required output, without much effort at all  :)  This can be great for scenarios where you need to show multiple combo boxes . And that's it. We are done .

I haven't changed the width of the combo boxes. You can set them in the Xaml for a nice look and feel.
This same scenario can be done for a data grid also. Just try experimenting and see if it works . All the best :)

Bindings in Silverlight - Binding to ListBox

Hi, and welcome back.  this is the last post of the Bindings in Silverlight Mini Series .  In this we will see how we can bind data to the ListBox. We will make use of Templates for customising the display.

1) We will write the familiar classes - One for providing us the data and one for the Converter

  public class Vals
    {
        public int val1 { get; set; }
        public int val2 { get; set; }
        public  Vals(int n1,int n2)
        {
        val1 = n1;
        val2 = n2;
        }
    }


    public class MyConv : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int i = Int32.Parse(value.ToString());
            if ( i > 6  &&  i % 5  != 0  &&i  <14  )
            {
                return "Red";
            }
            else if (i < 10)
            {
                return "Blue";
            }
            else
            {
                return "Green";
            }
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }


2) Now that we have them in place, lets go and add ListBox to the Xaml , and use an ItemTemplate  to customise it.

 <ListBox Height="345" HorizontalAlignment="Left" Margin="24,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="255" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel >
                        <TextBox  Background="{Binding Path=val1, Converter={StaticResource myConvStatic} }" Text="{Binding val1}" Width="50"></TextBox>
                        <TextBox Background="{Binding Path=val1, Converter={StaticResource myConvStatic} }" Text="{Binding val2}" Width="50"></TextBox>
                  </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


3)  As you can see , the ItemTemplate of the ListBox contains a DataTemplate tag.  It is the model for how your data should be presented. It can contain only one item , so we use a StackPanel /grid/Canvas  type of structure, to add multiple items .  In case you only want a single item like a textbox, then we can use that directly.

4)   Now add some data to your program in the MainPage constructor
  
           List<Vals> a = new List<Vals>();
            for (int i = 1; i < 10; i++)
            {
                a.Add(new Vals(i*2,i*5));
            }
            listBox1.ItemsSource = a;

Run your program  and you will see the following output.

This ends this Mini Series. Hope you enjoyed the bindings in Silverlight.