Настройка управления поворотным устройством на UWP

Question

В основном мне нужно настроить элемент управления поворота на моем приложении uwp, и я использую стиль поворота из окна телефона 8.1. И, похоже, это в конце концов (желтая часть является содержание пункта поворота, я просто использовать цвет, чтобы дифференцировать заголовок и содержание)

но сейчас она не отвечает требовать от оригинальный дизайн. Поэтому у меня есть два вопроса:

1. Как я могу ограничить пользователя щелчком поворота в одном направлении? Например, пользователи могли только щелкнуть элемент управления слева направо, потому что часть желтого содержимого будет перемещаться влево и закрывать заголовок, если ось вращения будет перемещаться справа налево. Содержимое, которое является желтой частью, будет полностью перемещаться вместе с вашим пальцем, а другой заголовок с поворотным элементом будет показан, потому что желтая часть уходит, как вы можете видеть на изображении. Именно по этой причине я забочусь о направлении прокрутки, потому что если вы проведите влево, желтая часть будет закрывать часть заголовка до того, как будет сделан жест (который не отображается на изображении).

2. Как изменить цвет переднего плана невыбранного заголовка пивотиема? Прямо сейчас, как вы можете видеть, во время процесса щелчка желтая часть содержимого будет удаляться, и будет отображен невыбранный заголовок. Это выглядит странно, и это совсем не хороший дизайн. Невыбранный заголовок должен быть прозрачным или быть таким же, как цвет фона на странице.

Вот код стиля:

<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, ваш жест, показанный выше, отлично работает на мобильном эмуляторе, но не на локальной машине. Это проблема о ManipulationMode в конструкции управления Pivot. 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.

Update:

Если вы просто не хотите, чтобы увидеть заголовок другого элемента, когда вы манипулируете, вы можете изменить 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" /> 

......