Как применить эффект турникета для каждого элемента пользовательского интерфейса на странице

Question

При запуске приложения у меня появляется заставка, после которой загружается mainpage.xaml.Главная страница имеет много элементов пользовательского интерфейса, таких как кнопки и текстовые блоки.Загрузка занимает около секунды или двух, поэтому я подумал, что некоторая анимация может заполнить пробел.В противном случае это может выглядеть немного неловко.

Собственное приложение Windows Phone, такое как сообщения, использует некоторую анимацию по умолчанию, когда страница открывается вправо, заголовки сводной панели поворачиваются, затем следует другой пользовательский интерфейс, вид открытия дверивещь.После небольшого исследования я обнаружил, что они являются анимацией по умолчанию для турникетов сбоев.

    <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Поэтому я поместил приведенный выше код чуть выше тега </phone:PhoneApplicationPage> главной страницы.Но элементы страницы не имеют анимации турникета, как я могу применить его к другим элементам пользовательского интерфейса на странице?Может ли кто-нибудь наставить меня на это?

Алфа

Answer 1

То, что вы имеете в виду, называется «перьевым турникетом» или «отслаиванием» перехода.

Мне известны три реализации:

• Колин Эберхардтанимация «отслаивания» как часть его серии Metro In Motion (бесплатно, включает источник)
• турникет Clarity Consulting (бесплатно, включает источник)
• RadiControls Telerik для Windows Phone (не бесплатно, без источника)

Ни одна из вышеперечисленных функций интеграции в среду перехода инструментария.Я сам думал об этом, но у меня никогда не было времени.

Answer 2

Набор инструментов Windows Phone также имеет переход TurnstileFeather.По-видимому, это в основном активируется следующим образом:

• Измените App.xaml.cs так, чтобы RootFrame = new TransitionFrame()
• Включил набор инструментов в XAML для анимированной страницы, например xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
• Включите следующий XAML сразу после открывающего тега (аналогично тому, что вы вставили),

<toolkit:TransitionService.NavigationInTransition>
  <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
          <toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
          <toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
      </toolkit:NavigationInTransition.Forward>
  </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
  <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
          <toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
          <toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
      </toolkit:NavigationOutTransition.Forward>
  </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

• Наконец, на каждом элементе контейнера поместитеследующий атрибут toolkit:TurnstileFeatherEffect.FeatheringIndex="0" с номером, относящимся к порядку, в котором вы хотите, чтобы элементы отделялись. Например:

<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="0">Cheetah</TextBlock>
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="1">Hare</TextBlock>
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="2">Tortoise</TextBlock>

Answer 3

Вы можете использовать перо перехода на любом элементе управления, как я использовал текстовый блок в этом примере.

<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

if you are using pivot then use this

<controls:Pivot toolkit:TurnstileFeatherEffect.FeatheringIndex="0" Title="MY APPLICATION">

, а затем использовать эффект в любом элементе управления

<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="1" Text="Hello" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center"/>