C# Windows Phone 8 自訂PivotItem標題,大小、顏色…等,讓Pivot更有顏色 ! !

  • 3271
  • 0
  • C#
  • 2015-06-09

一般我們在撰寫Windows Phone APP 有時會使用Pivot元件來幫我們完成頁面的切換,如此一來便不用開太多的Page,使用者只須左右滑動便可以得知相當多的資訊,但是內建Pivot預設樣式的標題,總是黑與白,那我們可以透過自訂的方式來修改Pivot的標題,讓您的Windows Phone App更有活力。

本篇文章將引導您透過兩種方式修改Pivot的標題。

一般我們在撰寫Windows Phone APP 有時會使用Pivot元件來幫我們完成頁面的切換,如此一來便不用開太多的Page,使用者只須左右滑動便可以得知相當多的資訊,但是內建Pivot預設樣式的標題,總是黑與白,那我們可以透過自訂的方式來修改Pivot的標題,讓您的Windows Phone App更有活力。

 

本篇文章將引導您透過兩種方式修改Pivot的標題。

 

一般來說我們會很直覺使用Pivot項下面的方式。

 

   1:  <phone:Pivot >
   2:      <phone:PivotItem Margin="0" >
   3:          ...
   4:      </phone:PivotItem>
   5:   
   6:      <phone:PivotItem Margin="0" >
   7:         ...
   8:      </phone:PivotItem>
   9:   
  10:      <phone:PivotItem Margin="0" >
  11:         ....
  12:      </phone:PivotItem>
  13:  </phone:Pivot>

 

當我們執行時,會隨者Windows Phone 的手機設定的主體顏色顯示相對應的Pivot標題樣式,只有黑色或白色。

1 2

 

但是我們可以透過自定義的方式修改Pivot的標題,讓APP看起來更有顏色!!

 

 

方法一: 透過Xaml修改:

我們可以在PivotItem的控制項底下加入以下的語法。

   1:  <phone:PivotItem.Header>
   2:       <Grid  Background="Red">
   3:            <TextBlock  Text="TWO" Foreground="Yellow" FontSize="40" />
   4:       </Grid>
   5:  </phone:PivotItem.Header>

 

PivotItem的Header屬性其實是一個Content裡面可以用Grid包起來,然後再塞一堆雜七雜八的控制項,如上述Xaml語法我們可以得知每一項的PivotItem都可以獨立自訂標題的樣式。就項下面這樣。

 

   1:  <phone:Pivot>
   2:   
   3:      <!--==================內容1==================-->
   4:      <phone:PivotItem Margin="0" >
   5:          <phone:PivotItem.Header>
   6:              <Grid  Background="Blue">
   7:                  <TextBlock Text="ONE" Foreground="Orange" FontSize="50" />
   8:              </Grid>
   9:          </phone:PivotItem.Header>
  10:          <Grid>
  11:              <TextBlock Text="This is ONE" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40"/>
  12:          </Grid>
  13:      </phone:PivotItem>
  14:      <!--==================內容2==================-->
  15:      <phone:PivotItem Margin="0" >
  16:          <phone:PivotItem.Header>
  17:              <Grid  Background="Red">
  18:                  <TextBlock  Text="TWO" Foreground="Yellow" FontSize="40" />
  19:              </Grid>
  20:          </phone:PivotItem.Header>
  21:          <Grid>
  22:              <TextBlock Text="This is TWO" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40"/>
  23:          </Grid>
  24:      </phone:PivotItem>
  25:      <!--==================內容3==================-->
  26:      <phone:PivotItem Margin="0" >
  27:          <phone:PivotItem.Header>
  28:              <Grid  Background="Wheat">
  29:                  <TextBlock  Text="Three" Foreground="Brown" />
  30:              </Grid>
  31:          </phone:PivotItem.Header>
  32:          <Grid>
  33:              <TextBlock Text="This is Three" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40"/>
  34:          </Grid>
  35:      </phone:PivotItem>
  36:   
  37:  </phone:Pivot>

 

運行效果如下:

 

5 3 4

 

很重要一點,如果在<phone:PivotItem Margin="0" Header="ONE" >已經定義了Header的屬性,再自定義Header的話會出錯唷!兩者只能擇一。

 

如此一來我們便可以很輕易透過Xaml改變PivotItem的Header樣式。

 

方法二:透過C#程式碼修改

 

在Xaml中必須給PivotItem名字,這邊分別以Pi_1、Pi_2、Pi_3示範

 

   1:  <phone:Pivot >
   2:      <!--內容1-->
   3:      <phone:PivotItem x:Name="Pi_1" >
   4:          <Grid>
   5:              <TextBlock Text="This is ONE" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40"/>
   6:          </Grid>
   7:      </phone:PivotItem>
   8:      <!--內容2-->
   9:      <phone:PivotItem x:Name="Pi_2" >
  10:          <Grid>
  11:              <TextBlock Text="This is TWO" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40"/>
  12:          </Grid>
  13:      </phone:PivotItem>
  14:      <!--內容3-->
  15:      <phone:PivotItem x:Name="Pi_3" >
  16:          <Grid>
  17:              <TextBlock Text="This is Three" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40"/>
  18:          </Grid>
  19:      </phone:PivotItem>
  20:   
  21:  </phone:Pivot>

 

 

 

 

 

 

C#:

將創建一個Grid和TextBlock,並將TextBlock加入倒Grid底下,我們可以自訂Grid的屬性和TextBlock的屬性來達成自定義的PivotItem Header。

   1:  Grid G1=new Grid(){Background=new SolidColorBrush(Colors.Gray)};
   2:  TextBlock T1= new TextBlock()
   3:  {
   4:      FontSize = 35,
   5:      Text = "This is ONE",
   6:      Foreground = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)),
   7:  };
   8:  G1.Children.Add(T1);
   9:  Pi_1.Header=G1;
  10:  Grid G2 = new Grid() { Background = new SolidColorBrush(Colors.Gray) };
  11:  TextBlock T2= new TextBlock()
  12:  {
  13:      FontSize = 60,
  14:      Text = "This is TWO",
  15:      Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 255, 0)),
  16:  };
  17:  G2.Children.Add(T2);
  18:  Pi_2.Header=G2;
  19:  Grid G3 = new Grid() { Background = new SolidColorBrush(Colors.Gray) };
  20:  TextBlock T3= new TextBlock()
  21:  {
  22:      FontSize = 50,
  23:      Text = "This is THREE",
  24:      Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255)),
  25:  };
  26:  G3.Children.Add(T3);
  27:  Pi_3.Header = G3;

 

運行效果如下:

 

8 6 7

 

如此一來就學會了透過兩種方式修改Pivot的標題,突然覺得世界真美好 ! !

 

文章中的敘述如有觀念不正確錯誤的部分,歡迎告知指正 謝謝
轉載請註明出處,並且附上本篇文章網址 !  感謝。

SUKI

HOLIESTAR