SilverLight商业应用程序开发---学习笔记(9)
2012-05-10 15:33
543 查看
从摘要信息跳转到详细信息
通常会遇到从列表信息跳转到详细记录页面或记录编辑页面的情况。有很多方法可以实现这种跳转行为,比如导航到细节视图,在弹出窗体打开细节视图,使用DataGrid控件的行细节显示特性显示细节内容,使用主/从视图等。下面逐一介绍:导航到细节视图
如果使用DataGrid控件,可以在模板列添加一个控件如Button或HyperlinkButton以使用户可以点击导航到细节视图。如果使用ListBox控件,则可以在项目模板中包含导航按钮控件。可惜在导航框架中不能在视图间传递复杂类型,因此在导航过程中通常以唯一的标识符作为查询参数,通常在按钮的Click事件中实现:XAML:
<HyperlinkButtonContent="{BindingName}"Tag="{Binding}" Click="NameButton_Click"/>
CodeBehind:
privatevoidNameButton_Click(objectsender,System.Windows.RoutedEventArgse)
{
HyperlinkButtonbutton=senderasHyperlinkButton;
ProductSummaryproductSummary=button.TagasProductSummary;
UridetailsUri=newUri("ProductDetails/"+productSummary.ID.ToString(),
UriKind.Relative);
NavigationService.Navigate(detailsUri);
}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
在弹出窗体打开细节视图
Silverlight内置的ChildWindow类是模态的弹出窗体,可以用于显示列表视图的细节内容。使用步骤如下:1)使用SilverlightChildWindowitemtemplate新建继承自ChildWindow类的窗体,可以在窗体中根据需要进行UI布局及数据绑定;一般应保留窗体上的OK、Cancel按钮;
2)在列表视图的模板里添加Button或HyperlinkButton按钮用于导航,在按钮的Click事件里添加如下代码:
HyperlinkButtonbutton=senderasHyperlinkButton;//获取按钮对象
ProductSummaryproductSummary=button.TagasProductSummary;//获取详细信息对象
ProductDetailsWindowwindow=newProductDetailsWindow(productSummary);//在弹出窗口的构造函数传入详细信息对象
window.Show();//显示窗体
显示效果如下:
使用DataGrid控件的行细节显示特性显示细节内容
显示效果如下:.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
关键实现代码:
<sdk:DataGrid>
<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
<!--Rowdetailslayoutgoeshere-->
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>
</sdk:DataGrid>
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
在此还可以对RowDetailsVisibilityMode属性进行设置以指定相关数据模板的显示模式,设置为VisibleWhenSelected表示只有选定的行才显示,设置为Visible表示所有的行都显示,设置为Collapsed表示从不显示。还可以使用RowDetailsVisibilityChanged事件处理行细节显示与隐藏的时机。
主/从视图的实现
主从视图通常在同一视图的不同部位显示,点击主视图的一条记录,在从视图就会显示出该记录的详细数据。实现这一功能的案例如下:1)实现员工列表的显示
<riaControls:DomainDataSourceName="employeeDataSource"LoadSize="20"QueryName="GetSalariedEmployees"AutoLoad="True">
<riaControls:DomainDataSource.DomainContext>
<ds:OrganizationContext/>
</riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
<sdk:DataGridAutoGenerateColumns="True"IsReadOnly="True"Name="dataGrid1"MinHeight="100"Height="Auto"ItemsSource="{BindingData,ElementName=employeeDataSource}"/>
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
2)使用Silverlight工具包中的DataForm控件来提供数据的详细视图。默认情况下,Silverlight业务应用程序项目模板将在Libs文件夹中包含System.Windows.Controls.Data.DataForm.Toolkit.dll二进制文件。
在前述文件中添加以下命名空间声明。xmlns:dataForm="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"
3)在DataPager控件的后面,添加以下XAML以添加一个DataForm控件:
<dataForm:DataFormx:Name="dataForm1"Header="EmployeeInformation"
AutoGenerateFields="False"HorizontalAlignment="Left"
AutoEdit="False"AutoCommit="False"Width="400"
CurrentItem="{BindingSelectedItem,ElementName=dataGrid1}"Margin="0,12,0,0">
<dataForm:DataForm.EditTemplate>
<DataTemplate>
<StackPanel>
<dataForm:DataFieldLabel="EmployeeID">
<TextBoxIsReadOnly="True"
Text="{BindingEmployeeID,Mode=OneWay}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="LoginID">
<TextBoxText="{BindingLoginID,Mode=TwoWay}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="HireDate">
<TextBoxText="{BindingHireDate,Mode=TwoWay}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="MaritalStatus">
<TextBoxText="{BindingMaritalStatus,Mode=TwoWay}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="Gender">
<TextBoxText="{BindingGender,Mode=TwoWay,NotifyOnValidationError=True,ValidatesOnExceptions=True}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="VacationHours">
<TextBoxText="{BindingVacationHours,Mode=TwoWay,NotifyOnValidationError=True,ValidatesOnExceptions=True}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="SickLeaveHours">
<TextBoxText="{BindingSickLeaveHours,Mode=TwoWay,NotifyOnValidationError=True,ValidatesOnExceptions=True}"/>
</dataForm:DataField>
<dataForm:DataFieldLabel="Active">
<CheckBoxIsChecked="{BindingCurrentFlag,Mode=TwoWay,NotifyOnValidationError=True,ValidatesOnExceptions=True}"/>
</dataForm:DataField>
</StackPanel>
</DataTemplate>
</dataForm:DataForm.EditTemplate>
</dataForm:DataForm>
运行应用程序并单击“员工列表”链接。DataForm将显示在DataGrid中的选定项的详细信息。
相关文章推荐
- MVVM设计模式相关--Silverlight商业应用程序开发学习笔记(12)
- 数据输入验证---Silverlight商业应用程序开发学习笔记(13)
- SilverLight商业应用程序开发---学习笔记(2) WCF RIA服务
- SilverLight商业应用程序开发---学习笔记(2)
- SilverLight商业应用程序开发---学习笔记(10)
- SilverLight商业应用程序开发---学习笔记(7) DataGrid控件的使用
- SilverLight商业应用程序开发---学习笔记(11)
- SilverLight商业应用程序开发---学习笔记(8) 适用于SilverLight商业应用程序的几个重要的类
- Silverlight商业应用程序开发--学习笔记(1) 导航框架 navigationFramework
- SilverLight商业应用程序开发---学习笔记(4)
- SilverLight商业应用程序开发---学习笔记(9)从摘要信息跳转到详细信息 导航到细节视图 在弹出窗体打开细节视图 使用DataGrid控件的行细节显示特性显示细节内容 主/从视图的实现
- SilverLight商业应用程序开发---学习笔记(11)常用数据输入控件介绍
- SilverLight商业应用程序开发---学习笔记(7)
- SilverLight商业应用程序开发---学习笔记(10)使用数据源窗口创建DataGrid
- Silverlight商业应用程序开发--学习笔记(1)
- Silverlight商业应用程序开发学习笔记(12) MVVM设计模式相关--
- SilverLight商业应用程序开发---学习笔记(5)从服务器中获取数据之一
- Silverlight商业应用程序开发学习笔记(13) 数据输入验证---
- SilverLight商业应用程序开发---学习笔记(3)
- SilverLight商业应用程序开发---学习笔记(6)从服务器中获取数据之二