如何更改枢轴页眉模板中的Windows Phone 8 [英] How to Change Pivot Header Template in Windows Phone 8

问题描述

我希望能够改变透视页眉和应用程序标题的背景中的Windows Phone 8，从我收集的，我必须创建一个自定义样式针对Pivot控件。我不知道，但是，仅更改标题的背景是什么？

I would like to be able to change the background of the Pivot Headers and Application Title in Windows Phone 8. From what I gather, I must create a custom style targeting the Pivot control. I am not sure, however, to change the background of only the headers?

我想以某种方式调整样式

I would like to adjust the style somehow

<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>

推荐答案

编辑过的WinRT（抱歉耽搁，并感谢您的提醒来更新这个答案）：
当文档大纲编辑全模板，请右键单击该控件并选择编辑模板 - 电流（在Visual Studio或混合）和模板会为你生成，您可以编辑，只要你想，<一个href=\"http://stackoverflow.com/questions/16038921/change-style-for-all-listboxitem-in-a-listbox-windows-phone-8/16040188#16040188\">see我的答案这里截图。

EDITED for WinRT (sorry for the delay and thanks for the reminder to update this answer): To edit a full template right click on the control when in Document Outline and select Edit Template - Current (in Visual Studio or Blend) and the template will be generated for you and you can edit as you want, see my answer here for screenshots.

下面是低于（发表在2013年）重做Windows Phone的Windows运行时的两个例子：

Here are the two examples below (posted in 2013) redone for Windows Phone Windows 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>

和第二个例子，我们正在包装内容presenter网格中的通知（你可以使用一个边框以及或任何其他元素）：

And second example, notice that we are wrapping the ContentPresenter in a Grid (you could use a border as well or any other element):

<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>

使用上面的风格：

Using the above style:

<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>

顺便说一句，它通常是$ pferred保持风格在一个单独的文件 - 风格，我只是让他们在同一页上的简单此例如对$。如果删除X：关键属性的风格将被应用到设定的目标类型（在这个例子中枢轴）

By the way, it's usually preferred to keep styles in a separate style file- I've only kept them on the same page for simplicity for this example. If you remove the x:key attribute the style will be applied to all the controls of the set target type (Pivot in this example).

从2013年回答的Windows Phone 7.X和Windows Phone 8（WP的Silverlight：

有你可以做一些方法，但这里是一个例子：

There are a few ways you can do it, but here is one example:

<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>

如果您然而要做到这一点：

If you however want to do this:

您可以做到这一点，删除X：键适用于所有pivoits，或者使用键设置样式上刚刚选择pivoit元素，像这样：

You can do this, remove the x:key to apply to all pivoits, or use the key to set the style on just selected pivoit elements like so:

<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>

不要忘了用

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

这篇关于如何更改枢轴页眉模板中的Windows Phone 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！