UWP上的樞軸控件定製

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

......