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

標籤：windows phone 8.1   itemscontrol.templat   itemscontrol.itemcon   itemscontrol.items   itemscontrol.itemtem   

在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的右側捲軸：

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

実に　おもしろい

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