Windows Phone 8.1中資料顯示控件基石------ItemsControl

在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的右側滾動條：

好了，大家自己可以試試，玩出自己的自定義吧。

実に　おもしろい