在 wp8.1 中用 pivot header 绑定边框

Question

我正在尝试在 wp8.1 中实现如下所示的图像。我放置了一个边框，并在 pivotitem_loading 方法上更改了可见性，以便只有相应的行显示在标题下方。但是由于我尝试了各种技术，该行正在跳过一个项目并转到下一个。下面给出了代码片段和图像。我也在寻找可以将边框与选定的枢轴项目绑定的任何技术。知道怎么做吗？

代码片段： xaml:

         <Page.Resources>
         <Style x:Key="ItemHeaderCustomStyle" TargetType="TextBlock">
         <Setter Property="FontSize" Value="24"/>
         <Setter Property="Margin" Value="10,24,50,0"/>
         <Setter Property="CharacterSpacing" Value="-35"/>
         <Setter Property="Foreground" Value="#EEEEEE"/>
         <Setter Property="HorizontalAlignment" Value="Center"/>
         <Setter Property="VerticalAlignment" Value="Center"/>
    </Style>
</Page.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Pivot Margin="10,0,-10,0" Name="thispivot"   PivotItemLoading="thispivot_PivotItemLoading" >
        <PivotItem>
            <PivotItem.Header>
                <TextBlock Text="Main" Style="{StaticResource ItemHeaderCustomStyle}"/>
            </PivotItem.Header>
            <StackPanel/>
        </PivotItem>

        <PivotItem>
            <PivotItem.Header>
                <TextBlock Text="view" Style="{StaticResource ItemHeaderCustomStyle}"/>
            </PivotItem.Header>
            <StackPanel/>
        </PivotItem>

        <PivotItem >
            <PivotItem.Header>
                <TextBlock Text="features" Style="{StaticResource ItemHeaderCustomStyle}"/>
            </PivotItem.Header>
            <StackPanel/>
        </PivotItem>
    </Pivot>

    <Border x:Name="a1"  HorizontalAlignment="Left" Height="3" Margin="13,75,0,0"  VerticalAlignment="Top" Width="140"  Background="Orange" >

    </Border>

    <Border x:Name="b1"  HorizontalAlignment="Left" Height="3" Margin="135,75,0,0"  VerticalAlignment="Top" Width="140"  Background="Orange">


    </Border>

    <Border x:Name="c1"  HorizontalAlignment="Left" Height="3" Margin="255,75,0,0"  VerticalAlignment="Top" Width="140"  Background="Orange"> 


    </Border>


</Grid>

c#代码如下：

   private void thispivot_PivotItemLoading(Pivot sender, PivotItemEventArgs args)
    {
        //a1.Visibility = Visibility.Collapsed;
        //b1.Visibility = Visibility.Collapsed;
        //c1.Visibility = Visibility.Collapsed;
        var a = thispivot.SelectedIndex;
        if (a == 0)
        {
            a1.Visibility = Visibility.Visible;
            b1.Visibility = Visibility.Collapsed;
            c1.Visibility = Visibility.Collapsed;
        }
        else  if (a == 1)
        {
            b1.Visibility = Visibility.Visible;
            a1.Visibility = Visibility.Collapsed;
            c1.Visibility = Visibility.Collapsed;

        }
        else if (a == 2)
        {
            a1.Visibility = Visibility.Collapsed;
            b1.Visibility = Visibility.Collapsed;
            c1.Visibility = Visibility.Visible;
        }



    }

Answer 1

我认为最好的解决方案是编辑 Pivot 控件的 HeaderTemplate 并向其添加 3 个 RadioButtons。将这 3 个 RadioButtons 的 ControlTemplate 设置为您想要的样式（带有底部边框的文本）。设置 Selected VisualState 以显示底部边框。将 IsSelected 属性绑定到 Pivot 的 SelectedIndex。

首先制作自己的控件模板：

<Page.Resources>
    <ControlTemplate TargetType="RadioButton" x:Name="StaticHeaderRadioButton">
        <Grid Background="Transparent">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver"/>
                    <VisualState x:Name="PointerOver"/>
                    <VisualState x:Name="Pressed"/>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Container">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,3"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="Indeterminate"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="Container" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}" BorderBrush="Orange">
                <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
        </Grid>
    </ControlTemplate>
</Page.Resources>

然后将其应用于 RadioButtons

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <RadioButton IsChecked="True" GroupName="HeaderButtons" Template="{StaticResource StaticHeaderRadioButton}">
        Main
    </RadioButton>
    <RadioButton Grid.Column="1" GroupName="HeaderButtons" Template="{StaticResource StaticHeaderRadioButton}">
        view
    </RadioButton>
    <RadioButton Grid.Column="2" GroupName="HeaderButtons" Template="{StaticResource StaticHeaderRadioButton}">
        features
    </RadioButton>
</Grid>

这给了你这个：

当然需要进行一些调整，但这是总体思路。我已经把它放在 GitHub 上给你了 here。

在 wp8.1 中用 pivot header 绑定边框

Binding border with pivot header in wp8.1

c#

xaml

pivot

windows-phone-8.1