Binding border with pivot header in wp8.1

Question

i am trying to implement the image as shown below in wp8.1 . I have placed a border and on pivotitem_loading method i change the visibility so that only corresponding line shows below the heading. But as i have tried various techniques the line is skipping the one item and goes to next. The code snippet and image is given below. I am also looking for any technique through which i can bind the border with the selected pivot item. Any idea of how to do it?

code snippet: 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# code is given as below:

   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

I think the best solution would be to edit the HeaderTemplate of the Pivot control and add 3 RadioButtons to it. Style these 3 RadioButtons' ControlTemplate to be the way you want them (text with a bottom border). Set the Selected VisualState to show the bottom border. Bind the IsSelected property to the SelectedIndex of the Pivot.

First make your own ControlTemplate:

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

Then apply that to the 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>

That gives you this:

There is of course some tweaking to be done, but that's the general idea. I've put it on GitHub for you here.