Comment créer un FlipView avec des en-têtes lents? UWP

Question

Comment faire une vue comme sur la capture d'écran? Si vous le faites glisser vers l'élément suivant, l'en-tête se déplace également, mais plus lentement que le contenu et change de couleur.

Answer 1

Le FlipView ne fournit pas la propriété de définir les en-têtes. Comme l'a dit @Archana, vous pouvez utiliser Pivot. Il y a un échantillon officiel de GitHub qui utilise le Pivot. Cet exemple montre comment utiliser un contrôle Pivot dans votre application UWP. Vous pouvez définir Header dans PivotItem. L'en-tête et l'élément sont associés, de sorte que l'élément change immédiatement lorsque l'en-tête change. Au contraire, l'en-tête changera immédiatement lorsque l'élément change. Comme je le sais, il n'y a pas de méthode pour retarder l'apparition de l'en-tête.

Vous pouvez modifier la couleur du texte dans l'en-tête sélectionné. Vous pouvez ajouter le TextBlock au contenu de PivotItem.Header. Et vous pouvez ajouter l'événement SelectionChanged dans Pivot.

Par exemple:

<Pivot Name="MyPivot" SelectionChanged="ListView_SelectionChanged"> 
    <PivotItem> 
     <PivotItem.Header> 
      <TextBlock Foreground="White" Text="Hello" /> 
     </PivotItem.Header> 
     <TextBlock>When headers are in 'Dynamic' mode, hovering a mouse over the pivot headers will show mouse flippers for easy tab switching 
     </TextBlock> 
    </PivotItem> 
    <PivotItem> 
     <PivotItem.Header> 
      <TextBlock Foreground="White" Text="Keyboard Support" /> 
     </PivotItem.Header> 
     <TextBlock> 
     <Run>Pivot now supports the following keyboard behaviors</Run><LineBreak /> 
     <Run> * While the HeaderPanel is focused:</Run><LineBreak /> 
     <Run> * * Left, Right, Ctrl+PgUp, Ctrl+PgDown: Changes the currently selected PivotItem</Run><LineBreak /> 
     <Run> * * Down: Sets focus in the content area</Run><LineBreak /> 
     <Run> * While the Content area is focused:</Run><LineBreak /> 
     <Run> * * Ctrl+PgUp, Ctrl+PgDown: Changes the currently selected PivotItem</Run> 
     </TextBlock> 
    </PivotItem> 
</Pivot> 

Dans le code derrière:

private void MyPivot_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    foreach (PivotItem pivotItem in MyPivot.Items) 
    { 
     if (pivotItem == MyPivot.Items[MyPivot.SelectedIndex]) 
     { 
      ((TextBlock)pivotItem.Header).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 255, 255)); 
     } 
     else 
     { 
      ((TextBlock)pivotItem.Header).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(115, 123, 120, 130)); 
     } 
    } 
}