在Windows Phone 8.1中数据显示交互控件无外乎FlipView,ListView,GridView等,但我们用的时候总不能直接写
<FlipView/>,<ListView/>,<GridView/>之类来使用吧,虽说这样也可以,但这样呈现出来的画面就很难看了,哪
个用户会高兴看呢,反正我是不高兴看。
在这里问题就来了,不光要求数据能绑定到位,功能也到位,界面也总得美化美化吧。
好了进入正题了:
这些数据呈现控件的基石是谁呢?当然是ItemsControl。
换句话说像FlipView,ListView这些控件都是继承了ItemsControl的。所以在此通透地了解下ItemsControl控件,学
会怎样自定义ItemsControl控件,去美化它,那么继承自它的FlipView,ListView等控件就知道怎么设置了
ItemsControl和其他数据显示控件的区别:
a.ItemsControl里没有内置的ScrollViewer控件,所以这样就导致下面例子中第一个ItemsControl中部分数据未显示
出来(当然要显示出来,加个ScrollViewer控件即可,这样就可以滑动看到所有的ItemsControl里面的数据了)
b.FlipView,ListView等数据显示控件的可视化结构树里面都封装了ScrollViewer,简言之在这些控件中不管你加多
少东西,都可以通过上下滑动看到的而无需另加ScrollViewer
(这个也就奠定了后来实现ListBox控件滑动到底部数据自动加载的需求了)
好了,开始专说ItemsControl吧,记住以下几点即可:
a.ItemsControl.Template自定义ItemsControl控件的样式
其中要用ItemsPresenter来呈现ItemsControl的Items(不是Item)
具体表现的结构:ItemsControl=>ItemsControl.Template=>ControlTemplate
b.ItemsControl.ItemContainerStyle用来修改或者设置ItemsControl的Item的样式的(不是Items)
具体表现的结构:ItemsControl=>ItemsControl.ItemContainerStyle=>Style=><setter property="" value="">
c.以下两个来呈现数据的,前者直接在ItemsControl中添加;后者通过自定义子数据模板来给ItemsControl添加数据
(一般是自定义数据模板DataTemplate,然后后台绑定数据)
模式一:ItemsControl.Items
模式二:ItemsControl.ItemTemplate
常见表现的结构:ItemsControl=>ItemsControl.ItemTemplate=>DataTemplate
终于可以贴代码了:(这边我没有写通过后台绑定数据来呈现的方式,因为和直接写数据都差不多)
<Page
x:Class="TestUnion.ItemsControlDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestUnion"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<!--自定义ItemsControl控件的样式,-->
<!--其中要用ItemsPresenter来呈现ItemsControl的Items(不是Item)-->
<!--ItemsControl.Template-->
<!-- 具体表现的结构:ItemsControl=>ItemsControl.Template=>ControlTemplate -->
<!--这个则是用来修改或者设置ItemsControl的Item的样式的(不是Items)-->
<!--ItemsControl.ItemContainerStyle-->
<!-- 具体表现的结构:ItemsControl=>ItemsControl.ItemContainerStyle=>Style=><setter property="" value=""> -->
<!--以下两个来呈现数据的,前者直接在ItemsControl中添加;后者通过自定义子数据模板来给ItemsControl添加数据(一般是自定义数据模板DataTemplate,然后后台绑定数据)-->
<!--ItemsControl.Items-->
<!--ItemsControl.ItemTemplate-->
<!-- 常见表现的结构:ItemsControl=>ItemsControl.ItemTemplate=>DataTemplate -->
<!--ListBox,ComboBox,FlipView,GridView,ListView不仅间接继承了ItemsControl,而且这些控件可视化结构树里面都封装了ScrollViewer-->
<StackPanel>
<ItemsControl>
<ItemsControl.Items>
<Rectangle Width="100" Height="100" Fill="Green"/>
<Ellipse Width="100" Height="100" Fill="Blue"/>
<Border Width="100" Height="100" BorderThickness="50" CornerRadius="50">
<Border.BorderBrush>
<ImageBrush ImageSource="Assets/boy2.png"/>
</Border.BorderBrush>
</Border>
<!--以下红色的Rectangle在ItemsControl中未显示出来,解决方案看本例第二个ItemsControl(给ItemsControl加上ScrollViewer)-->
<Rectangle Width="100" Height="100" Fill="Red"/>
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="Orange" BorderThickness="5" Width="300" Height="300">
<!--ItemsPresenter来呈现ItemsControl的Items(不是Item)-->
<ItemsPresenter />
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
<ItemsControl Margin="0 10 0 0">
<ItemsControl.Items>
<Rectangle Width="100" Height="100" Fill="Green"/>
<Ellipse Width="100" Height="100" Fill="Blue"/>
<Border Width="100" Height="100" BorderThickness="50" CornerRadius="50">
<Border.BorderBrush>
<ImageBrush ImageSource="Assets/boy2.png"/>
</Border.BorderBrush>
</Border>
<!--以下红色的Rectangle在ItemsControl中就可以通过滑动显示出来,因为在它的模板中加了ScrollViewer控件-->
<Rectangle Width="100" Height="100" Fill="Red"/>
<Rectangle Width="100" Height="100" Fill="Red"/>
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="Orange" BorderThickness="5" Width="300" Height="300">
<ScrollViewer>
<!--ItemsPresenter来呈现ItemsControl的Items(不是Item)-->
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</StackPanel>
</Grid>
</Page>
运行截图:
初始界面:
第二张滚动下面一个ItemsControl(上面一个ItemControl滚不了,因为每家ScrollViewer)
这边我还特意截图截到了ScrollViewer的右侧滚动条:
好了,大家自己可以试试,玩出自己的自定义吧。
実に おもしろい