C# Programming for beginners: Web Service Example

C# Programming for beginners: Web Service Example: Introduction Web service , which promote software re-usability in distributed systems where applications execute across multiple computers ...

C# Programming for beginners: Simple Two Way Data Binding Application in Silverl...

C# Programming for beginners: Simple Two Way Data Binding Application in Silverl...: Using this simple application I hope to explain basic data binding technique in silverlight. 1. First create a new silverlight application ...

C# Programming for beginners: DataGrid Control In Silverlight

C# Programming for beginners: DataGrid Control In Silverlight: Before we start we will discuss some basic about silverlight Datagrid. Column Collection If you want to have some additional control over ...

DataGrid Control In Silverlight

Before we start we will discuss some basic about silverlight Datagrid. Column Collection If you want to have some additional control over the columns in silverlight DataGrid we want to use Column collection.But first you need to AutogenerateColumns property on grid to false (Otherwise you will get all the auto-generated columns with you define columns). After that you can generate the columns manually. In DataGrid columns are define using the Columns collection. In silverlight you can use three type of columns within a Columns collection and all of them are inherit from DataGridColumn.

DataGridTextColumn

DataGridCheckBoxColumn

DataGridTemplateColumn

Example :

            <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Name" Binding="{Binding FristName}" />
                    <sdk:DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
                    <sdk:DataGridCheckBoxColumn Header="Male" Binding="{Binding Male}"/>

                    <sdk:DataGridTemplateColumn Header="TwoName">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Padding="5,0,5,0" Text="{Binding FristName,Mode=TwoWay}"/>
                                    <TextBlock Text="{Binding SecondName,Mode=TwoWay}"/>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Padding="5,0,5,0" Text="{Binding FristName,Mode=TwoWay}"/>
                                    <TextBlock Text="{Binding SecondName,Mode=TwoWay}"/>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

Now we will start our sample application. 1.Create a new Silverlight project and Name it as SilverlightDataGrid. 2. Add new class called Person to your silverlight project and implement the class as below.

    public class Person
    {
        public string FirstName { get; set; }
        public string SecondName { get; set; }
        public int Age { get; set; }
        public bool Male { get; set; }

        public static ObservableCollection<Person> GetData()
        {
            ObservableCollection<Person> data = new ObservableCollection<Person>();
            data.Add(new Person() { FirstName = "Erandika", SecondName = "Sandaruwan", Age = 25, Male = true});
            data.Add(new Person() { FirstName = "Sachinthana", SecondName = "Vidulakshi", Age = 23, Male = false});
            data.Add(new Person() { FirstName = "Chathura", SecondName = "Achini", Age = 27, Male = false});
            data.Add(new Person() { FirstName = "Niluka", SecondName = "Dilani", Age = 30, Male = false});
            data.Add(new Person() { FirstName = "Krishantha", SecondName = "Nawarathne", Age = 33, Male = true});
            data.Add(new Person() { FirstName = "Lahiru", SecondName = "Kariyawasam", Age = 30, Male = true});

            return data;
        }
    }

3. Add the DataGrid to the MainPage.xaml. And designed the DataGrid as below.

    <Grid x:Name="LayoutRoot" Background="White">

        <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" />
                <sdk:DataGridTextColumn Header="Second Name" Binding="{Binding SecondName}" />
                <sdk:DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
                <sdk:DataGridCheckBoxColumn Header="Male" Binding="{Binding Male}"/>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

    </Grid>

4. We already implemented our Person class and designed our XAML. Now we need to bind the data to DataGrid.To do that we need to do some coding in MainPage.xaml.cs class. First We need to implement the Load event for the page.Then inside the Load event we will bind data to the DataGrid.

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.PersonGrid.ItemsSource = Person.GetData();
        }
    }

5. Now Run your application and you will see output like below. [caption id="attachment_79" align="aligncenter" width="557" caption="Final Output"][/caption] Download Source Code : Here

Simple Two Way Data Binding Application in Silverlight

Using this simple application I hope to explain basic data binding technique in silverlight. 1. First create a new silverlight application and named it as BasicSilverlightApp. 2. Now design your main grid like bellow

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Name:" VerticalAlignment="Center" Margin="5"/>
        <TextBox Text="{Binding Name,Mode=TwoWay}" VerticalAlignment="Center" Grid.Column="1" Margin="5"/>

        <TextBlock Text="Age:" VerticalAlignment="Center" Grid.Row="1" Margin="5"/>
        <TextBox Text="{Binding Age,Mode=TwoWay}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5"/>

        <TextBlock Text="Location" VerticalAlignment="Center" Grid.Row="2" Margin="5"/>
        <TextBox Text="{Binding Location,Mode=TwoWay}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5"/>

    </Grid>

3. Now we do some coding in MainPage.xaml.cs page.First we will add a loaded event handler to the page.

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            throw new NotImplementedException();
        }
    }

Now we will add a class called Person to define a Person object and to enable the Two way binding we have to implement Person has from INotifyPropertyChanged interface.This will help to create a change event for each property.

    public class Person : INotifyPropertyChanged
    {
        private string _name;
        private int _age;
        private string _location;

        public event PropertyChangedEventHandler PropertyChanged;

        private void CatchPropertyChange(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }

        public string Name
        {
            get
            {
                return _name;
            }
            set
            {
                _name = value;
                CatchPropertyChange("Name");
            }
        }

        public int Age
        {
            get
            {
                return _age;
            }
            set
            {
                _age = value;
                CatchPropertyChange("Age");
            }
        }

        public string Location
        {
            get
            {
                return _location;
            }
            set
            {
                _location = value;
                CatchPropertyChange("Location");
            }
        }

    }

4.Now we created out Person class and now we will create an instance of the Person class and set it to the LayoutRoot's DataContext.

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            Person person = new Person()
            {
                Name="Erandika Sandaruwan",
                Age=25,
                Location="Gampaha"
            };

            this.LayoutRoot.DataContext = person;
        }

5. Now you can run your silverlight application and then you will see the following output. [caption id="attachment_66" align="aligncenter" width="557" caption="Output"][/caption] Download Source Code Here : Download