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＆＃39; ControlTemplate是您想要的方式（带有底部边框的文本）。设置Selected VisualState以显示底部边框。将IsSelected属性绑定到数据透视表的SelectedIndex。

首先制作自己的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>

然后将其应用于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头绑定边框

1 个答案: