第二十五章：页面变化（六）

使用ItemTemplate
TabbedPage还可用于呈现小数据集，每个数据集是由选项卡标识的单独页面。 您可以通过设置TabbedPage的ItemsSource属性并指定用于呈现每个页面的ItemTemplate来完成此操作。
MultiTabbedColors项目包含单个页面类，该类作为ContentPage添加到项目中，但随后被修改为TabbedPage。 该项目还引用了Xamarin.FormsBook.Toolkit库。
请注意，XAML文件的根元素将TabbedPage的ItemsSource属性设置为NamedColor.All静态属性中可用的集合。 该文件的其余部分定义ItemTemplate属性。 TabbedPage.ItemTemplate属性元素标记包含一对DataTemplate标记，其中显示以ContentPage开头的页面定义。 数据绑定引用ItemsSource集合中对象的属性，在本例中为NamedColor的属性：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:toolkit=
                "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
            x:Class="MultiTabbedColors.MultiTabbedColorsPage"
            ItemsSource="{x:Static toolkit:NamedColor.All}">
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}">
                <ContentPage.Padding>
                    <OnPlatform x:TypeArguments="Thickness"
                                iOS="0, 20, 0, 0" />
                </ContentPage.Padding>

                <StackLayout>
                    <Label Text="{Binding FriendlyName}"
                           Style="{DynamicResource TitleStyle}"
                           HorizontalTextAlignment="Center" />

                    <ScrollView VerticalOptions="FillAndExpand">
                        <StackLayout>
                            <BoxView Color="{Binding Color}"
                                     WidthRequest="144"
                                     HeightRequest="144"
                                     VerticalOptions="CenterAndExpand"
                                     HorizontalOptions="Center" />
                            <StackLayout VerticalOptions="CenterAndExpand"
                                         HorizontalOptions="Center">
                                <StackLayout.Resources>
                                    <ResourceDictionary>
                                        <Style TargetType="Label">
                                            <Setter Property="HorizontalTextAlignment"
                                                    Value="End" />
                                        </Style>
                                    </ResourceDictionary>
                                </StackLayout.Resources>
                                <Label Text="{Binding Color.R, 
                                                      StringFormat='Red = {0:F2}'}" />
                                <Label Text="{Binding Color.G, 
                                                      StringFormat='Green = {0:F2}'}" />
                                <Label Text="{Binding Color.B, 
                                                      StringFormat='Blue = {0:F2}'}" />
                                <Label Text="{Binding Color.A, 
                                                      StringFormat='Alpha = {0:F2}'}" />
                                <Label Text=" " />
                                <Label Text="{Binding Color.Hue, 
                                                      StringFormat='Hue = {0:F2}'}" />
                                <Label Text="{Binding Color.Saturation, 
                                                      StringFormat='Saturation = {0:F2}'}" />
                                <Label Text="{Binding Color.Luminosity, 
                                                      StringFormat='Luminosity = {0:F2}'}" />
                            </StackLayout>
                        </StackLayout>
                    </ScrollView>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage> 

要避免覆盖iOS屏幕顶部的状态栏，请在ContentPage模板上设置Padding，而不是在TabbedPage本身上设置。
将此ContentPage模板的Title属性设置为要在选项卡中显示的文本，以标识每个页面。 请注意，Title已绑定到NamedColor的Name属性，但页面的内容还包含带有TitleStyle的Label以显示FriendlyName属性，该属性类似于Name属性，但如果颜色名称由多个单词组成，则包含空格。
以下是在三个标准平台上运行的TabbedColors：

选项卡的功能类似于允许您选择特定页面的菜单。
好消息是，这在Android和Windows 10 Mobile上运行良好。 您可以快速滚动Android屏幕顶部的标题，然后在Windows 10 Mobile上滑动实际页面。
但是，在iOS上，只显示了四个项目，更多按钮和省略号不起作用。此外，没有图标，并且您需要TabbedPage上的图标才能批准Apple App Store的应用程序。 虽然TabbedPage的这种功能似乎是一种非常有趣的生成页面的方式，但它不适合跨平台应用程序。 更合适的是CarouselView，遗憾的是，到本书出版时还没有准备好。