Windows Phone 8.1中数据显示控件基石------ItemsControl

深碍√TFBOYSˉ_ 2022-08-06 07:23 94阅读 0赞

在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>
            
            
            
            
    
            
            
            
            
            
            
            
            
            
            
            <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 Width="100" Height="100" Fill="Red"/>
                    </ItemsControl.Items>
                    <ItemsControl.Template>
                        <ControlTemplate TargetType="ItemsControl">
                            <Border BorderBrush="Orange" BorderThickness="5" Width="300" Height="300">
                                
                                <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 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 />
                                    </ScrollViewer>
                                </Border>
                        </ControlTemplate>
                    </ItemsControl.Template>
                </ItemsControl>
            </StackPanel>
        </Grid>
    </Page>

运行截图：

初始界面：

![20150104210941531][]

第二张滚动下面一个ItemsControl(上面一个ItemControl滚不了，因为每家ScrollViewer)

这边我还特意截图截到了ScrollViewer的右侧滚动条：

![20150104211106090][]

好了，大家自己可以试试，玩出自己的自定义吧。

実に　おもしろい

[20150104210941531]: /images/20220806/279001a7615d413e9631edc02006f031.png
[20150104211106090]: /images/20220806/bf4a8354b99c433fa2e3c55a782262cd.png