1. 创建一个siverlight项目。
2. 在silverlight项目中添加一个类owner.cs,用来作为数据源实体。
using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightApplication_DiplayingData { public class Owner { public int OwnerId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Address { get; set; } public string ZipCode { get; set; } public string City { get; set; } public string State { get; set; } public string Country { get; set; } public DateTime BirthDate { get; set; } public DateTime CustomerSince { get; set; } public string ImageName { get; set; } public DateTime LastActivityDate { get; set; } public double CurrentBalance { get; set; } public double LastActivityAmount { get; set; } } }
3.在MainPage.xaml.cs文件中实例化owner.cs类。
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightApplication_DiplayingData { public partial class MainPage : UserControl { private Owner owner; public MainPage() { InitializeComponent(); //初始化Owner数据 InitializeOwner(); } private void InitializeOwner() { owner = new Owner(); owner.OwnerId = 1234567; owner.FirstName = "John"; owner.LastName = "Smith"; owner.Address = "Oxford Street 24"; owner.ZipCode = "W1A"; owner.City = "London"; owner.Country = "United Kingdom"; owner.State = "NA"; owner.ImageName = "man.jpg"; owner.LastActivityAmount = 100; owner.LastActivityDate = DateTime.Today; owner.CurrentBalance = 1234.56; owner.BirthDate = new DateTime(1953, 6, 9); owner.CustomerSince = new DateTime(1999, 12, 20); } } }
4. 在mainPage.xaml文件中使用绑定标记扩展(控件属性名="{Binding 数据源实例对象的属性名}")来绑定控件的要绑定的Owner.cs实例的属性。
<UserControl x:Class="SilverlightApplication_DiplayingData.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Height="482.333" Width="389.333"> <Grid x:Name="LayoutRoot" Background="LightGray" Margin="0,0,-6,0"> <Grid.RowDefinitions> <RowDefinition Height="300"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="400"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid x:Name="OwnerDetailsGrid" Grid.Column="0" VerticalAlignment="Stretch" Background="LightGray" Margin="19,10.333,81,-130.333" ShowGridLines="False" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" > <Grid.RenderTransform> <CompositeTransform Rotation="-0.237"/> </Grid.RenderTransform> <Grid.RowDefinitions> <RowDefinition Height="28"></RowDefinition> <RowDefinition Height="31"></RowDefinition> <RowDefinition Height="25"></RowDefinition> <RowDefinition Height="28"></RowDefinition> <RowDefinition Height="28" ></RowDefinition> <RowDefinition Height="29"></RowDefinition> <RowDefinition Height="25"></RowDefinition> <RowDefinition Height="24"></RowDefinition> <RowDefinition Height="26"></RowDefinition> <RowDefinition Height="28"></RowDefinition> <RowDefinition Height="22"></RowDefinition> <RowDefinition Height="66.333"></RowDefinition> <RowDefinition Height="20"></RowDefinition> <RowDefinition Height="20"></RowDefinition> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock x:Name="OwnerIdTextBlock" Grid.Row="1" FontWeight="Bold" Margin="2" Text="Owner ID:"></TextBlock> <TextBlock x:Name="FirstNameTextBlock" Grid.Row="2" FontWeight="Bold" Margin="2" Text="First name:"></TextBlock> <TextBlock x:Name="LastNameTextBlock" Grid.Row="3" FontWeight="Bold" Margin="2" Text="Last name:"></TextBlock> <TextBlock x:Name="AddressTextBlock" Grid.Row="4" FontWeight="Bold" Margin="2" Text="Adress:"></TextBlock> <TextBlock x:Name="ZipCodeTextBlock" Grid.Row="5" FontWeight="Bold" Margin="2" Text="Zip code:"></TextBlock> <TextBlock x:Name="CityTextBlock" Grid.Row="6" FontWeight="Bold" Margin="2" Text="City:"></TextBlock> <TextBlock x:Name="StateTextBlock" Grid.Row="7" FontWeight="Bold" Margin="2" Text="State:"></TextBlock> <TextBlock x:Name="CountryTextBlock" Grid.Row="8" FontWeight="Bold" Margin="2" Text="Country:"></TextBlock> <TextBlock x:Name="BirthDateTextBlock" Grid.Row="9" FontWeight="Bold" Margin="2" Text="Birthdate:"></TextBlock> <TextBlock x:Name="CustomerSinceTextBlock" Grid.Row="10" FontWeight="Bold" Margin="2" Text="Customer since:"></TextBlock> <TextBlock x:Name="CurrentBalanceTextBlock" Grid.Row="11" FontWeight="Bold" Margin="2,42,2,1.333" Text="Current balance:"></TextBlock> <TextBlock x:Name="LastActivityDateTextBlock" Grid.Row="12" FontWeight="Bold" Margin="2,1.667,2,2.333" Text="Last activity on:"></TextBlock> <TextBlock x:Name="LastActivityAmountTextBlock" Grid.Row="13" FontWeight="Bold" Margin="2,1.667,2,2.333" Text="Amount:"></TextBlock> <TextBlock x:Name="OwnerIdValueTextBlock" Grid.Row="1" Grid.Column="1" Margin="2" Text="{Binding OwnerId}" ></TextBlock> <TextBlock x:Name="FirstNameValueTextBlock" Grid.Row="2" Grid.Column="1" Margin="2" Text="{Binding FirstName}" ></TextBlock> <TextBlock x:Name="LastNameValueTextBlock" Grid.Row="3" Grid.Column="1" Margin="2" Text="{Binding LastName}" ></TextBlock> <TextBlock x:Name="AddressValueTextBlock" Grid.Row="4" Grid.Column="1" Margin="2" Text="{Binding Address}" ></TextBlock> <TextBlock x:Name="ZipCodeValueTextBlock" Grid.Row="5" Grid.Column="1" Margin="2" Text="{Binding ZipCode}" ></TextBlock> <TextBlock x:Name="CityValueTextBlock" Grid.Row="6" Grid.Column="1" Margin="2" Text="{Binding City}" ></TextBlock> <TextBlock x:Name="StateValueTextBlock" Grid.Row="7" Grid.Column="1" Margin="2" Text="{Binding State}" ></TextBlock> <TextBlock x:Name="CountryValueTextBlock" Grid.Row="8" Grid.Column="1" Margin="2" Text="{Binding Country}" ></TextBlock> <TextBlock x:Name="BirthDateValueTextBlock" Grid.Row="9" Grid.Column="1" Margin="2" Text="{Binding BirthDate}"></TextBlock> <TextBlock x:Name="CustomerSinceValueTextBlock" Grid.Row="10" Grid.Column="1" Margin="2" Text="{Binding CustomerSince}" ></TextBlock> <TextBlock x:Name="CurrentBalanceValueTextBlock" Grid.Row="11" Grid.Column="1" Margin="2,42,2,1.333" Text="{Binding CurrentBalance}" ></TextBlock> <TextBlock x:Name="LastActivityDateValueTextBlock" Grid.Row="12" Grid.Column="1" Margin="2,1.667,2,2.333" Text="{Binding LastActivityDate}" ></TextBlock> <TextBlock x:Name="LastActivityAmountValueTextBlock" Grid.Row="13" Grid.Column="1" Margin="2,1.667,2,2.333" Text="{Binding LastActivityAmount}" ></TextBlock> </Grid> </Grid> </UserControl>
5. 再MinPage.xaml.cs文件中给Grid控件指定数据源(Owner.cs的实例)
public MainPage() l { l InitializeComponent(); l l //初始化Owner数据 l InitializeOwner(); l //给Grid控件指定数据源 l OwnerDetailsGrid.DataContext = owner; l }
5. 运行,效果如下:
总结:
Data Binding的前端ui书写格式:
<TextBlock Text="{Binding CustomerSince}" />
或者
<TextBlock Text="{Binding Path=CustomerSince}" />
通用格式为:
<TargetControl TargetProperty="{Binding SourceProperty,
SomeBindingProperties}" />
二、手动绑定数据
如果silverlight 不支持数据绑定(Data Bingding),我们就需要手动编写代码来绑定。
1.写一个类
public class ManualOwner { public int OwnerId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Address { get; set; } public string ZipCode { get; set; } public string City { get; set; } public string State { get; set; } public string Country { get; set; } public DateTime BirthDate { get; set; } public DateTime CustomerSince { get; set; } public string ImageName { get; set; } public DateTime LastActivityDate { get; set; } public double CurrentBalance { get; set; } public double LastActivityAmount { get; set; } }
2.Xaml的部分代码
<TextBlock x:Name="OwnerIdValueTextBlock" Grid.Row="1 Grid.Column="1" Margin="2" > </TextBlock> <TextBlock x:Name="FirstNameValueTextBlock" Grid.Row="2" Grid.Column="1" Margin="2" > </TextBlock> <TextBlock x:Name="LastNameValueTextBlock" Grid.Row="3" Grid.Column="1" Margin="2" > </TextBlock> <TextBlock x:Name="AddressValueTextBlock" Grid.Row="4" Grid.Column="1" Margin="2" > </TextBlock>
3.手动绑定数据
public MainPage() { InitializeComponent(); //initialize owner data InitializeOwner();//初始化类 SetOwnerValues(); } private void SetOwnerValues() { OwnerIdValueTextBlock.Text = owner.OwnerId.ToString();//给控件绑定值 FirstNameValueTextBlock.Text = owner.FirstName; LastNameValueTextBlock.Text = owner.LastName; AddressValueTextBlock.Text = owner.Address; //other values go here }
总结:
这样我们就在不使用Data Binding的情况下 手动的完成了和数据的绑定。
Data Bingding 能够使我们写更少的代码,也能减少可能出现的错误。
三、在XAML文件中创建数据源并且绑定。
1.新建一个silverlight 项目,新建一个类Owner.cs
using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightApplication1 { public class Owner { public int MyID { get; set; } public string MyName { get; set; } public int MyAge { get; set; } } }
2.在Xaml文件中指定命名间:
xmlns:local="clr-namespace:SilverlightApplication1"
3.在xaml文件中初始化类Owner.cs
<UserControl.Resources> <local:Owner x:Key="localOwner" MyName="Xiaodao" MyAge="23" MyID="520" > </local:Owner> </UserControl.Resources>
4.数据绑定到控件
<TextBlock x:Name="OwnerIdValueTextBlock" Margin="10,4,-6,0" Text="{Binding MyID,Source={StaticResource localOwner}}" Foreground="#FF182874" /> <TextBlock x:Name="FirstNameValueTextBlock" Margin="10,85,-6,-81" Text="{Binding MyName,Source={StaticResource localOwner}}" /> <TextBlock x:Name="LastNameValueTextBlock" Margin="10,44,-6,-40" Text="{Binding MyAge,Source={StaticResource localOwner}}" RenderTransformOrigin="0.492,0.642" />
运行效果如下图: