2016-04-12 5 views
0

Как сделать вид, как на скриншоте? Если вы перетащите его в следующий элемент, заголовок также перемещается, но медленнее, чем содержимое, и меняет цвет.Как сделать FlipView с медленными движущимися заголовками? UWP

View with headers; example

+1

Использование управления стержнем – Archana

ответ

0

The FlipView не предоставляет свойство набора заголовков. Как сказал @Archana, вы можете использовать Pivot. Существует официальный образец от GitHub, который использует Pivot. В этом примере показано, как использовать элемент управления Pivot в вашем приложении UWP.

Вы можете установить Header в PivotItem. Заголовок и элемент связаны, поэтому элемент сразу изменится при изменении заголовка. Наоборот, заголовок сразу изменится, когда элемент изменится. Как я уже знал, нет способа отложить появление заголовка.

Вы можете изменить цвет текста в выбранном заголовке. Вы можете добавить TextBlock в содержание PivotItem.Header. И вы можете добавить событие SelectionChanged в Pivot.

Например:

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

В коде позади:

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)); 
     } 
    } 
}