Question

基本上我需要在我的uwp应用程序上自定义数据透视控件，我使用windows phone 8.1的数据透视风格。它最终看起来像这样（黄色部分是枢轴项的内容，我只是使用颜色来区分标题和内容）

但是现在它不符合原始设计的要求。所以我在这里有两个问题：

1.如何限制用户向一个方向轻弹枢轴？例如，用户只能从左向右轻拂控件，因为如果从右向左轻拂枢轴，黄色内容部分将向左移动并覆盖标题。内容（黄色部分）将完全与您的手指一起移动，并且将显示另一个被遮盖的枢轴标题，因为黄色部分移开，如您在图像上看到的那样。这就是我关心滑动方向的原因，因为如果向左滑动，黄色部分将在手势完成之前覆盖标题的一部分（图像中没有显示）。

2.如何更改未选中的pivotitem标题的前景色？现在，您可以看到，在轻弹过程中，黄色内容部分将移开，并且将显示未选择的标题。这看起来很奇怪，根本不是一个好的设计。未选中的标题应该是透明的或与页面的背景颜色相同。

以下是样式的代码：

<Style x:Key="PivotStyle1" TargetType="Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Foreground" Value="{ThemeResource PivotForegroundThemeBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Pivot">
                    <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="Orientation">
                                <VisualState x:Name="Portrait">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Landscape">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                        <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                            <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                <PivotHeaderPanel x:Name="Header">
                                    <PivotHeaderPanel.RenderTransform>
                                        <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                    </PivotHeaderPanel.RenderTransform>
                                </PivotHeaderPanel>
                                <ItemsPresenter x:Name="PivotItemPresenter">
                                    <ItemsPresenter.RenderTransform>
                                        <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                    </ItemsPresenter.RenderTransform>
                                </ItemsPresenter>
                            </PivotPanel>
                        </ScrollViewer>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

枢轴控制的XAML代码：

<Pivot Style="{StaticResource PivotStyle1}">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Height="auto">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="21*"/>
                        <RowDefinition Height="299*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="19*"/>
                    </Grid.ColumnDefinitions>


                    <TextBlock  Text="{Binding}"
                                Margin="14,50,9,-120"
                                Grid.Row="1"
                                HorizontalAlignment="Center"
                                FontSize="48"
                                FontFamily="ms-appx:NotoSansCJKsc-Black.otf#Noto Sans CJK SC"
                                TextWrapping="Wrap"
                                LineStackingStrategy="BlockLineHeight"
                                LineHeight="49" Width="48"
                                Height="auto"/>
                </Grid>
            </DataTemplate>
        </Pivot.HeaderTemplate>

        <PivotItem Header="评论" Margin="83,-47,0,0" Background="Yellow">
            <Grid>
                <ListView x:Name="listview" d:LayoutOverrides="TopPosition, BottomPosition" ItemTemplate="{StaticResource GroupTemplate}" ItemsSource="{Binding Groups}" Margin="10,0,0,0"/>
            </Grid>
        </PivotItem>
        <PivotItem Header="转发" Margin="93,-47,0,0" Background="Yellow">
            <Grid>
                <ListView x:Name="listview2" d:LayoutOverrides="TopPosition, BottomPosition" ItemTemplate="{StaticResource GroupTemplate}" ItemsSource="{Binding Groups}"/>
            </Grid>
        </PivotItem>
    </Pivot>

Answer 1

对于您的第一个问题，您已自定义Pivot控件的样式，上面显示的手势在移动模拟器上工作正常，但在本地计算机上却无法正常工作。这是Pivot控件设计中ManipulationMode的问题。 Pivot控制的手势是在它的风格内实现的，因此可以在一个方向上操纵它，但我们需要找到风格中的关键点。

您可以使用Manipulation执行此操作。您可以像这样修改Pivot控件的样式：

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
    <PivotHeaderPanel x:Name="Header" ManipulationMode="None">
        <PivotHeaderPanel.RenderTransform>
            <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0" />
        </PivotHeaderPanel.RenderTransform>
    </PivotHeaderPanel>
    <ItemsPresenter x:Name="PivotItemPresenter" ManipulationMode="None">
        <ItemsPresenter.RenderTransform>
            <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0" />
        </ItemsPresenter.RenderTransform>
    </ItemsPresenter>
</PivotPanel>

并使用此Pivot控件，如下所示：

<Pivot Style="{StaticResource PivotStyle1}" x:Name="myPivot" ManipulationMode="TranslateX" ManipulationStarting="OnStarting" ManipulationCompleted="OnCompleted">
   ...
</Pivot>

背后的代码：

public double pointx1;

private void OnCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    var pointx2 = Window.Current.CoreWindow.PointerPosition.X;
    if (pointx2 > pointx1)
    {
        if (myPivot.SelectedIndex == 0)
            myPivot.SelectedIndex = 1;
        else
            myPivot.SelectedIndex = 0;
    }
    else
        return;
}

private void OnStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
    pointx1 = Window.Current.CoreWindow.PointerPosition.X;
}

这也是解决此问题的解决方法，考虑到Pivot的样式没有操作，您可以使用PointerPoint来实现此操作，您可以修改Pivot的样式像这样控制：

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch" ManipulationMode="None">
    <PivotHeaderPanel x:Name="Header">
        <PivotHeaderPanel.RenderTransform>
            <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0" />
        </PivotHeaderPanel.RenderTransform>
    </PivotHeaderPanel>
    <ItemsPresenter x:Name="PivotItemPresenter">
        <ItemsPresenter.RenderTransform>
            <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0" />
        </ItemsPresenter.RenderTransform>
    </ItemsPresenter>
</PivotPanel>

并使用此Pivot控件，如下所示：

<Pivot Style="{StaticResource PivotStyle1}" PointerReleased="OnPointerExited" PointerPressed="OnPointerPressed" x:Name="myPivot">
  ...
</Pivot>

背后的代码：

public PointerPoint pointer1;

private void OnPointerExited(object sender, PointerRoutedEventArgs e)
{
    var pointer2 = e.GetCurrentPoint(myPivot);
    var position1x = pointer1.Position.X;
    var position2x = pointer2.Position.X;
    if (position2x > position1x)
    {
        if (myPivot.SelectedIndex == 0)
            myPivot.SelectedIndex = 1;
        else
            myPivot.SelectedIndex = 0;
    }
    else
        return;
}

private void OnPointerPressed(object sender, PointerRoutedEventArgs e)
{
    pointer1 = e.GetCurrentPoint(myPivot);
}

对于你的第二个问题，正如@ ganchito55所说，你可以modify the style of PivotHeaderItem。

<强>更新

如果您只是在操作它时不想看到其他项目的标题，则可以像这样修改PivotHeaderItem：

......
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Height" Value="48" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />

......

在UWP上进行枢轴控制自定义

1 个答案: