Windows Phone - Custom PivotItem Header

Windows Phone - Custom PivotItem Header

由於我在開發公車動態查詢時,有用戶建議在去/返程顯示完整的路線方向,所以我希望做出如下效果:

wp_ss_20131015_0003wp_ss_20131015_0004

把PivotItem的Header分別用二個TextBlock給包裝起來,因為需要二個TextBlock有不同的字型。這是我的需求。

 

參考了以下<References>的內容,大部分的作法都因為用了一個TextBlock來做{Binding }的方式,如下:

<controls:Pivot.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Image Height="48" Width="48" Source="/MyBulletImage.png" />
            <TextBlock Text="{Binding}" Foreground="Black"/>
        </StackPanel>
    </DataTemplate>
</controls:Pivot.HeaderTemplate>

常見的範例就是透過HeaderTemplate重新定義PivotHeader的部分,用於呈現不同的樣式。

 

那怎麼做到上述提到的功能呢?為了做到可以在Header裡同時顯示二個TextBlock,我分享二個方式:

(1) 利用XAML定義好<HeaderTemplate />搭配用DataBinding的方式將畫面顯示出來

 

1-1. 先定義好畫面要呈現的XAML,如下:

<!--Pivot Control-->
<phone:Pivot Title="MY APPLICATION" x:Name="pvtRoot">
    <!-- 定義Header中有二個TextBlock-->
    <phone:Pivot.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Target}" />
                <TextBlock Text="{Binding Name}"
                          Margin="3,0,0,10" 
                          VerticalAlignment="Bottom"
                          Style="{StaticResource PhoneTextTitle2Style}" />
            </StackPanel>
        </DataTemplate>
    </phone:Pivot.HeaderTemplate>
    <!--Pivot item one-->
    <phone:PivotItem Header="item1">
        <Grid/>
    </phone:PivotItem>
 
    <!--Pivot item two-->
    <phone:PivotItem Header="item2">
        <Grid/>
    </phone:PivotItem>
</phone:Pivot>

 

1-2. 自定義一個類別:PivotDataItem,做為DataBinding的來源,如下:

public class PivotDataItem
{
    //定義方向
    public string Target { get; set; }
    //定義路線
    public string Name { get; set; }
}

 

1-3. 做DataBinding的功能,如下:

PivotDataItem tDataItem = new PivotDataItem();
tDataItem.Name = string.Format("往({0})", "台北市");
 
if (pTarget == "Go")
{
    tDataItem.Target = "去";
    //指定DataBinding
    ((PivotItem)pivControl.Items[0]).Header = tDataItem;
}
else
{
    tDataItem.Target = "返";
    //指定DataBinding
    ((PivotItem)pivControl.Items[1]).Header = tDataItem;
}

 

 

(2) 利用程式碼來進行建立

//建立Header要使用的物件
StackPanel tESP = new StackPanel{ Orientation = System.Windows.Controls.Orientation.Horizontal};
//設定二個TextBlock:Target方向;Name:路線名稱
TextBlock tETarget = new TextBlock();
TextBlock tEName = new TextBlock();
tEName.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
tEName.Style = (Style)Application.Current.Resources["PhoneTextTitle2Style"];
tEName.Margin= new Thickness(3,0,0,10);
tESP.Children.Add(tETarget);
tESP.Children.Add(tEName);
 
//Name:路線名稱
tEName.Text = string.Format("往({0})", "");
 
if (pTarget == "GoNodes")
{
    //去程(最後一個站)
    tETarget.Text = "去";
    ((PivotItem)pivControl.Items[0]).Header = tESP;
}
else
{
    //返程(最後一個站)
    tETarget.Text = "返";
    ((PivotItem)pivControl.Items[1]).Header = tESP;
}

    透過建立二個TextBlock分別放置一個目標、一個路徑名稱,最後放入StackPancel之中。並且分別指定二個具有特定的Style,

最後再將StackPancel指定於PivotItem.Header的屬性中。

 

=====

以上是分享客製Pivot Header的部分,希望對大家有所幫助。很多畫面的東西如果是需要大量動態給定值的話,

可以多參考使用DataBinding的方式,讓畫面程式的效果會比較好。

 

References

How to Change Pivot Header Template in Windows Phone 8

Set text to custom title page pivot

Custom fontsize for each pivotiem of a pivot

Alter a Pivot controls header template the easy way (WP7)

 

Dotblogs 的標籤: