UWP: Новые возможности Visual State Manager (часть 1)

Если вы собираетесь разрабатывать UWP приложения для Windows 10, то вы должны думать об адаптивном интерфейсе, который будет хорошо выглядеть на всех устройствах Windows, с различными размерами экрана, ориентацией и разрешениями. Visual State Manager обрел новый и очень хороший подход к реализации адаптивного интерфейса. Он позволяет объявить различные состояния интерфейса с возможностью изменения текущего состояния в режиме исполнения. Вот почему Microsoft продолжает вкладывать средства в этот компонент и сегодня разработчики могут использовать еще две новых особенности.

Setters

Если вы собираетесь использовать анимацию, чтобы изменить состояние — можно продолжать использовать старый подход с раскадровкой, но во многих случаях анимация не нужна. Например, если вы хотите изменить свой макет, потому что пользователь изменил ориентацию экрана, вы должны очень быстро изменять свойства элементов управления. Так, разработчики обычно используют ObjectAnimationUsingKeyFrame применяя все необходимые изменения за 0 секунд:

<Storyboard>
    <ObjectAnimationUsingKeyFrames 
        Storyboard.TargetName="itemListView" 
        Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

Вы можете видеть, что этот подход не является оптимальным, поскольку он требует использования нескольких сложных объектов со многими параметрами, чтобы сделать простую вещь. Вот почему новый элемент XAML — Setter  может быть очень полезным. Например, вы можете переписать то же самое с его помощью:

<VisualState.Setters>
    <Setter Target="comboBox.Visibility" Value="Collapsed"></Setter>
</VisualState.Setters>

Это гораздо понятнее и чище. Разработчики должны объявить имя свойства и новое значение в выбранном состоянии. Если вы хотите, вы можете смешивать Setters и Storyboard в том же состоянии.

Адаптивные триггеры

Конечно, этого не достаточно, чтобы объявить все возможные состояния — разработчики должны реализовать код, который позволяет изменить состояние динамически. Например, если вы собираетесь изменить состояние в зависимости от размера экрана, необходимо реализовать обработчик событий для события SizeChanged и использовать метод GoToState класса VisualStateManager. Но в этом случае можно легко сделать ошибку или запутаться, не говоря уже об возможном дублировании кода в разметке. Вот почему Microsoft реализовала инфраструктуру для триггеров состояния. Он позволяет объявить один триггер или набор триггеров внутри XAML, чтобы понять, какое состояние должно применяться. Таким образом, вы можете объявить все необходимые правила без кода.

В текущей версии Microsoft представила только один триггер — AdaptiveTrigger. Кроме того, вы также можете разработать свои собственные триггеры.

В следующем коде вы можете увидеть использование AdaptiveTrigger:

<VisualState x:Name="Normal">
    <VisualState.Setters>
        <Setter Target="comboBox.Visibility" Value="Visible"></Setter>
    </VisualState.Setters>
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="700"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Mobile">
    <VisualState.Setters>
        <Setter Target="comboBox.Visibility" Value="Collapsed"></Setter>
    </VisualState.Setters>
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
    </VisualState.StateTriggers>
</VisualState>

Как вы видите у AdaptiveTrigger есть только два параметра: MinWindowWidth и MinWindowHeight. Эти параметры позволяют переключать состояние окна в зависимости от размера. В нашем примере, если у нас ширину окна меньше, чем 700 пикселей, мы прячем элемент с именем comboBox.

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

Ссылка на источник: UWP: New features of Visual State Manager (part 1)