Question

我正在尝试实施解决方案，如下图所示。我无法进入枢轴标题的视觉状态。通过这样做，我想附加如图所示的线与相应的枢轴标题。当人员滑动到下一个枢轴标题时，该行应该移动或显示。任何想法。？
代码段：

     <Grid>
      <Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True">
        <!--Pivot item one-->
        <PivotItem
            x:Uid="PivotItem1"
            Margin="19,14.5,0,0"
            Header="first"
            DataContext="{Binding FirstGroup}"
            d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"
            CommonNavigationTransitionInfo.IsStaggerElement="True">
            <TextBlock Text="Hello 1 " FontSize="32" Foreground="White" />

        </PivotItem>

        <!--Pivot item two-->
        <PivotItem
            x:Uid="PivotItem2"
            Margin="19,14.5,0,0"
            Header="second"
            DataContext="{Binding SecondGroup}"
            d:DataContext="{Binding Groups[1], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
            <!--Double line list no text wrapping-->
            <TextBlock Text="Hello 2 " FontSize="32" Foreground="White" />
        </PivotItem>

        <!--Pivot item three-->
        <PivotItem
            x:Uid="PivotItem3"
            Margin="19,14.5,0,0"
            Header="third"
            DataContext="{Binding SecondGroup}"
            d:DataContext="{Binding Groups[1], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
            <TextBlock Text="Hello 3 " FontSize="32" Foreground="White" />
        </PivotItem>


    </Pivot>
    <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="5" Margin="20,104,0,0" Stroke="Orange" VerticalAlignment="Top" Width="94" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <CompositeTransform/>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

Answer 1

您好试试这段代码希望对您有所帮助

我已经将这个支点用于演示

<phone:Pivot Style="{StaticResource PivotStyle1}" >
            <phone:Pivot.TitleTemplate>
                <DataTemplate>
                    <Grid />
                </DataTemplate>
            </phone:Pivot.TitleTemplate>
            <!--Pivot item one-->
            <phone:PivotItem Header="item1">
                <Grid Background="#FFE60202" />
            </phone:PivotItem>

            <!--Pivot item two-->
            <phone:PivotItem Header="item2">
                <Grid Background="#FF0CC2CB" />
            </phone:PivotItem>
        </phone:Pivot>

现在应用此样式来创建设计，就像您在Image中一样。

<phone:PhoneApplicationPage.Resources>
        <Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="21,0,1,0"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Primitives:PivotHeaderItem">
                        <Grid Margin="0">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="border">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="border" BorderBrush="#FFE28930" BorderThickness="1" VerticalAlignment="Bottom" Visibility="Collapsed"/>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}" Margin="15,0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="PivotStyle1" 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="{TemplateBinding Background}" Grid.RowSpan="3"/>
                            <ContentControl x:Name="TitleElement" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>
                            <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" Foreground="#FF107AD3" FontSize="33.333"/>
                            <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>

在wp8.1中自定义pivot头

1 个答案: