您的位置：首页 > 其它

SilverLight商业应用程序开发---学习笔记（7）

2012-05-09 11:25 357 查看

DataGrid控件的使用

DataGrid控件位于System.Windows.Controls.Data.dll程序集，在使用前应声明sdk名称空间前缘：

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

1、使用数据填充DataGrid控件：只需将控件的ItemsSource属性绑定到集合对象上即可；也可以将集合对象在后置代码赋值到该属性上。如下面的示例：

1）绑定方式：

<sdk:DataGridName="productsDataGrid"
ItemsSource="{BindingElementName=productSummaryDDS,Path=Data}"/>

<riaControls:DomainDataSourceAutoLoad="True"Height="0"Width="0"
LoadedData="productSummaryDDS_LoadedDaName="productSummaryDDS"
QueryName="GetProductSummaryListQuery">
<riaControls:DomainDataSource.DomainContext>
<my:ProductSummaryContext/>
</riaControls:DomainDataSource.DomainContext>

<riaControls:DomainDataSource.FilterDescriptors>
<riaControls:FilterDescriptorPropertyPath="Name"
Operator="Contains"
Value="{BindingElementName=SearchTextBox,Path=Text}"/>
</riaControls:DomainDataSource.FilterDescriptors>
</riaControls:DomainDataSource>

<riaControls:DomainDataSourceAutoLoad="True"Height="0"Width="0"
LoadedData="productSummaryDDS_LoadedData"
Name="productSummaryDDS"
QueryName="GetProductSummaryListQuery">
<riaControls:DomainDataSource.DomainContext>
<my:ProductSummaryContext/>
</riaControls:DomainDataSource.DomainContext>

<riaControls:DomainDataSource.SortDescriptors>
<riaControls:SortDescriptorPropertyPath="Name"Direction="Ascending"/>
</riaControls:DomainDataSource.SortDescriptors>
</riaControls:DomainDataSource>

<riaControls:DomainDataSourceAutoLoad="True"Height="0"Width="0"
LoadedData="productSummaryDS_LoadedData"
Name="productSummaryDDS"
QueryName="GetProductSummaryListQuery">
<riaControls:DomainDataSource.DomainContext>
<my:ProductSummaryContext/>
</riaControls:DomainDataSource.DomainContext>

<riaControls:DomainDataSource.GroupDescriptors>
<riaControls:GroupDescriptorPropertyPath="Model"/>
</riaControls:DomainDataSource.GroupDescriptors>
</riaControls:DomainDataSource>

<sdk:DataPagerPageSize="30"
Source="{BindingData,ElementName=productSummaryDDS}"/>

.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）赋值方式：

productsDataGrid.ItemsSource=collection;

2、DataGrid控件列属性配置

DataGrid的每一列都需要通过Columns属性进行定义，在Silverlight中有DataGrid控件有三种列类型：

DataGridTextColumn：只读模式下显示TextBlock样式，可编辑模式下显示TextBox样式；
DataGridCheckBoxColumn：显示为CheckBox样式；
DataGridTemplateColumn：自定义列样式，可以通过设置两种数据模板：CellTemplate与CellEditingTemplate来实现。

下面代码是上述三种列属性的示例：

<sdk:DataGridAutoGenerateColumns="False">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumnBinding="{BindingName}"Header="Name"/>

<sdk:DataGridTemplateColumnHeader="QtyAvailable">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlockText="{BindingQuantityAvailable}"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox
Text="{BindingQuantityAvailable,Mode=TwoWay}"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>

<sdk:DataGridCheckBoxColumnBinding="{BindingMakeFlag}"
Header="MadeIn-House"/>
</sdk:DataGrid.Columns>
</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;}

简化设置列属性的方法是使用DomainDataSource控件先生成列属性框架，然后再根据需要进行适当的修改；如果不想使用DomainDataSource作为数据源，可以将ItemsSource属性的绑定调整为其他集合对象；

3、在DataGrid控件的列上显示图片：注意Silverlight只支持Bmp，JPG，PNG等位图格式，不支持Gif格式，如果要想使用Gif格式或其他byte数组格式，需要进行类型转换，有关转换方法见源代码；在此给出最终绑定的代码：

<sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ImageMargin="2"
Source="{BindingThumbnailPhoto,
Converter={StaticResourceGifConverter}}"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

.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;}

从上述代码来看，除了对格式要进行转换以外，没有什么特别的；
4、创建计算列：可以使用类似的数据转换的方法实现计算列，然后将转换器的输出结果作为计算结果显示在计算列上，方法与显示图片类似。

5、在DataGrid中编辑数据：DataGrid控件设计的初衷就是为了编辑数据，因此默认单元格都是可以编辑的，如果想要禁用该模式，设置IsReadOnly属性为True。

6、DataGrid附加内置行为：排序（默认提供，可以对任意列进行顺序或逆序排序），分组（需要与绑定数据集合相配合）、列宽调整（类似于Excel)、列位置拖动调整，这些行为默认都是打开的，也可以关闭；关闭方法如下：

功能	控件属性	关闭该属性的设置值
排序	CanUserSortColumns	False
分组
自动调整尺寸	CanUserResizeColumns	False
列位置重排	CanUserReorderColumns	False

7、显示附加行明细

DataGrid控件有一个RowDeatilsTemplate属性可以用来定义附加细节的数据模板，用以对每行的数据进行详细的说明。如下图所示：

实现代码如下：

<sdk:DataGrid>
<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
<!--Rowdetailslayoutgoeshere-->
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>
</sdk:DataGrid>

ListBox控件的使用

1、使用数据填充ListBox：与DataGrid控件类似：

<ListBoxName="productsList"
ItemsSource="{BindingElementName=productSummaryDDS,Path=Data}"/>

productsList.ItemsSource=collection;

<ListBoxItemsSource="{BindingElementName=productSummaryDDS,Path=Data}">
<ListBox.ItemTemplate>
<!--PutdatatemplateXAMLhere-->
<DataTemplate>
<GridHeight="50">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>

<ImageMargin="2"
Source="{BindingThumbnailPhoto,
Converter={StaticResourceGifConverter}}"
Grid.RowSpan="2"/>
<TextBlockName="NameField"Text="{BindingName}"Margin="2"
Grid.Row="0"Grid.Column="1"FontWeight="Bold"FontSize="12"/>

<StackPanelOrientation="Horizontal"Grid.Row="1"Grid.Column="1">
<TextBlockText="Number:"Margin="2"/>
<TextBlockText="{BindingNumber}"Margin="2"/>
<TextBlockText="|Available:"Margin="2"/>
<TextBlockText="{BindingQuantityAvailable}"Margin="2"/>
<TextBlockText="|Price:"Margin="2"/>
<TextBlockText="{BindingListPrice,StringFormat=C}"Margin="2"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

显示效果如下：

3、隐式数据模板

.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;}

Silverlight5提供新功能隐式数据模板，功能包括（以下信息转自/article/4706446.html）：

[1]ContentPresenter的DataTemplates可以选择基于某个数据类型进行相关联绑定
[2]隐式定义DataTemplates
[3]当数据源DataContent发生变化时.动态更新的ContentPresenterDataTemplate
[4]在适当范围启用的DataTemplates

如下的类图显示了一个基类：SocialItem，几个派生类：TwitterItem,FacebookItem,LinkedInItem,YoutubeItem,andRssfeedItem

现在将SocialItem项目列表绑定到ListBox上，列表还包含了派生类的数据，如果使用Silverlight4,只能实现这样的效果：

代码如下：

<UserControl.Resources>
<DataTemplatex:Key="SocialItemTemplate">
<StackPanel>
<TextBlockText="{BindingUserName}"FontWeight="Bold"/>
<TextBlockText="{BindingStatus}"TextWrapping="Wrap"HorizontalAlignment="Left"/>
<StackPanelOrientation="Horizontal">
<TextBlockText="{BindingName}"Foreground="#FF9F9F9F"TextWrapping="NoWrap"/>
<TextBlockTextWrapping="Wrap"Text="/"Foreground="#FF9F9F9F"/>
<TextBlockText="{BindingElapsedTimeSincePost,Mode=OneWay}"Foreground="#FF9F9F9F"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</UserControl.Resources>

<ListBoxItemTemplate="{StaticResourceSocialItemTemplate}"ItemsSource="{BindingItems}"/>

<DataTemplateDataType="model:RssfeedItem">
<GridVerticalAlignment="Top"Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="40"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<ImageSource="/Images/rssfeed-icon.png"HorizontalAlignment="Left"VerticalAlignment="Top"Margin="0,0,5,0"/>
<StackPanelGrid.Column="1">
<TextBlockTextWrapping="Wrap"Text="{BindingTitle}"FontSize="14"FontFamily="Arial"FontWeight="Bold"/>
<TextBlockMargin="0"TextWrapping="Wrap"Text="{BindingText}"FontSize="13.333"/>
<HyperlinkButtonContent="{BindingUrl}"Height="21"Margin="0"NavigateUri="{BindingUrl}"/>
</StackPanel>
</Grid>
</DataTemplate>

<DataTemplateDataType="model:TwitterItem">
<GridVerticalAlignment="Top"Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="40"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<ImageSource="/Images/twitter-icon.png"HorizontalAlignment="Left"VerticalAlignment="Top"Margin="0,0,5,0"/>
<BorderGrid.Column="1">
<StackPanel>
<HyperlinkButtonContent="{BindingUserName}"HorizontalAlignment="Left"Margin="0"FontWeight="Bold"/>
<TextBlockText="{BindingTweet}"VerticalAlignment="Center"FontSize="16"Margin="0"TextWrapping="Wrap"/>
</StackPanel>
</Border>
</Grid>
</DataTemplate>

<ListBoxItemsSource="{BindingItems}"/>

4、自定义Items布局

ListBox的布局可以根据需要随意调整，比如实现卡片状的布局

实现这一功能，首先需要设置ListBox的ItemsPanel属性，使得显示的数据在水平显示不开时会自动转入下一行，只要将尺寸确定，就可以确保每行显示1-2个卡片信息：

<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>

.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;}

其次设置卡片状的数据模板，卡片状布局采用了5列2行的Grid进行布局：

<DataTemplate>
<GridWidth="270"Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="Auto"/>
<RowDefinitionHeight="Auto"/>
<RowDefinitionHeight="Auto"/>
<RowDefinitionHeight="Auto"/>
<RowDefinitionHeight="Auto"/>
</Grid.RowDefinitions>

<RectangleStroke="Black"RadiusX="3"RadiusY="3"
Grid.RowSpan="5"Grid.ColumnSpan="2">
<Rectangle.Fill>
<LinearGradientBrushStartPoint="0,0"EndPoint="0,1">

<GradientStopColor="White"Offset="0"/>
<GradientStopColor="#6D6D6D"Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Effect>
<DropShadowEffectShadowDepth="2"/>
</Rectangle.Effect>
</Rectangle>

图片+外侧边框：

<BorderBorderBrush="Black"Background="White"Margin="8"Height="70"
VerticalAlignment="Top"CornerRadius="3"Grid.RowSpan="5">
<Border.Effect>
<DropShadowEffectShadowDepth="2"/>
</Border.Effect>
<ImageSource="{BindingThumbnailPhoto,
Converter={StaticResourceGifConverter}}"
VerticalAlignment="Center"HorizontalAlignment="Center"/>
</Border>

<TextBlockName="NameField"Text="{BindingName}"Margin="2,8,2,2"
Grid.Row="0"Grid.Column="1"FontWeight="Bold"FontSize="12"/>

<StackPanelOrientation="Horizontal"Grid.Row="1"Grid.Column="1">
<TextBlockText="Number:"Margin="2"/>
<TextBlockText="{BindingNumber}"Margin="2"/>
</StackPanel>

<StackPanelOrientation="Horizontal"Grid.Row="2"Grid.Column="1">
<TextBlockText="Available:"Margin="2"/>
<TextBlockText="{BindingQuantityAvailable}"Margin="2"/>
</StackPanel>

<StackPanelOrientation="Horizontal"Grid.Row="3"Grid.Column="1">
<TextBlockText="Price:"Margin="2"/>
<TextBlockText="{BindingListPrice,StringFormat=C}"Margin="2"/>
</StackPanel>
</Grid>
</DataTemplate>

最后，设置ListBox上的ScrollViewer.HorizontalScrollBarVisibility属性为Disabled，禁用水平滚动条以使用列表项可以卷动。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航