今天开始WPF的学习,分析了一下Windows SDK 里面的Sample——DataBindingLab
该解决方案示意图为:
这个Sample是个在线拍卖的实例,其中DataBindingLabApp.xaml是该应用程序的入口,为什么呢?
一、DataBindingLabApp类继承于Application类,而Application类在.NET 3.0后整合了WPF应用程序类。
二、请看DataBindingLabApp.xaml开始的一段代码
<
Application
x:Class
="DataBindingLab.DataBindingLabApp"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
Startup
="AppStartup"
xmlns:src
="clr-namespace:DataBindingLab"
xmlns:System
="clr-namespace:System;assembly=Mscorlib"
>
<!--
省略
-->
</
Application
>
其中Startup="AppStartup"这句,说明它作为程序入口,相应后台代码有:
void
AppStartup(
object
sender, StartupEventArgs args)
{
LoadAuctionData();
MainWindow mainWindow = new MainWindow();
mainWindow.Show();
//AddProductWindow addProductWindow = new AddProductWindow();
//addProductWindow.Show();
}
其中LoadAuctionData()加载拍卖数据,mainWindow.Show()将打开MainWindow窗口,MainWindow窗口是个MainWindow类,文件为MainWindow.xaml.cs
现在来具体看看DataBindingLabApp.xaml在做些什么。
1、首先是个Application.Resources的标识,它是用来获取和设置应用程序范围资源的集合,比如Styles或者Brushes;
2、各种style定义,其实功能相当与Web使用的CSS/Skin等,比如
<
Style
x:Key
="titleStyle"
TargetType
="TextBlock"
>
<
Setter
Property
="FontWeight"
Value
="Bold"
/>
<
Setter
Property
="Foreground"
Value
="DodgerBlue"
/>
<
Setter
Property
="FontSize"
Value
="18"
/>
</
Style
>
titleStyle作为该Style关键字,针对的控件类型为TextBlock,相当于Label
<Setter>就是设置各种属性了,这里就不多说了。
3、<DataTemplate> 数据模版
<
DataTemplate
DataType
="{x:Type src:AuctionItem}"
>
<
Border
BorderThickness
="1"
BorderBrush
="Gray"
Padding
="7"
Name
="border"
Margin
="3"
Width
="500"
>
<
Grid
>
<
Grid
.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
Grid
.ColumnDefinitions
>
<
ColumnDefinition
Width
="20"
/>
<
ColumnDefinition
Width
="86"
/>
<
ColumnDefinition
Width
="*"
/>
</
Grid.ColumnDefinitions
>
<
Polygon
Grid.Row
="0"
Grid.Column
="0"
Grid.RowSpan
="4"
Fill
="Yellow"
Stroke
="Black"
StrokeThickness
="1"
StrokeLineJoin
="Round"
Width
="20"
Height
="20"
Stretch
="Fill"
Points
="9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7"
Visibility
="Hidden"
Name
="star"
/>
<
TextBlock
Grid.Row
="0"
Grid.Column
="1"
Margin
="0,0,8,0"
Name
="descriptionTitle"
Style
="{StaticResource smallTitleStyle}"
>
Description:
</
TextBlock
>
<
TextBlock
Name
="DescriptionDTDataType"
Grid.Row
="0"
Grid.Column
="2"
Text
="{Binding Path=Description}"
Style
="{StaticResource textStyleTextBlock}"
/>
<
TextBlock
Grid.Row
="1"
Grid.Column
="1"
Margin
="0,0,8,0"
Name
="currentPriceTitle"
Style
="{StaticResource smallTitleStyle}"
>
Current Price:
</
TextBlock
>
<
StackPanel
Grid.Row
="1"
Grid.Column
="2"
Orientation
="Horizontal"
>
<
TextBlock
Text
="$"
Style
="{StaticResource textStyleTextBlock}"
/>
<
TextBlock
Name
="CurrentPriceDTDataType"
Text
="{Binding Path=CurrentPrice}"
Style
="{StaticResource textStyleTextBlock}"
/>
</
StackPanel
>
</
Grid
>
</
Border
>
<
DataTemplate
.Triggers
>
<
DataTrigger
Binding
="{Binding Path=SpecialFeatures}"
>
<
DataTrigger
.Value
>
<
src:SpecialFeatures
>
Color
</
src:SpecialFeatures
>
</
DataTrigger.Value
>
<
DataTrigger
.Setters
>
<
Setter
Property
="BorderBrush"
Value
="DodgerBlue"
TargetName
="border"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="descriptionTitle"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="currentPriceTitle"
/>
<
Setter
Property
="BorderThickness"
Value
="3"
TargetName
="border"
/>
<
Setter
Property
="Padding"
Value
="5"
TargetName
="border"
/>
</
DataTrigger.Setters
>
</
DataTrigger
>
<
DataTrigger
Binding
="{Binding Path=SpecialFeatures}"
>
<
DataTrigger
.Value
>
<
src:SpecialFeatures
>
Highlight
</
src:SpecialFeatures
>
</
DataTrigger.Value
>
<
Setter
Property
="BorderBrush"
Value
="Orange"
TargetName
="border"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="descriptionTitle"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="currentPriceTitle"
/>
<
Setter
Property
="Visibility"
Value
="Visible"
TargetName
="star"
/>
<
Setter
Property
="BorderThickness"
Value
="3"
TargetName
="border"
/>
<
Setter
Property
="Padding"
Value
="5"
TargetName
="border"
/>
</
DataTrigger
>
</
DataTemplate.Triggers
>
</
DataTemplate
>
DataType是数据类型,就是该模版要与AuctionItem类绑定,文件为AuctionItem.cs。
-------------------------------------
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="86"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
说明该网格分布为4行3列,其中第0列为20px,第1列为86px,第2列为*
<Polygon>多边形控件,这里是个星状体;<TextBlock>文本控件;可以看到每个控件都有属性Grid.Row和Grid.Column
Grid.Row是该网格分布第几行,Grid.Column是该网格分布第几列,如Grid.Row="0" Grid.Column="1"表示该控件属于第0行第1列;
-----------------------------------------
并且控件的属性Style,用到前面谈到的Style,如Style="{StaticResource textStyleTextBlock}",用到了关键字为textStyleTextBlock的Style;
-----------------------------------------
属性Text,表示显示的文本内容,如Text="{Binding Path=CurrentPrice}",绑定了前面说的AuctionItem.cs中的属性CurrentPrice
-----------------------------------------
<DataTemplate.Triggers>数据触发
<
DataTemplate
.Triggers
>
<
DataTrigger
Binding
="{Binding Path=SpecialFeatures}"
>
<
DataTrigger
.Value
>
<
src:SpecialFeatures
>
Color
</
src:SpecialFeatures
>
</
DataTrigger.Value
>
<
DataTrigger
.Setters
>
<
Setter
Property
="BorderBrush"
Value
="DodgerBlue"
TargetName
="border"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="descriptionTitle"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="currentPriceTitle"
/>
<
Setter
Property
="BorderThickness"
Value
="3"
TargetName
="border"
/>
<
Setter
Property
="Padding"
Value
="5"
TargetName
="border"
/>
</
DataTrigger.Setters
>
</
DataTrigger
>
<
DataTrigger
Binding
="{Binding Path=SpecialFeatures}"
>
<
DataTrigger
.Value
>
<
src:SpecialFeatures
>
Highlight
</
src:SpecialFeatures
>
</
DataTrigger.Value
>
<
Setter
Property
="BorderBrush"
Value
="Orange"
TargetName
="border"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="descriptionTitle"
/>
<
Setter
Property
="Foreground"
Value
="Navy"
TargetName
="currentPriceTitle"
/>
<
Setter
Property
="Visibility"
Value
="Visible"
TargetName
="star"
/>
<
Setter
Property
="BorderThickness"
Value
="3"
TargetName
="border"
/>
<
Setter
Property
="Padding"
Value
="5"
TargetName
="border"
/>
</
DataTrigger
>
</
DataTemplate.Triggers
>
它的意思是绑定了AuctionItem.cs中的属性SpecialFeatures,实际上SpecialFeatures是个枚举类型,它包括None,Color,Highlight,上面代码得出,当SpecialFeatures为Color时,设置边框属性;当SpecialFeatures为Highlight时,设置边框属性并且加颗星星,这么做的目的是来区分拍卖级别。
再来看看MainWindows.xaml做些什么
总的来说,其实真正用来呈现窗体给我们的就是这个类。
1 有这么一句代码
<CollectionViewSource
Source
=
"
{Binding Source={x:Static Application.Current}, Path=AuctionItems}
"
x:Key
=
"
listingDataView
"
/>
它是绑定了当前应用程序入口的数据源,换句话说,就是它把DataBindingLabApp.xaml.cs中的的属性队列AuctionItems数据攘入其中,也就是各种拍卖信息了。
2
<ListBox Name
=
"
Master
"
Grid.Row
=
"
2
"
Grid.ColumnSpan
=
"
3
"
Margin
=
"
8
"
ItemsSource
=
"
{Binding Source={StaticResource listingDataView}}
"
>
<ListBox.GroupStyle>
<GroupStyle
HeaderTemplate
=
"
{StaticResource groupingHeaderTemplate}
"
/>
</ListBox.GroupStyle>
</ListBox>
绑定源就是上面定义的关键字listingDataView的数据源。至此,该ListBox就把各种拍卖信息显示出来了,如下图所示
3、其他问题
<CheckBox Name
=
"
Grouping
"
Grid.Row
=
"
1
"
Grid.Column
=
"
0
"
Checked
=
"
AddGrouping
"
Unchecked
=
"
RemoveGrouping
"
Margin
=
"
8
"
Style
=
"
{StaticResource checkBoxStyle}
"
>Group by category</CheckBox>
<Button Name
=
"
OpenAddProduct
"
Grid.Row
=
"
4
"
Grid.Column
=
"
1
"
Content
=
"
Add Product
"
HorizontalAlignment
=
"
Center
"
Margin
=
"
8
"
Click
=
"
OpenAddProductWindow
"
/>
其中属性Checked,Unchecked,Click都一一对应的是一个方法AddGrouping,RemoveGrouping,OpenAddProductWindow,它在MainWindow.xaml.cs后台代码展出,这里就不一一叙述了。
整个运行界面为:
下载代码
结束语:对于xaml的评价,有这么几点:
灵活的平台级控件开发体系
更方便的控件布局能力
利用了图形加速能力的图像处理管道
灵活丰富的样式功能和样式模板
强大的声明式数据绑定
而对于XAML的使用将会使得windows应用程序很像现在的web开发。
以上是我今天学习WPF的心得,觉得有什么不对的地方请多多指教,小弟初入门,呵呵!