Silverlight中DataGrid控制元件動態生成列並結合DataPager進行分頁
1、準備一個實體類
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> ///電流資料 的摘要說明 /// </summary> public class DL { public int ID { get; set; } public int 泵站ID { get; set; } public string 機組編號 { get; set; } public decimal 電流 { get; set; } public DateTime 時間 { get; set; } }
2、編寫一個WebService,名稱為:getBZInfo.asmx,提供給Silverlight應用程式使用,getBZInfo.cs檔案中的程式碼如下,很簡單就是呼叫資料庫訪問類,返回一個實體類集合。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using USTC; using System.Data; using System.Text; /// <summary> ///getBZInfo 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //若要允許使用 ASP.NET AJAX 從指令碼中呼叫此 Web 服務,請取消對下行的註釋。 // [System.Web.Script.Services.ScriptService] public class getBZInfo : System.Web.Services.WebService { DMBZ dm = new DMBZ(); public getBZInfo() { //如果使用設計的元件,請取消註釋以下行 //InitializeComponent(); } #region 電流資料 /// <summary> ///獲取某個泵站下某個機組的電流資料 /// </summary> /// <param name="bzid"></param> /// <param name="jzbh"></param> /// <returns></returns> [WebMethod(Description = " 獲取某個泵站下某個機組的電流資料")] public DL[] getDLInfoByBH(string bzid, string jzbh) { List<DL> list = new List<DL>(); string sql = "select * FROM 電流資料 where 泵站ID='" + bzid + "' and 機組編號='" + jzbh + "'"; DataSet ds = dm.getsql(sql); if (ds.Tables[0].Rows.Count > 0) { for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { DL item = new DL(); item.泵站ID = int.Parse(bzid); item.機組編號 = jzbh; item.電流 = decimal.Parse(ds.Tables[0].Rows[i]["電流"].ToString()); item.時間 = DateTime.Parse(ds.Tables[0].Rows[i]["時間"].ToString()); //將資料新增到集合中去 list.Add(item); } } return list.ToArray(); } #endregion }
3、編譯並生成asp.net專案後,右鍵getBZInfo.asmx,選擇在瀏覽器中瀏覽,確保可以訪問。
4、在Silverlight專案中新增服務引用,發現並新增上面生成的服務,服務命名為bzService,新增成功以後,修改產生的配置檔案:ServiceReferences.ClientConfig
<configuration> <system.serviceModel> <bindings> <basicHttpBinding> <binding name="getBZInfoSoap" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647"> <security mode="None" /> </binding> </basicHttpBinding> </bindings> <client> <endpoint address="http://localhost:1245/webservice/getBZInfo.asmx" binding="basicHttpBinding" bindingConfiguration="getBZInfoSoap" contract="bzService.getBZInfoSoap" name="getBZInfoSoap" /> </client> </system.serviceModel> </configuration>
中的<endpoint address="http://localhost:1245/webservice/getBZInfo.asmx" binding="basicHttpBinding" bindingConfiguration="getBZInfoSoap" contract="bzService.getBZInfoSoap" name="getBZInfoSoap" />
中的address修改成專案的相對路徑,修改後如下:
<endpoint address="../webservice/getBZInfo.asmx" binding="basicHttpBinding" bindingConfiguration="getBZInfoSoap" contract="bzService.getBZInfoSoap" name="getBZInfoSoap" />
5、在xaml檔案中新增一個DataGrid控制元件和DataPager控制元件
<UserControl
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"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:local="clr-namespace:spjl1"
xmlns:Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
mc:Ignorable="d"
x:Class="spjl1.yxjk2" Width="820" Height="405" Loaded="UserControl_Loaded">
<UserControl.Resources>
<local:DateTimeConverter x:Key="DateTimeConverter" />
<Style x:Key="DataGridHeaderStyle" TargetType="Primitives:DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
</Style>
<Style x:Key="DataGridCellStyle" TargetType="sdk:DataGridCell">
<Setter Property="HorizontalContentAlignment" Value="Center" ></Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<sdk:DataGrid x:Name="DataGrid1" AutoGenerateColumns="False" LoadingRow="DataGrid1_LoadingRow">
</sdk:DataGrid>
<sdk:DataPager x:Name="DataPager1" PageSize="6" DisplayMode="FirstLastPreviousNext" PageIndexChanged="DataPager1_PageIndexChanged" Height="20" VerticalAlignment="Bottom" d:LayoutOverrides="Width"/>
</Grid>
</UserControl>
6、新增一個時間轉換類DateTimeConverter.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;
using System.Globalization;
using System.Windows.Data;
namespace spjl1
{
#region 為日期定義轉換器
//定義一個轉換類 並被頁面引用為資源
/*
* IValueConverter - 值轉換介面,將一個型別的值轉換為另一個型別的值。它提供了一種將自定義邏輯應用於繫結的方式
* Convert - 正向轉換器。將值從資料來源傳給繫結目標時,資料繫結引擎會呼叫此方法
* ConvertBack - 反向轉換器。將值從繫結目標傳給資料來源時,資料繫結引擎會呼叫此方法
*/
/// <summary>
/// 正向轉換器。將值從資料來源傳給繫結目標時,資料繫結引擎會呼叫此方法
/// </summary>
/// <param name="value">轉換之前的值</param>
/// <param name="targetType">轉換之後的型別</param>
/// <param name="parameter">轉換器所使用的引數</param>
/// <param name="culture">轉換器所使用的區域資訊</param>
/// <returns>轉換後的值</returns>
public class DateTimeConverter : IValueConverter
{
public object Convert(object value,
Type targetType,
object parameter,
CultureInfo culture)
{
DateTime date = (DateTime)value;
return date.ToString("yyyy-MM-dd HH:mm:ss");
}
/// <summary>
/// 反向轉換器。將值從繫結目標傳給資料來源時,資料繫結引擎會呼叫此方法
/// </summary>
/// <param name="value">轉換之前的值</param>
/// <param name="targetType">轉換之後的型別</param>
/// <param name="parameter">轉換器所使用的引數</param>
/// <param name="culture">轉換器所使用的區域資訊</param>
/// <returns>轉換後的值</returns>
public object ConvertBack(object value,
Type targetType,
object parameter,
CultureInfo culture)
{
string strValue = value.ToString();
DateTime resultDateTime;
if (DateTime.TryParse(strValue, out resultDateTime))
{
return resultDateTime;
}
return value;
}
}
#endregion
}
7、在xaml.cs檔案中新增程式碼並繫結資料,這裡增加一個功能就是沒1分鐘重新整理顯示一次實時資料,使用DispatcherTimer來實現。
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;
using System.Windows.Threading;
using spjl1.bzService;
using System.Collections.ObjectModel;
using System.Windows.Data;
using System.Text;
using System.Windows.Markup;
namespace spjl1
{
public partial class yxjk2 : UserControl
{
public yxjk2()
{
InitializeComponent();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
//每一分鐘更新一次資料
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(60);
timer.Tick += new EventHandler(timer_Tick);
timer.Start();
}
void timer_Tick(object sender, EventArgs e)
{
//清空資料及分頁控制元件源
this.DataGrid1.ItemsSource = null;
this.DataGrid1.Columns.Clear();
this.DataPager1.Source = null;
//載入電流資料
getBZInfoSoapClient client = new getBZInfoSoapClient();
client.getDLInfoByBHCompleted += new EventHandler<getDLInfoByBHCompletedEventArgs>(client_getDLInfoByBHCompleted);
client.getDLInfoByBHAsync(bzid, jzbh); //這裡的2個值是根據實際來賦值的
}
void client_getDLInfoByBHCompleted(object sender, getDLInfoByBHCompletedEventArgs e)
{
ObservableCollection<DL> result = e.Result;
//動態生成列
this.DataGrid1.Columns.Add(CreateDataGridTextColumn("電流", "電流(安培)", 180));
this.DataGrid1.Columns.Add(CreateDateTimeTemplate("時間", "時間", 400));
PagedCollectionView itemListView = new PagedCollectionView(result);
this.DataGrid1.ItemsSource = itemListView;
this.DataPager1.Source = itemListView;
}
#region 動態生列方法
/// <summary>
/// 產生模板列(帶格式化時間)
/// </summary>
/// <param name="headername"></param>
/// <param name="bindingname"></param>
/// <param name="width"></param>
/// <returns></returns>
public DataGridTemplateColumn CreateDateTimeTemplate(string headername, string bindingname, double width)
{
DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
templateColumn.Header = headername;
StringBuilder CellTemp = new StringBuilder();
CellTemp.Append("<DataTemplate ");
CellTemp.Append("xmlns='http://schemas.microsoft.com/winfx/");
CellTemp.Append("2006/xaml/presentation' ");
CellTemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
CellTemp.Append("xmlns:local='clr-namespace:spjl1");
CellTemp.Append(";assembly=spjl1'>");
CellTemp.Append("<Grid>");
CellTemp.Append("<Grid.Resources>");
CellTemp.Append("<local:DateTimeConverter x:Key='DateTimeConverter' />");
CellTemp.Append("</Grid.Resources>");
CellTemp.Append("<TextBlock ");
CellTemp.Append("Text = '{Binding " + bindingname + ", ");
CellTemp.Append("Converter={StaticResource DateTimeConverter}}' ");
CellTemp.Append("Margin='4'/>");
CellTemp.Append("</Grid>");
CellTemp.Append("</DataTemplate>");
templateColumn.CellTemplate = (DataTemplate)XamlReader.Load(CellTemp.ToString());
templateColumn.HeaderStyle = (Style)Resources["DataGridHeaderStyle"];
templateColumn.CellStyle = (Style)Resources["DataGridCellStyle"];
templateColumn.CanUserSort = true;
templateColumn.IsReadOnly = true;
templateColumn.Width = new DataGridLength(width);
return templateColumn;
}
/// <summary>
/// 建立DataGridTextColumn模板列
/// </summary>
/// <param name="columnBindName">需要繫結的欄位名</param>
/// <param name="columnHeaderName">模板列的Header</param>
/// <param name="width">模板列的寬度</param>
/// <returns></returns>
public DataGridTextColumn CreateDataGridTextColumn(string columnBindName, string columnHeaderName, double width)
{
DataGridTextColumn dgtextColumn = new DataGridTextColumn();
dgtextColumn.Binding = new Binding(columnBindName);
dgtextColumn.Header = columnHeaderName;
dgtextColumn.HeaderStyle = (Style)Resources["DataGridHeaderStyle"];
dgtextColumn.CellStyle = (Style)Resources["DataGridCellStyle"];
dgtextColumn.IsReadOnly = true;
dgtextColumn.Width = new DataGridLength(width);
return dgtextColumn;
}
#endregion
}
}
8、最終產生的區域性效果圖如下: