September 13, 2010

Application Level Data Binding in WPF


Open VS2010 Navigate to File->New Project ->Windows->WPF Application-> Give a name to the project. App.xaml and mainwindow.xaml files are created by default in the project.

WPF Project

Mainwindow.xaml.cs file is the main file where we write our code. App.xaml is used for storing the connection strings in the application.

XAML is Extensible Application Markup Language that is used for designing WPF, Silverlight applications .

Design the UI

This is the code to be written in XAML file

<Window x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="ownerdetails" Background="Azure" >
            <ColumnDefinition />
            <ColumnDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>         <TextBlock x:Name="txtCity" Margin="67,8,84,10" Grid.Row="2" TextWrapping="Wrap"  />
        <TextBlock x:Name="txtLName" Margin="67,8,84,10" Grid.Row="1" TextWrapping="Wrap"  />
        <TextBlock x:Name="txtFName" Margin="67,8,84,10" TextWrapping="Wrap"  />
        <TextBlock x:Name="txtDOB" Margin="67,8,84,10" Grid.Row="3" TextWrapping="Wrap" />
        <TextBlock x:Name="txtCountry" Margin="67,8,84,10" Grid.Row="4" TextWrapping="Wrap" />
        <TextBlock x:Name="txtOwnerID" Margin="67,8,84,10" Grid.Row="5" TextWrapping="Wrap"  />
        <TextBlock x:Name="valOwnerFName" Grid.Column="1" Margin="69,8,72,10" TextWrapping="Wrap" Text="First Name" />
        <TextBlock x:Name="valOwnerLName" Grid.Column="1" Margin="69,8,72,10" Grid.Row="1" TextWrapping="Wrap" Text="Last Name" />
        <TextBlock x:Name="valCity" Grid.Column="1" Margin="69,8,72,10" Grid.Row="2" TextWrapping="Wrap" Text="City" />
        <TextBlock x:Name="valOwnerBirthdate" Grid.Column="1" Margin="69,8,72,10" Grid.Row="3" TextWrapping="Wrap" Text="DOB" />
        <TextBlock x:Name="valownerbalance" Grid.Column="1" Margin="69,8,72,10" Grid.Row="4" TextWrapping="Wrap" Text="Owner Balance" />
        <TextBlock x:Name="valownerID" Grid.Column="1" Margin="69,8,72,10" Grid.Row="5" TextWrapping="Wrap" Text="Owner ID" />
        <Image  HorizontalAlignment="Left"  Name="image1" Stretch="Uniform"  VerticalAlignment="Bottom"  Grid.Column="1" Source="images/hima.jpg" Grid.Row="6" />

Create a class to define properties of object

Add new item (class) to the project and define userdetails class that implements following properties.

class UserDetails
        public int OwnerID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Country { get; set; }
        public string ImageName { get; set; }
        public DateTime BirthDate { get; set; }

Write the code in MainWindow.cs file

MainWindow.xaml.cs file define these following methods

//Define user Details

private void GetUserDetails()
           userdetails = new UserDetails();
           userdetails.OwnerID = 12345;
           userdetails.FirstName = "hima";
           userdetails.LastName = "Vejella";
           userdetails.ImageName = "images/hima.jpg";
           userdetails.State = "AP";
           userdetails.City = "Hyderabad";
           userdetails.Country = "India";
           userdetails.BirthDate = new DateTime(08 / 28 / 1981);


//Set the values
       private void SetValues()

           txtCity.Text = userdetails.City.ToString();
           txtDOB.Text = userdetails.BirthDate.ToString();
           txtLName.Text = userdetails.FirstName;
           txtFName.Text = userdetails.LastName;
           txtOwnerID.Text = userdetails.OwnerID.ToString();
           txtCountry.Text = userdetails.Country.ToString();


Call the above two methods in the Main window.

UserDetails userdetails;
       public MainWindow()


you can view thw output in a window as follows.


No comments: