Silverlight DataGrid使用之一 显示篇

Silverlight DataGrid使用之一 显示篇

一、

用过asp.net的Gridview 应该熟悉datagrid控件

　　Silverlight DataGrid常用事件：

　　BeginningEdit：发生于一个单元格或行进入编辑模式之前。

　　CellEditEnded：发生于一个单元格编辑已被确认或取消。

　　CellEditEnding：发生于一个单元格正在结束编辑时。

　　CurrentCellChanged：发生于一个单元格成为当前单元格时。

　　PreparingCellForEdit：发生于在DataGridTemplateColumn下的单元格进入编辑模式时。

　　SelectionChanged：发生于当SelectedItem或SelectedItems属性值改变时。

　　Silverlight DataGrid常用方法：

　　BeginEdit：使DataGrid进入编辑状态。

　　CancelEdit：取消DataGrid的编辑状态。

　　CollapseRowGroup：闭合DataGrid的行分组。

　　CommitEdit：确认DataGrid的编辑完成。

　　ExpandRowGroup：展开DataGrid的行分组。

　　GetGroupFromItem：从具体Item中得到分组。

　　ScrollIntoView：滚动DataGrid视图。

　　Silverlight DataGrid常用属性：

　　AlternatingRowBackground：获取或设置一个笔刷用来描绘DataGrid奇数行的背景。

　　AreRowDetailsFrozen：获取或设置一个值用来判断是否冻结每行内容的详细信息。

　　AreRowGroupHeadersFrozen：获取或设置一个值用来判断是否冻结分组行的头部。

　　AutoGenerateColumns：获取或设置一个值用来判断是否允许自动生成表列。

　　CanUserReorderColumns：获取或设置一个值用来判断是否允许用户重新排列表列的位置。

　　CanUserSortColumns：获取或设置一个值用来判断是否允许用户按列对表中内容进行排序。

　　CellStyle：获取或设置单元格的样式。

　　ColumnHeaderHeight：获取或设置列头的高度。

　　ColumnHeaderStyle：获取或设置列头的样式。

　　Columns：获取组件中包含所有列的集合。

　　ColumnWidth：获取或设置列宽。

　　CurrentColumn：获取或设置包含当前单元格的列。

　　CurrentItem：获取包含当前单元格且与行绑定的数据项。

　　DragIndicatorStyle：获取或设置当拖曳列头时的样式。

　　DropLocationIndicatorStyle：获取或设置呈现列头时的样式。

　　FrozenColumnCount：获取或设置冻结列的个数。

　　GridLinesVisibility：获取或设置网格线的显示形式。

　　HeadersVisibility：获取或设置行头及列头的显示形式。

　　HorizontalGridLinesBrush：获取或设置水平网格线的笔刷。

　　HorizontalScrollBarVisibility：获取或设置水平滚动条的显示样式。

　　IsReadOnly：获取或设置DataGrid是否为只读。

　　MaxColumnWidth：获取或设置DataGrid的最大列宽。

　　MinColumnWidth：获取或设置DataGrid的最小列宽。

　　RowBackground：获取或设置用于填充行背景的笔刷。

　　RowDetailsTemplate：获取或设置被用于显示行详细部分的内容的模板。

　　RowDetailsVisibilityMode：获取或设置一个值用以判定行详细部分是否显示。

　　RowGroupHeaderStyles：获取呈现行分组头部的样式。

　　RowHeaderStyle：获取或设置呈现行头的样式。

　　RowHeaderWidth：获取或设置行头的宽度。

　　RowHeight：获取或设置每行的高度。

　　RowStyle：获取或设置呈现行时的样式。

　　SelectedIndex：获取或设置当前选中部分的索引值。

　　SelectedItem：获取或设置与当前被选中行绑定的数据项。

　　SelectedItems：获取与当前被选中的各行绑定的数据项们的列表(List)。

　　SelectionMode：获取或设置DataGrid的选取模式。

　　VerticalGridLinesBrush：获取或设置垂直网格线的笔刷。

　　VerticalScrollBarVisibility：获取或设置垂直滚动条的显示样式。

　　1指定Column列表

   <sdk:DataGrid AutoGenerateColumns="False" Height="236" HorizontalAlignment="Left" Name="dataGrid1" 
VerticalAlignment="Top" Width="368" >
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="编号"  Binding="{Binding id}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Header="文本" Binding="{Binding text}"></sdk:DataGridTextColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

　　还有个DataGridCheckBoxColumn 它主要是Checkbox选项 boolean类型 另外DataGridTemplateColumn是自定义布局数据模板

　　2 加载时候显示填色

        SolidColorBrush r = new SolidColorBrush(Colors.Red); 
        private void dataGrid1_LoadingRow(object sender, DataGridRowEventArgs e)
        {
            CData c = e.Row.DataContext as CData;
            if (c.id % 5 == 0)
                e.Row.Background = r;
            else
                e.Row.Background = new SolidColorBrush(Colors.White);

        }

　　3 Row详细显示模板

<sdk:DataGrid AutoGenerateColumns="False" Height="236" HorizontalAlignment="Left" Name="dataGrid1" VerticalAlignment="Top" Width="368" LoadingRow="dataGrid1_LoadingRow">
            <sdk:DataGrid.Columns>
                             <sdk:DataGridTextColumn Header="编号"  Binding="{Binding id}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Header="文本" Binding="{Binding text}"></sdk:DataGridTextColumn>
            </sdk:DataGrid.Columns>
            <sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <Border>
                        <Rectangle Width="auto" Height="50" Fill="Red"></Rectangle>
                    </Border>
                </DataTemplate>
            </sdk:DataGrid.RowDetailsTemplate>
        </sdk:DataGrid>

　　

Silverlight DataGrid使用之二 更新行篇

2011-06-05 16:08

首先在wcf加上一个编辑方法

    [ServiceContract]
    public interface IService1
    {

        [OperationContract]
        List<CData> GetCDatas();
        [OperationContract]
        bool EditCData(CData c);

        // TODO: 在此添加您的服务操作
    }

    // 使用下面示例中说明的数据协定将复合类型添加到服务操作
    [DataContract]
    public class CData
    {
        [DataMember]
        public int id;
        [DataMember]
        public string text;

    }

 

    [System.ServiceModel.Activation.AspNetCompatibilityRequirements(RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Required)]
    public class Service1 : IService1
    {

        public List<CData> GetCDatas()
        {
            SqlConnection cn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["sldatabaseConnectionString"].ConnectionString);
            SqlCommand  cmd=new SqlCommand ("select id,text from t1",cn);
            cn.Open();
            SqlDataReader dr=cmd.ExecuteReader( );
             List<CData> CList=new List<CData> ();
             while (dr.Read())
             {
                 CData c = new CData { id = int.Parse(dr["id"].ToString()), text = dr["text"].ToString() };
                 CList.Add(c);

             }
             cn.Close();
            return CList;

        }

        public bool EditCData(CData c)
        {

            SqlConnection cn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["sldatabaseConnectionString"].ConnectionString);
            SqlCommand cmd = new SqlCommand("update t1 set text=@text where id=@id",cn);
            cmd.Parameters.Add("@text", System.Data.SqlDbType.NVarChar).Value = c.text;
            cmd.Parameters.Add("@id", System.Data.SqlDbType.Int).Value=c.id;
            cn.Open();
            int r = cmd.ExecuteNonQuery();
            cn.Close();
            if (r > 0)
                return true;
            else
                return false;
        }
    }

在数据库 创建一个表 随便取名

 

xaml代码

   <sdk:DataGrid AutoGenerateColumns="False" Height="236" HorizontalAlignment="Left" Name="dataGrid1" VerticalAlignment="Top" Width="368" LoadingRow="dataGrid1_LoadingRow" FrozenColumnCount="1" RowEditEnded="dataGrid1_RowEditEnded">
            <sdk:DataGrid.Columns>
             <sdk:DataGridTextColumn Header="编号"   Binding="{Binding id}"></sdk:DataGridTextColumn>
                <sdk:DataGridTemplateColumn Header="文本">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding text}" />
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                    <sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Mode=TwoWay, Path=text}"></TextBox>
                        </DataTemplate> 

                    </sdk:DataGridTemplateColumn.CellEditingTemplate>
                </sdk:DataGridTemplateColumn>            </sdk:DataGrid.Columns>
        
        </sdk:DataGrid>

cs代码

       private void dataGrid1_RowEditEnded(object sender, DataGridRowEditEndedEventArgs e)
       {
           CData c = e.Row.DataContext as CData;
           Service1Client s = new Service1Client();
           s.EditCDataCompleted += new EventHandler<EditCDataCompletedEventArgs>(s_EditCDataCompleted);
           s.EditCDataAsync(c);

       }

       void s_EditCDataCompleted(object sender, EditCDataCompletedEventArgs e)
       {
           if (e.Result)
               System.Windows.Browser.HtmlPage.Window.Alert("成功");
           else
               System.Windows.Browser.HtmlPage.Window.Alert("失败");
       }

然后测试 显示列表后 双击一个行

然后点击DataGrid边框 结束编辑状态

 

 

Silverlight DataGrid使用之三 排序篇

2011-06-06 23:18

首先DataGrid 自带的排序特性

<Grid x:Name="LayoutRoot" Background="White">
<sdk:DataGrid AutoGenerateColumns="False" Height="236" HorizontalAlignment="Left" Name="dataGrid1" VerticalAlignment="Top" Width="368" LoadingRow="dataGrid1_LoadingRow" FrozenColumnCount="1" RowEditEnded="dataGrid1_RowEditEnded">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="编号" Binding="{Binding id}" CanUserSort="True" ></sdk:DataGridTextColumn>
<sdk:DataGridTemplateColumn Header="文本">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding text}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Text="{Binding Mode=TwoWay, Path=text}"></TextBox>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>

</sdk:DataGrid>

另一个方法是使用 System.Windows.Data.PagedCollectionView

在后台代码

public partial class DataGridControl : UserControl
{
public DataGridControl()
{
InitializeComponent();
SilverlightApplication1.ServiceReference1.Service1Client c = new ServiceReference1.Service1Client();
c.GetCDatasCompleted += new EventHandler<ServiceReference1.GetCDatasCompletedEventArgs>(c_GetCDatasCompleted);
c.GetCDatasAsync();
}

void c_GetCDatasCompleted(object sender, ServiceReference1.GetCDatasCompletedEventArgs e)
{
if (e.Error == null)
{
System.Windows.Data.PagedCollectionView view = new System.Windows.Data.PagedCollectionView(e.Result);
view.SortDescriptions.Add(new System.ComponentModel.SortDescription("id", System.ComponentModel.ListSortDirection.Descending) );//指定属性名称作排序
dataGrid1.ItemsSource = view;

}

}

 

 

 

Silverlight DataGrid使用之四 过滤篇

2011-06-06 23:36

创建wcf和xml页面 参考http://hi.baidu.com/mldark/blog/item/a8f40a1909fa26a34bedbce3.html

http://hi.baidu.com/mldark/blog/item/a8315d01c4c3b909738b650d.html

然后在后台代码 修改一下

namespace SilverlightApplication1
{
    public partial class DataGridControl : UserControl
    {
        public DataGridControl()
        {
            InitializeComponent();
            SilverlightApplication1.ServiceReference1.Service1Client c = new ServiceReference1.Service1Client();
            c.GetCDatasCompleted += new EventHandler<ServiceReference1.GetCDatasCompletedEventArgs>(c_GetCDatasCompleted);
            c.GetCDatasAsync();
        }

        void c_GetCDatasCompleted(object sender, ServiceReference1.GetCDatasCompletedEventArgs e)
        {
            if (e.Error == null)
            {
               System.Windows.Data.PagedCollectionView view = new System.Windows.Data.PagedCollectionView(e.Result);
                view.Filter = (o) =>
                {
                    CData c = o as CData;
                    return c.id % 5 == 0;
                    //过滤条件
                };

                dataGrid1.ItemsSource = view;

           
            }

        }

如果需要服务器数据库上过滤条件数据 首先在sl输入好条件然后用wcf发送到服务器上 用sql的where 返回一个列表 需要wcf定义一个过滤方法 看需求过滤什么条件 就可以了 思路和更新行没什么区别的

 

 

 

查看文章

Silverlight DataGrid使用之五 分页篇

2011-06-07 23:01

用Silverlight提供分页特性参考http://hi.baidu.com/mldark/blog/item/cbbdc3c30ffe5f21e4dd3bc4.html这个文章

接下来讲解用服务端分页合适上万数据使用

首先在数据库创建一个表 随便取名

然后创建一个存储过程 取名DataGridPages  

CreatePROCEDURE [dbo].[DataGridPages] (@pageindex int,@pagesize int  )
AS
BEGIN
  with pages as
 (
     SELECT id,text,ROW_NUMBER()over(order by id)as pageindex  FROM dbo.t1
 )
  SELECT * FROM pages
  where pageindex between(@pageindex*@pagesize)+1 and (@pageindex+1)*@pagesize

END

我用的是sqlserver2008版本 创建好了 然后在wcf创建类型

cs代码

 

namespace WcfService1
{
    // 注意: 使用“重构”菜单上的“重命名”命令，可以同时更改代码和配置文件中的接口名“IService1”。
    [ServiceContract]
    public interface IService1
    {

        [OperationContract]
        List<CData> GetCDatas(int pageindex,int pagesize);
           [OperationContract]
        int PageCount(int pagesize);

        // TODO: 在此添加您的服务操作
    }

    // 使用下面示例中说明的数据协定将复合类型添加到服务操作
    [DataContract]
    public class CData
    {
        [DataMember]
        public int id;
        [DataMember]
        public string text;

    }

  [System.ServiceModel.Activation.AspNetCompatibilityRequirements(RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Required)]
    public class Service1 : IService1
    {

        public List<CData> GetCDatas(int pageindex,int pagesize)
        {
            SqlConnection cn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["sldatabaseConnectionString"].ConnectionString);
            SqlCommand  cmd=new SqlCommand ("DataGridPages",cn);
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@pageindex", pageindex);
            cmd.Parameters.AddWithValue("@pagesize", pagesize);
            cn.Open();
            SqlDataReader dr=cmd.ExecuteReader( );
             List<CData> CList=new List<CData> ();
             while (dr.Read())
             {
                 CData c = new CData { id = int.Parse(dr["id"].ToString()), text = dr["text"].ToString() };
                 CList.Add(c);
           
             }
             cn.Close();
            return CList;

        }

 

        public int PageCount(int pagesize)
        {
            SqlConnection cn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["sldatabaseConnectionString"].ConnectionString);
            SqlCommand  cmd=new SqlCommand ("SELECT COUNT(id) FROM t1" ,cn);
            cn.Open();
            int count =int.Parse( cmd.ExecuteScalar().ToString());
            cn.Close();

            if (count % pagesize == 0)//如果有余数的话+1
                return count / pagesize;
            else
                return count / pagesize + 1;
        }
    }

在xaml代码

    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid AutoGenerateColumns="False" Height="236" HorizontalAlignment="Left" Name="dataGrid1" VerticalAlignment="Top" Width="368" LoadingRow="dataGrid1_LoadingRow" FrozenColumnCount="1" >
            <sdk:DataGrid.Columns>
             <sdk:DataGridTextColumn Header="编号"   Binding="{Binding id}" CanUserSort="True"></sdk:DataGridTextColumn>
                <sdk:DataGridTemplateColumn Header="文本">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding text}" />
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                    <sdk:DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Mode=TwoWay, Path=text}"></TextBox>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellEditingTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        
        </sdk:DataGrid>
        <Button Content="上页" Height="23" HorizontalAlignment="Left" Margin="0,255,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Button Content="下页" Height="23" HorizontalAlignment="Left" Margin="81,255,0,0" Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="162,255,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="97" />
    </Grid>

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;
using SilverlightApplication1.ServiceReference1;

namespace SilverlightApplication1
{
    public partial class DataGridControl : UserControl
    {
        int currentIndex = 0;//当前素引
        int pagesize = 5;//每页项数
        int pagecount;//页总数
        SilverlightApplication1.ServiceReference1.Service1Client c = new ServiceReference1.Service1Client();
          
        public DataGridControl()
        {
           
            InitializeComponent();
            c.GetCDatasCompleted += new EventHandler<ServiceReference1.GetCDatasCompletedEventArgs>(c_GetCDatasCompleted);
            c.GetCDatasAsync(currentIndex,pagesize);
            c.PageCountCompleted += new EventHandler<PageCountCompletedEventArgs>(c_PageCountCompleted);
            c.PageCountAsync(pagesize);
        }

        void c_PageCountCompleted(object sender, PageCountCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                pagecount = e.Result;
                textBlock1.Text = currentIndex + 1 + "/" + pagecount;
            }
        
        }

        void c_GetCDatasCompleted(object sender, ServiceReference1.GetCDatasCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                        
                dataGrid1.ItemsSource = e.Result;

           
            }

        }

       private void dataGrid1_LoadingRow(object sender, DataGridRowEventArgs e)
        {
      }

 
        //下页
       private void button2_Click(object sender, RoutedEventArgs e)
       {
             currentIndex++;
           if (pagecount-1 <= currentIndex)
           {
               currentIndex = pagesize -3;
               c.GetCDatasAsync(currentIndex, pagesize);
               button2.IsEnabled = false;
               button1.IsEnabled = true;
           }
           else
           {
           
               c.GetCDatasAsync(currentIndex, pagesize);
               button1.IsEnabled = true;
           }
           textBlock1.Text = currentIndex+1 + "/" + pagecount;
       
       }
        //上页
       private void button1_Click(object sender, RoutedEventArgs e)
       {
           currentIndex--;
           if (0 >= currentIndex)
           {
               currentIndex = 0;
               c.GetCDatasAsync(currentIndex, pagesize);
               button1.IsEnabled = false;
               button2.IsEnabled = true;
           }
           else
           {
               c.GetCDatasAsync(currentIndex, pagesize);
               button2.IsEnabled = true;
           }
           textBlock1.Text = currentIndex + 1 + "/" + pagecount;
       
       }
    }
}
显示效果