facebook pivot 简单实现

facebookpivot

<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"
                            x:Class="FacebookPivot.MainPage"
                            mc:Ignorable="d"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <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="*" />
                            </Grid.RowDefinitions>

                            <Grid Background="{TemplateBinding Background}"
                                  Grid.RowSpan="3" />
                            <StackPanel Grid.Row="0"
                                        Orientation="Horizontal"
                                        Background="LightBlue">
                                <ContentControl ContentTemplate="{TemplateBinding TitleTemplate}"
                                                Content="{TemplateBinding Title}"
                                                HorizontalAlignment="Left"
                                                Margin="24,17,0,-7"
                                                Style="{StaticResource PivotTitleStyle}" />
                                <Primitives:PivotHeadersControl x:Name="HeadersListElement"
                                                                Grid.Row="0" />

                            </StackPanel>
                            <ItemsPresenter x:Name="PivotItemPresenter"
                                            Margin="{TemplateBinding Padding}"
                                            Grid.Row="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="TitleTemplete">
            <TextBlock FontSize="32"
                       Foreground="Black"
                       Text="{Binding}" />
        </DataTemplate>
        <DataTemplate x:Key="HeaderTemplete">
            <Image Source="{Binding}"
                   Height="72" />
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <phone:Pivot Title="我是标题"
                         HeaderTemplate="{StaticResource HeaderTemplete}"
                         Style="{StaticResource PivotStyle}"
                         TitleTemplate="{StaticResource TitleTemplete}"
                         Background="BlueViolet">
                <phone:PivotItem Header="icon.png" />
                <phone:PivotItem Header="icon.png" />
            </phone:Pivot>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>