silverlight   发布时间:2022-05-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight MVVM 贴近实战(四)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

有的大牛只写怎样怎样理解概念,喜欢讲一些概念,有的大牛干脆不写技术,有的大牛只会唯利是图,卖一些组件,我不是大牛,我喜欢帮助别人。 今天我们看看档案管理界面的数据查询与展示,先上一张图,调一下胃口。 这个界面主要的看点有DataGrid数据展示,分组,分页,Convert的使用等。首先我们来看一下界面的代码,这个布局方式采用Grid+StackPanel布局,代码如下。    

有的大牛只写怎样怎样理解概念,喜欢讲一些概念,有的大牛干脆不写技术,有的大牛只会唯利是图,卖一些组件,我不是大牛,我喜欢帮助别人。

今天我们看看档案管理界面的数据查询与展示,先上一张图,调一下胃口。

Silverlight MVVM 贴近实战(四)

这个界面主要的看点有DataGrid数据展示,分组,分页,Convert的使用等。首先我们来看一下界面的代码,这个布局方式采用Grid+StackPanel布局,代码如下。

 
 
  1.     <controls:ChildWindow.resources> 
  2.         <StateConvert:ArchiveStateConvert x:Key="ArchiveConvert"></StateConvert:ArchiveStateConvert> 
  3.         <StateConvert:SexConvert x:Key="SexConvert"></StateConvert:SexConvert> 
  4.         <Localresource:ArchiveManageresource x:Key="Localresource"></Localresource:ArchiveManageresource> 
  5.         <Style x:Key="columnHeaderStyle" TargetType="sdk:DataGridcolumnHeader"> 
  6.             <Setter Property="FontSize" Value="12"></Setter> 
  7.         </Style> 
  8.     </controls:ChildWindow.resources> 省略部分代码
  9.                 <TextBlock Text="{Binding tb_Name,source={Staticresource LocalresourcE}}" @H_854_49@margin="10,0" FontSize="12" Grid.Row="0" Grid.column="5"/> 
  10.                 <sdk:AutoCompleteBox Width="130" FontSize="12" Grid.Row="0" Grid.column="6" Itemssource="{Binding PersonList,Mode=OneWay}" SELEctedItem="{Binding SELEctedPerson,Mode=TwoWay}"/> 
  11.                     <StackPanel Grid.Row="3" Grid.column="2" Grid.columnSpan="3" @H_854_49@margin="0,5,0" Orientation="Horizontal" HorizontalAlignment="Center"> 
  12.                     <Button Content="{Binding btn_Search,source={Staticresource LocalresourcE}}" Command="{Binding QueryCommands}" FontSize="12" Width="90" @H_854_49@margin="0,0"/> 
  13.                     <Button Content="{Binding btn_Reset,source={Staticresource LocalresourcE}}" FontSize="12" Width="90"/> 
  14.                 </StackPanel> 
  15.             </Grid> 
  16.         </Border> 
  17.             <sdk:DataGrid Grid.Row="0" Grid.column="0" Grid.columnSpan="2" 
  18.                           IsReadOnly="True" x:Name="dgArchiveList" 
  19.                           Itemssource="{Binding MyCollectionViewsource.View,Mode=OneWay}" 
  20.                           AutoGeneratecolumns="false" 
  21.                           AlternaTingRowBACkground="Silver" 
  22.                           columnHeaderHeight="20" 
  23.                           FrozencolumnCount="3" 
  24.                           CanUserReordercolumns="True" 
  25.                           VerticalScrollBarVisibility="Auto" 
  26.                           HorizontalScrollBarVisibility="Auto"   
  27.                           AreRowGroupHeadersFrozen="false" 
  28.                           SELEctionMode="Single" 
  29.                           CanUserSortcolumns="false" 
  30.                           LoadingRowGroup="MyDataGrid_LoadingRowGroup"> 
  31.                 <sdk:DataGrid.columns> 
  32.                     <!--<sdk:DataGridTemplatecolumn Header="选择"> 
  33.                         <sdk:DataGridTemplatecolumn.CellTemplate> 
  34.                             <DataTemplate> 
  35.                                 <checkBox checked="{Binding Ischecked,Mode=TwoWay}"/> 
  36.                             </DataTemplate> 
  37.                         </sdk:DataGridTemplatecolumn.CellTemplate> 
  38.                     </sdk:DataGridTemplatecolumn>--> 
  39.                     <sdk:DataGridTextcolumn Binding="{Binding archiveState,Mode=OneWay,Converter={Staticresource archiveConvert}}"> 
  40.                         <sdk:DataGridTextcolumn.HeaderStyle> 
  41.                             <Style TargetType="sdk:DataGridcolumnHeader"> 
  42.                                 <Setter Property="ContentTemplate"> 
  43.                                     <Setter.Value> 
  44.                                         <DataTemplate> 
  45.                                             <TextBlock Text="{Binding Grid_Header_ArchiveState,source={Staticresource LocalresourcE}}"/> 
  46.                                         </DataTemplate> 
  47.                                     </Setter.Value> 
  48.                                 </Setter> 
  49.                                 <Setter Property="FontSize" Value="12"/> 
  50.                             </Style> 
  51.                         </sdk:DataGridTextcolumn.HeaderStyle> 
  52.                     </sdk:DataGridTextcolumn> 
  53.                     <sdk:DataGridTextcolumn HeaderStyle="{StaticresourccolumnHeaderStylE}" Header="档案编号" Binding="{Binding archiveNo,Mode=OneWay}" /> 
  54.                     省略部分代码                
  55. </sdk:DataGrid.columns> 
  56.             </sdk:DataGrid> 省略部分代码
  57.                 <StackPanel Grid.Row="1" Grid.column="1" Orientation="Horizontal" HorizontalAlignment="Right" @H_854_49@margin="0,10,0"> 
  58.                 <HyperlinkButton x:Name="linkFirst" Foreground="Blue" Tag="First" IsEnabled="{Binding IsLinkFirstEnable,Mode=OneWay}" Click="HyperlinkButton_Click" Content="{Binding link_First,source={Staticresource LocalresourcE}}" FontSize="12"/> 
  59.                 <HyperlinkButton x:Name="linkPrevIoUs" Foreground="Blue" Tag="PrevIoUs"  IsEnabled="{Binding IsLinkPrevIoUsEnable,Mode=OneWay}" Click="HyperlinkButton_Click" Content="{Binding link_PrevIoUs,source={Staticresource LocalresourcE}}" FontSize="12"/> 
  60.                 <HyperlinkButton x:Name="linkNext" Foreground="Blue" Tag="Next" IsEnabled="{Binding IsLinkNextEnable,Mode=OneWay}" Click="HyperlinkButton_Click" Content="{Binding link_Next,source={Staticresource LocalresourcE}}" FontSize="12"/> 
  61.                 <HyperlinkButton x:Name="linkLast" Foreground="Blue" Tag="Last" IsEnabled="{Binding IsLinkLastEnable,Mode=OneWay}" Click="HyperlinkButton_Click" Content="{Binding link_Last,source={Staticresource LocalresourcE}}" FontSize="12"/> 
  62.             </StackPanel> 
  63. </controls:ChildWindow> 

查询条件中使用了AutoComplete,<sdk:AutoCompleteBox Width="130" FontSize="12" Grid.Row="0" Grid.column="6" Itemssource="{Binding PersonList,Mode=OneWay}" SELEctedItem="{Binding SELEctedPerson,Mode=TwoWay}"/>。首先其Itemssource绑定的是一个List<String>,SELEctedItem绑定的是选择项,我们看看效果

Silverlight MVVM 贴近实战(四)

当我在姓名文本框中输入“李”的时侯,所有姓李的人都列出来了。当我选择了一个人名以后,SELEctedPerson的值将会变为我选择的人名,因为SELEctedPerson是个双向绑定。ok我们再往下看,我们发现前台代码的DataGrid列中有这么一行。

 
 
  1. <sdk:DataGridTextcolumn Binding="{Binding archiveState,Converter={Staticresource archiveConvert}}"> 
  2.                         <sdk:DataGridTextcolumn.HeaderStyle> 
  3.                             <Style TargetType="sdk:DataGridcolumnHeader"> 
  4.                                 <Setter Property="ContentTemplate"> 
  5.                                     <Setter.Value> 
  6.                                         <DataTemplate> 
  7.                                             <TextBlock Text="{Binding Grid_Header_ArchiveState,source={Staticresource LocalresourcE}}"/> 
  8.                                         </DataTemplate> 
  9.                                     </Setter.Value> 
  10.                                 </Setter> 
  11.                                 <Setter Property="FontSize" Value="12"/> 
  12.                             </Style> 
  13.                         </sdk:DataGridTextcolumn.HeaderStyle> 
  14.                     </sdk:DataGridTextcolumn> 

 这个写法是因为假如我们要给列头国际化,因为DataGrid的DataGridTextcolumn的Header是不可以绑定resource文件的(因为columnHeader是DependencyObject类型的,而不是DepenencyProperty),所以我们只能给它指定Style。这就是这个列和其他列不同的原因,其他列是直接设置Header的。OK,再看这么一段代码

 <sdk:DataGridTextcolumn HeaderStyle="{Staticresource columnHeaderStylE}" Header="性别" Binding="{Binding Sex,Converter={Staticresource SexConvert}}"/>

我们发现Binding中有个Converter属性,这个是用来转换性别的,假如Sex的值是1,转换为男,假如是0,转换为女。首先需要在页面用这个实现了IValueConverter 的类,如上代码xmlns:StateConvert="clr-namespace:Client.Common;assembly=Common"先引用命名空间,在引用类<StateConvert:SexConvert x:Key="SexConvert"></StateConvert:SexConvert>,我们看看这个SexConvert 类,如下

 
 
  1. namespace Client.Common  
  2. {  
  3.     public class SEXConvert : IValueConverter  
  4.     {  
  5.         public object Convert(object value, Type targetType, object parameter, CultureInfo culturE)  
  6.         {  
  7.             String s = (String)value;  
  8.             switch (s)  
  9.             {  
  10.                 case "1":  
  11.                     s = "男";  
  12.                     break;  
  13.                 case "0":  
  14.                     s = "女";  
  15.                     break;  
  16.             }  
  17.             return s;  
  18.         }  
  19.         public object ConvertBACk(object value, CultureInfo culturE)  
  20.         {  
  21.             String strValue = value.ToString().Equals("男") ? "1" : "0";  
  22.             return strValue;  
  23.         }  
  24.     }  

实现Convert和ConvertBACk即可。接下来我们要看的是DataGrid的分页和分组,和上一篇文章一样,查询绑定的是Command,所以逻辑都在viewmodel中。我们看看代码

 
 
  1. public ICommand QueryCommands  
  2.         {  
  3.             get 
  4.             {  
  5.                 QueryCommand queryCommand = new QueryCommand();  
  6.                 queryCommand.Query += delegate()  
  7.                 {  
  8.                     this.CurrentPage = 1;  
  9.                     var queryrequest = new Searchrequest()  
  10.                     {  
  11.                         archiveNo = this.ArchiveNo, 
  12.                         GraduateStartDate = this.StartDate, 
  13.                         GraduateEndDate = this.EndDate, 
  14.                         NAME = this.SELEctedPerson, 
  15.                         SEX = this.Sex, 
  16.                         BirthDay = this.birthDay, 
  17.                         IdCard = this.IdCard, 
  18.                         Professional = this.Professional, 
  19.                         GraduateSchool = this.GraduateSchool, 
  20.                         Education = this.Education, 
  21.                         archiveState = this.ArchiveState, 
  22.                         PageIndex = -1, 
  23.                         PageSize = this.PageSize  
  24.                     };  
  25.                     GetData(queryrequest);  
  26.                 };  
  27.                 return queryCommand;  
  28.             }  
  29.         }  
  30.  
  31.         public void GetData(Searchrequest queryrequest)  
  32.         {  
  33.             String requestStr = SeriealizeHelper<Searchrequest>.Jsonserialize<Searchrequest>(queryrequest);  
  34.             archiveInfoservice.ArchiveInfoserviceClient client = new archiveInfoservice.ArchiveInfoserviceClient();  
  35.             List<ArchiveInfoEntity> list = new List<ArchiveInfoEntity>();  
  36.             client.GetPersonInfoListCompleted += delegate(object sender, archiveInfoservice.GetPersonInfoListCompletedEventArgs E)  
  37.             {  
  38.                 archiveInfoEntity entity;  
  39.                 e.Result.PersonInfoList.ForEach(r =>  
  40.                 {  
  41.                     entity = new archiveInfoEntity();  
  42.                     entity.Ischecked = false;  
  43.                     entity.ArchiveNo = r.no;  
  44.                     entity.ArchiveState = r.state;  
  45.                     entity.birthDay = r.birth;  
  46.                     entity.Education = r.education_level;  
  47.                     entity.GraduateSchool = r.graduate_school;  
  48.                     entity.GraduateYear = r.graduate_year;  
  49.                     entity.IdCardNo = r.id_card;  
  50.                     entity.Ischecked = false;  
  51.                     entity.Name = r.name;  
  52.                     entity.Professional = r.professional;  
  53.                     entity.Sex = r.sex;  
  54.                     list.Add(entity);  
  55.                 });  
  56.                 this.RecordCount = e.Result.RecordCount;  
  57.                 this.@R_320_10586@lPage = e.Result.RecordCount % PageSize == 0 ? e.Result.RecordCount / PageSize : e.Result.RecordCount / PageSize + 1;  
  58.                 this.SetLinkBtnEnable(queryrequest);  
  59.                 CollectionViewsource collectionViewsource = new CollectionViewsource();  
  60.                 collectionViewsource.source = list;  
  61.                 collectionViewsource.GroupDescriptions.Add(new PropertyGroupDescription("ArchiveState"));  
  62.                 this.MyCollectionViewsource = collectionViewsource;  
  63.             };  
  64.             client.GetPersonInfoListAsync(requestStr);  
  65.         }  
  66.  
  67.         private void SetLinkBtnEnable(Searchrequest request)  
  68.         {  
  69.             this.SetLinkEnable(true);  
  70.             if (this.@R_320_10586@lPage <= 1)  
  71.             {  
  72.                 this.SetLinkEnable(false);  
  73.             }  
  74.             if (request.PageIndex == this.@R_320_10586@lPage-2)  
  75.             {  
  76.                 this.IsLinkNextEnable = false;  
  77.                 this.IsLinkLastEnable = false;  
  78.             }  
  79.             if (request.PageIndex == -1 && this.@R_320_10586@lPage > 1)  
  80.             {  
  81.                 this.IsLinkFirstEnable = false;  
  82.                 this.IsLinkPrevIoUsEnable = false;  
  83.             }  
  84.         }  
  85.  
  86.         private void SetLinkEnable(bool isEnablE)  
  87.         {  
  88.             this.IsLinkFirstEnable = isEnable;  
  89.             this.IsLinkLastEnable = isEnable;  
  90.             this.IsLinkNextEnable = isEnable;  
  91.             this.IsLinkPrevIoUsEnable = isEnable;  
  92.         } 

前台代码我们可以看出分页按钮的isEnabled状态分别绑定viewmodel中的IsLinkFirstEnable ,IsLinkLastEnable,IsLinkNextEnable,IsLinkPrevIoUsEnable。在GetData中有这么一段代码,就是获取到数据源以后,我们对其进行了分组,

 
 
  1. this.RecordCount = e.Result.RecordCount;  
  2.                 this.@R_320_10586@lPage = e.Result.RecordCount % PageSize == 0 ? e.Result.RecordCount / PageSize : e.Result.RecordCount / PageSize + 1;  
  3.                 this.SetLinkBtnEnable(queryrequest);  
  4.                 CollectionViewsource collectionViewsource = new CollectionViewsource();  
  5.                 collectionViewsource.source = list;  
  6.                 collectionViewsource.GroupDescriptions.Add(new PropertyGroupDescription("ArchiveState"));  
  7.                 this.MyCollectionViewsource = collectionViewsource; 

我们获取分页数据以后,根据ArchiveState属性进行分组,然后绑定到界面,注意,DataGrid界面绑定代码Itemssource="{Binding MyCollectionViewsource.View,Mode=OneWay}",注意在这里是MyCollectionViewsource.View。接下来是分页分页是我自己定义的一个分页。我们看看页面cs代码

 
 
  1. private void HyperlinkButton_Click(object sender, routedEventArgs E)  
  2.         {  
  3.             HyperlinkButton hyperLink = sender as HyperlinkButton;  
  4.             var queryrequest = new Searchrequest()  
  5.             {  
  6.                 archiveNo = archiveModel.ArchiveNo, 
  7.                 GraduateStartDate = archiveModel.StartDate, 
  8.                 GraduateEndDate = archiveModel.EndDate, 
  9.                 NAME = archiveModel.SELEctedPerson, 
  10.                 SEX = archiveModel.Sex, 
  11.                 BirthDay = archiveModel.birthDay, 
  12.                 IdCard = archiveModel.IdCard, 
  13.                 Professional = archiveModel.Professional, 
  14.                 GraduateSchool = archiveModel.GraduateSchool, 
  15.                 Education = archiveModel.Education, 
  16.                 archiveState = archiveModel.ArchiveState, 
  17.                 PageSize = archiveModel.PageSize, 
  18.             };  
  19.             switch (hyperLink.Tag.ToString())  
  20.             {  
  21.                 case "First":  
  22.                     archiveModel.PageIndex = -1;  
  23.                     break;  
  24.                 case "Next":  
  25.                     archiveModel.PageIndex++;  
  26.                     break;  
  27.                 case "PrevIoUs":  
  28.                     archiveModel.PageIndex--;  
  29.                     break;  
  30.                 case "Last":  
  31.                     archiveModel.PageIndex = archiveModel.@R_320_10586@lPage-2;  
  32.                     break;  
  33.             }  
  34.             archiveModel.CurrentPage = archiveModel.PageIndex + 2;  
  35.             queryrequest.PageIndex = archiveModel.PageIndex;  
  36.             archiveModel.GetData(queryrequest);  
  37.         } 

分页的时候调用viewmodel的GetData方法,在viewmodel中动态的设置分页按钮的enabled状态。为了方便大家理解我的意思,我会把viewmodel的cs作为附件供大家下载。ok,我们看看服务端分页代码,如下

 
 
  1. public SearchResponse GetPersonInfoList(String searchrequest)  
  2.         {  
  3.             Searchrequest searchrequests = serializeHelper.JsonDeserialize<Searchrequest>(searchrequest);  
  4.             IQueryable<Person_Info> personInfo = misInfoEntities.person_info  
  5.                 .Where(p => (String.IsNullOrEmpty(searchrequests.ArchiveNo) ? true : searchrequests.ArchiveNo.Contains(p.no))  
  6.                 && (String.IsNullOrEmpty(searchrequests.Name) ? true : p.name == searchrequests.Name)  
  7.                 && (String.IsNullOrEmpty(searchrequests.SeX) ? true : p.sex == searchrequests.SeX)  
  8.                 && (String.IsNullOrEmpty(searchrequests.IdCard) ? true : p.id_card.Contains(searchrequests.IdCard))  
  9.                 && (String.IsNullOrEmpty(searchrequests.Professional) ? true : p.professional == searchrequests.Professional)  
  10.                 && (String.IsNullOrEmpty(searchrequests.Education) ? true : p.education_level == searchrequests.Education)  
  11.                 && (String.IsNullOrEmpty(searchrequests.ArchiveStatE) ? true : p.state == searchrequests.ArchiveStatE)  
  12.                 && (!searchrequests.GraduateStartDate.HasValue ? true : p.graduate_year >= searchrequests.GraduateStartDate.Value.Year)  
  13.                 && (!searchrequests.GraduateEndDate.HasValue ? true : p.graduate_year <= searchrequests.GraduateEndDate.Value.Year)  
  14.                 && (!searchrequests.birthDay.HasValue ? true : p.birth == searchrequests.birthday));  
  15.             IEnumerable<Person_Info> personInfos = personInfo.AsEnumerable().orderBy(p => p.Name)  
  16.                 .Skip(searchrequests.PageSize * (searchrequests.PageIndex + 1))  
  17.                 .Take(searchrequests.PageSizE);  
  18.             foreach (var person in personInfos)  
  19.             {  
  20.                 person.education_level = misInfoEntities.codes.SingLeorDefault(c => c.ename == "EDUCATION" && c.data == person.education_level).display_content;  
  21.             }  
  22.             return new SearchResponse() { PersonInfoList = personInfos.ToList(), recordCount = personInfo.Count() };  
  23.         } 

在这里因为我的服务端的数据访问层是EF,所以采用的是LINQ to Entities的方式。今天就写到这里,因为篇幅有限,有很多代码没有贴,需要代码的同志可以留言,我可以发给大家,或者加入.net群205217091,我可以共享给大家。

@H_750_3012@

大佬总结

以上是大佬教程为你收集整理的Silverlight MVVM 贴近实战(四)全部内容,希望文章能够帮你解决Silverlight MVVM 贴近实战(四)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。