UI мерцает при использовании AdaptiveTrigger с Windows 10 UWP

Я использую адаптивные триггеры для двух различных UI в зависимости от того, когда мое приложение отображается в портретном или ландшафтном режиме:UI мерцает при использовании AdaptiveTrigger с Windows 10 UWP

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup> 
     <VisualState x:Name="narrowView"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="LogoPanel.VerticalAlignment" 
       Value="Stretch"/> 
       <Setter Target="LogoPanel.(Grid.RowSpan)" Value="2"/> 
       <Setter Target="LogoPanel.MinWidth" Value="0"/> 
       <Setter Target="Logo.Margin" Value="5,11,5,0"/> 
       <Setter Target="Logo.VerticalAlignment" Value="Center"/> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="wideView"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="550" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups>

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

Есть ли способ убедиться, что установлен правильный адаптивный триггер? Есть ли способ проверить, что триггер по умолчанию при загрузке страницы?

Благодаря

ОБНОВЛЕНИЕ - 1:

К сожалению, я должен отметить, что эти адаптивные триггеры содержатся в UserControl, который используется в качестве DataTemplate в Listview.

UPDATE - 2:

Я попробовал то, что предложил @Quincy и это, безусловно, является улучшение при запуске, но это определенно не ведет себя так же при изменении размера App Store для Windows, так что мой код выглядит как это:

<Grid x:Name="NowNextGrid" Background="White" Visibility="Collapsed"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="narrowView"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="LogoPanel.VerticalAlignment" 
        Value="Stretch"/> 
        <Setter Target="LogoPanel.(Grid.RowSpan)" Value="2"/> 
        <Setter Target="LogoPanel.MinWidth" Value="0"/> 
        <Setter Target="Logo.Margin" Value="5,11,5,0"/> 
        <Setter Target="Logo.VerticalAlignment" Value="Center"/> 
        <Setter Target="NowNextGrid.Visibility" Value="Visible"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="wideView"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="550" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="NowNextGrid.Visibility" Value="Visible"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid>

Как вы можете видеть, я добавил имя моей сетки т.е. NowNextGrid и я устанавливаю по умолчанию Visibility для Collapsed по умолчанию и устанавливает его Visible в VisualState.Setters как для узкогоView, так и для WideView.

Надеюсь, я правильно понял, что предложил @Quincy. Я буду продолжать искать, если есть лучший способ, но пока, я оставлю его, как будто кажется, что есть небольшая задержка, восстанавливающая мой Listview, это лучше, чем мерцание.

источник

2016-01-29 Thierry

Может быть, у вас есть наборы 'х: Phase' в вашем DataTemplate? –

Невозможно воспроизвести вашу проблему на моей стороне, возможно, вы можете опубликовать xaml-код своего пользовательского контроля. –

@AskTooMuch, нет x: Фаза. – Thierry

Вы можете подключиться к CurrentStateChanged событиям в VisualStateGroup, чтобы проверить активное состояние.

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup CurrentStateChanged="CurrentStateChanged"> 
     <VisualState x:Name="narrowView"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="LogoPanel.VerticalAlignment" 
       Value="Stretch"/> 
       <Setter Target="LogoPanel.(Grid.RowSpan)" Value="2"/> 
       <Setter Target="LogoPanel.MinWidth" Value="0"/> 
       <Setter Target="Logo.Margin" Value="5,11,5,0"/> 
       <Setter Target="Logo.VerticalAlignment" Value="Center"/> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="wideView"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="550" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups>

Код:

  private void CurrentStateChanged(object sender, VisualStateChangedEventArgs e) 
      { 
       var activeState = e.NewState.Name; 
      }

источник

2016-01-29 08:45:10

Спасибо за это. Как ни странно, это не запускается, когда страница инициализируется в первый раз, и данные загружаются, и я вижу это мерцание. Во-вторых, я изменяю размер моего приложения на машине с Windows 10, и он преодолевает установленный предел для ширины, это срабатывает. Во всяком случае, сегодня я узнал что-то новое. Я не знал об этом событии. – Thierry

Да, инициализация не «изменяет» состояние. Это событие срабатывает, когда состояния flip – Quincy

Первое, что расположение двигателя будет отображать ваши элементы управления XAML без визуального состояния. Затем применяется другой цикл компоновки, чтобы применить визуальное состояние. Это то, что я догадываюсь.

Я думаю, что решение может быть поставить непрозрачность 0 на свой контроль и сделать еще один сеттер для обеих визуальных состояний, чтобы сделать его непрозрачности 1.

источник

2016-02-03 13:38:18 Quincy

Я дам, что попытка и обновление позже – Thierry

Я только что обновил свой вопрос на основе того, что вы предложили. Не возражаете ли вы быстро взглянуть на то, что вы имели в виду, а также увидеть мои результаты. Лучше, но все же не на 100% прав. – Thierry

Закрыть! Попробуйте установить прозрачность вместо видимости. – Quincy

Причиной этого мерцания, кажется, не быть AdaptiveTriggers сами. Правильный триггер обычно загружался в мои тесты. Мерцание происходит, когда вы используете новые VisualState.Setters.

Если вы переключитесь с них на «старый» способ (Storyboard with ObjectAnimationUsingKeyFrames и KeyTime = «0»), то больше не мерцает.

Таким образом, вместо:

  <VisualState x:Name="Wide"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="200"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="LogoPanel.(FrameworkElement.Width)" Value="100"/> 
       </VisualState.Setters> 
      </VisualState>

попробовать

  <VisualState x:Name="Wide"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="200"/> 
       </VisualState.StateTriggers> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="LogoPanel"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>100</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
      </VisualState>

источник

2016-02-20 13:49:37 Amenti

UI мерцает при использовании AdaptiveTrigger с Windows 10 UWP

ответ

Смежные вопросы