Pivot 及 Panorama 使用 ItemTemplate

前陣子在寫一個新產品，因為頁面上使用了 Pivot 做呈現，但因為某幾頁的資料不一定會出現，所以 PivotItem 是不固定的，所以不能在 XAML 中寫死，而且 PivotItem 的 Visibility 屬性基本上是設心酸的，設為隱藏根本就沒反應，只能透過 Pivot.Items.Remove 或 RemoveAt 方式來拿掉某頁…

因為這種種幾項原因，我必須動態產生 Pivot 的 ItemsSource 屬性，再透過指定 ItemTemplate 來讓每一個 PivotItem 呈現不同的排版，想起來應該是不會有什麼問題，但實際上執行時發現呈現上每一個 PivotItem 的尺寸是隨著內容元件的大小而改變的，而不像在 XAML 中撰寫時，每個 PivotItem 都可以佔滿除了標題之外的剩餘空間，找了一些資料發現有兩個重要的屬性必須指定值，才可以讓 PivotItem 為最大尺寸，該屬性及對應的值為

HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"

其實 Stretch 本來就是這兩個屬性的預設值，所以看起來是中間某一層指定了其他的值上去，以下示範使用 ItemTemplate 與 DataTemplateSelector 搭配的範例

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="GroupItemTemplate">
        <view:GroupTemplateSelector HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Content="{Binding}">
            <view:GroupTemplateSelector.Friend>
                <DataTemplate>
                    <Grid Background="White">
                    </Grid>
                </DataTemplate>
            </view:GroupTemplateSelector.Friend>
            <view:GroupTemplateSelector.Schedule>
                <DataTemplate>
                    <Grid Background="Gray">
                    </Grid>
                </DataTemplate>
            </view:GroupTemplateSelector.Schedule>
            <view:GroupTemplateSelector.Setting>
                <DataTemplate>
                    <Grid Background="Gray">
                    </Grid>
                </DataTemplate>
            </view:GroupTemplateSelector.Setting>
        </view:GroupTemplateSelector>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>


<phone:Pivot ItemsSource="{Binding ItemGroups}" ItemTemplate="{StaticResource GroupItemTemplate}">
    <phone:Pivot.Title>
        <Image Source="/Assets/logo.png" Width="322" Stretch="None" HorizontalAlignment="Left"/>
    </phone:Pivot.Title>
    <phone:Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ItemTitle}" FontSize="58"/>
        </DataTemplate>
    </phone:Pivot.HeaderTemplate>
</phone:Pivot>