ItemsControl 解析(转)
先上个示例
< ItemsControl Margin = "10" ItemsSource = "{Binding}" Name = "itemsControl" > < ItemsControl.Template > < ControlTemplate TargetType = "{x:Type ItemsControl}" > < Border CornerRadius = "5" > < ScrollViewer VerticalScrollBarVisibility = "Auto" > < ItemsPresenter /> </ ScrollViewer > </ Border > </ ControlTemplate > </ ItemsControl.Template > < ItemsControl.ItemsPanel > < ItemsPanelTemplate > < WrapPanel Name = "wp" /> </ ItemsPanelTemplate > </ ItemsControl.ItemsPanel > < ItemsControl.ItemTemplate > < DataTemplate > < Image Source = "{Binding XPath=@}" /> </ DataTemplate > </ ItemsControl.ItemTemplate > </ ItemsControl > |
ItemsControl是一种数据展示控件,大致分为三个部分组成:Template, ItemTemplate, ItemsPanel.
- 先说 Template,Template 是整个控件的架构设计,最外面放什么的东东,里面放什么东东,都在这里控制,负责宏观的结构,下面这个例子:最外面是一个border,然后要放一个ScrollViewer用来滚动展示,滚动的内容,就由ItemsPresenter 来决定。对应blend菜单:右键—>Edit Template
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<Border CornerRadius="5">
< ScrollViewer VerticalScrollBarVisibility="Auto" >
< ItemsPresenter />
< /ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
2. 再说ItemsPanel,作为数据展示,总要有个容器吧,这个panel就是为了设置容器用的,设置为StackPanel,WrapPanel都可以,足够灵活,对应上一条中的ItemsPresenter,
对应blend菜单 :右键--àEdit Additional TemplatesàEdit Layout Items(ItemsPanel)
例如:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Name="wp" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
3. 最后是ItemTemplate, 每一个数据条目应该是个什么样子,负责具体呈现的,例如数据项是一个图片,那就用图片来显示,
对应blend菜单 :右键--à Edit Additional TemplatesàEdit Generated Items(ItemsTemplate)
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding XPath=@}" />
</DataTemplate>
</ItemsControl.ItemTemplate> 4.附带一个,ItemContainerStyle ,也就是控制每个数据条目的显示样式,例如,想要在上例中的Image外面加一个边框,
对应blend菜单 :右键--à Edit Additional TemplatesàEdit Generated Item Container (ItemContainerStyle)
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderBrush="Black" BorderThickness=".5" Height="100">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.ItemContainerStyle>
搞了很久才明白这么多东东,感觉微软把这事搞复杂了,要是像asp.net 里面repeater或者datalist那种弄法,会简单很多哦。