Silverlight中DataGrid控制元件動態生成列並結合DataPager進行分頁

暖楓無敵發表於2011-09-02
控制元件

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、最終產生的區域性效果圖如下：


 

 

相關文章