Question

我有一个应用程序页面。在这个页面中，我有2个主要控件。它们是Image和Pivot Control。我想设计与以下页面相同的页面：

https://onedrive.live.com/redir?resid=C375ECE2AD56F56F%216996

在我的页面中，蓝色部分包括图像（应用程序的徽标），第一部分（白色部分）包括Pivot。 Pivot的标题是约120px的缩进。

我不知道在WP中制作此页面的方法。

请大家帮助我！

非常感谢。

Answer 1

您可以使用数据透视控件的HeaderTemplate。

<phone:Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
        </Grid>
    </DataTemplate>
</phone:Pivot.HeaderTemplate>

除文字外，您还必须在旁边添加徽标。您可以使用网格将图像留在文本中，或使用具有水平内容的堆栈面板。

更新：忘了提及＆＃34;手机＆＃34;在页面顶部声明的命名空间：

<phone:PhoneApplicationPage
...
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
...>

Answer 2

希望，这可能对你有用。根据您的要求进行修改。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <phone:Pivot>
            <phone:Pivot.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Background="Blue"
                                Margin="15,-10,0,0">
                        <TextBlock Text="{Binding}"
                                   FontSize="20"
                                   />
                    </StackPanel>
                </DataTemplate>
            </phone:Pivot.HeaderTemplate>
            <phone:PivotItem Header="item1">
                <Grid Background="Red"></Grid>
            </phone:PivotItem>
            <phone:PivotItem Header="item2">
                <Grid Background="Green"></Grid>
            </phone:PivotItem>
        </phone:Pivot> 
        <Image Source="/Assets/abc.png"
               Height="30"
               Width="30"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"/>
    </Grid>

Pivot的EditTemplate

2 个答案: