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.

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"
        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 x:Name="ownerdetails" Background="Azure" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <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" />
    </Grid>
</Window>

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()
       {
           InitializeComponent();
           GetUserDetails();
           SetValues();           
       }

Output

you can view thw output in a window as follows.

 

If you bebug the application, properties are defined for the properties and they are getting assigned and called in the application initialization.  Hence they are rendered as output.

You can even directly specify the values in XAML code to bind the data dynamically. It can be done using Binding <Propertyname> or Binding <DataColumnname>

 

<TextBlock x:Name="txtCity" Margin="67,8,84,10" Grid.Row="2" TextWrapping="Wrap" Text="{Binding City }" d:LayoutOverrides="Width, Height"/>

 

http://himabinduvejella.blogspot.com/atom.xml