Cách thay đổi mẫu tiêu đề Pivot trong Windows Phone 8

Question

Tôi muốn có thể thay đổi nền của tiêu đề Pivot và tiêu đề ứng dụng trong Windows Phone 8. Từ những gì tôi thu thập, tôi phải tạo kiểu tùy chỉnh nhắm mục tiêu điều khiển Pivot . Tôi không chắc chắn, tuy nhiên, để thay đổi nền của chỉ các tiêu đề?

Tôi muốn điều chỉnh phong cách bằng cách nào đó

<Style x:Key="MyPivotStyle" TargetType="phone:Pivot"> 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="phone:Pivot"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <Grid CacheMode="BitmapCache" Grid.RowSpan="2"> 
        <Grid.Background> 
         <ImageBrush ImageSource="/Assets/bg_header.png"/> 
        </Grid.Background> 
       </Grid> 
       <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" /> 
       <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Margin="24,17,0,-7"> 
        <StackPanel Orientation="Horizontal"> 
         <Image Source="/Assets/company_name.png" Width="213.75" HorizontalAlignment="Left" VerticalAlignment="Top" /> 
         <Button HorizontalAlignment="Right" VerticalAlignment="Top" Margin="140,-20,0,35" BorderThickness="0" x:Name="btnHome"> 
          <Image Source="/Assets/btnHome.png" Width="48" Height="48" ></Image> 
         </Button> 
        </StackPanel> 
       </ContentPresenter> 
       <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Foreground="White" Grid.Row="1"/> 
       <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/> 
      </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

Answer 1

EDITED cho WinRT (xin lỗi vì sự chậm trễ và cảm ơn cho lời nhắc nhở để cập nhật câu trả lời này): Để chỉnh sửa một đầy đủ mẫu click chuột phải trên điều khiển khi trong Bản phác thảo tài liệu và chọn Chỉnh sửa mẫu - Hiện tại (trong Visual Studio hoặc Blend) và mẫu sẽ được tạo cho bạn và bạn có thể chỉnh sửa theo ý muốn, see my answer here for screenshots.

Dưới đây là hai ví dụ amples dưới đây (được đăng vào năm 2013) được làm lại cho Windows Windows Phone Runtime:

<Grid Background="Transparent"> 
    <Pivot Title="Re-templating example"> 
     <Pivot.HeaderTemplate> 
      <DataTemplate> 
       <Grid Background="Blue"> 
        <TextBlock Text="{Binding}" /> 
       </Grid> 
      </DataTemplate> 
     </Pivot.HeaderTemplate> 
     <Pivot.TitleTemplate> 
      <DataTemplate> 
       <Grid Background="Green"> 
        <TextBlock Text="{Binding}" /> 
       </Grid> 
      </DataTemplate> 
     </Pivot.TitleTemplate> 
     <PivotItem Header="One"> 
      <TextBlock FontSize="35" 
         Text="This is item one" /> 
     </PivotItem> 
     <PivotItem Header="Two"> 
      <TextBlock FontSize="35" 
         Text="This is item 2" /> 
     </PivotItem> 
    </Pivot> 
</Grid> 

Và ví dụ thứ hai, thông báo rằng chúng ta đang gói các ContentPresenter trong một lưới (bạn có thể sử dụng một biên giới cũng hay bất kỳ yếu tố khác) :

<Page.Resources> 
    <SolidColorBrush x:Key="PivotBackground" Color="#FFE46C08"/> 

    <Style x:Key="PivotStyle" TargetType="Pivot"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Pivot"> 
        <Grid x:Name="RootElement" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <!--Notice that ContentControl is wrapped in a Grid and Background set to resource furtehr up--> 
         <Grid VerticalAlignment="Center" Background="{StaticResource PivotBackground}"> 
          <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/> 
         </Grid> 
         <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled"> 
          <PivotPanel x:Name="Panel" VerticalAlignment="Stretch"> 
           <!--Background set to resource further up--> 
           <PivotHeaderPanel Background="{StaticResource PivotBackground}" x:Name="Header" > 
            <PivotHeaderPanel.RenderTransform> 
             <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/> 
            </PivotHeaderPanel.RenderTransform> 
           </PivotHeaderPanel> 
           <ItemsPresenter x:Name="PivotItemPresenter"> 
            <ItemsPresenter.RenderTransform> 
             <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/> 
            </ItemsPresenter.RenderTransform> 
           </ItemsPresenter> 
          </PivotPanel> 
         </ScrollViewer> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

Sử dụng phong cách trên:

<Grid Background="Transparent"> 
    <Pivot Style="{StaticResource PivotStyle}" 
      Title="Re-templating example"> 
     <PivotItem Header="One"> 
      <TextBlock FontSize="35" Text="This is item one" /> 
     </PivotItem> 
     <PivotItem Header="Two"> 
      <TextBlock FontSize="35" Text="This is item 2"/> 
     </PivotItem> 
    </Pivot> 
</Grid> 

Nhân tiện, thường được ưu tiên giữ kiểu trong tệp kiểu riêng biệt- Tôi chỉ giữ chúng trên cùng một trang để đơn giản cho ví dụ này. Nếu bạn loại bỏ thuộc tính x: key, kiểu dáng sẽ được áp dụng cho tất cả các điều khiển của loại mục tiêu đã đặt (Pivot trong ví dụ này).

trả lời từ năm 2013 cho Windows Phone 7.x và Windows Phone 8 (WP Silverlight:

Có một vài cách bạn có thể làm điều đó, nhưng đây là một ví dụ:

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <phone:Pivot Grid.Row="1"> 
     <phone:Pivot.HeaderTemplate> 
      <DataTemplate> 
       <Grid Background="Red" Height="200"> 
        <TextBlock Text="{Binding}"/> 
       </Grid> 
      </DataTemplate> 
     </phone:Pivot.HeaderTemplate> 
     <phone:PivotItem Header="Test"> 
      <TextBlock Text="ghjgb"/> 
     </phone:PivotItem> 
     <phone:PivotItem Header="Test"> 
      <TextBlock Text="ghjgb"/> 
     </phone:PivotItem> 
    </phone:Pivot> 

Nếu bạn tuy nhiên muốn làm điều này:

Bạn có thể làm điều này, hãy tháo x: chìa khóa để áp dụng cho tất cả các pivoits, hoặc sử dụng phím để thiết lập các phong cách trên các yếu tố pivoit vừa chọn như vậy:

<controls:Pivot Title="The Marathon Runner" Style="{StaticResource PivotStyle}"> 
    <Style x:Key="PivotStyle" TargetType="phone:Pivot"> 
     <Setter Property="Margin" Value="0"/> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <Grid/> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="phone:Pivot"> 
        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
     VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <Grid Background="#ff9000" CacheMode="BitmapCache" Grid.RowSpan="2" /> 
         <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" 
     Grid.Row="2" /> 
         <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" 
        Content="{TemplateBinding Title}" Margin="24,17,0,-7"/> 
         <Primitives:PivotHeadersControl x:Name="HeadersListElement" 
              Grid.Row="1"/> 
         <ItemsPresenter x:Name="PivotItemPresenter" 
        Margin="{TemplateBinding Padding}" Grid.Row="2"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 

Dont quên sử dụng:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"