VisualStateManager Класс

Определение

/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualStateManager : DependencyObject

[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class VisualStateManager : DependencyObject

Public Class VisualStateManager
Inherits DependencyObject

Наследование

Object IInspectable DependencyObject VisualStateManager

Атрибуты

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Примеры

В этом примере показано, как использовать присоединенное VisualStateManager.VisualStateGroups свойство XAML. Обратите внимание, что в противном случае тег "VisualStateManager" не определен. По сути, VisualStateManager.VisualStateGroups содержит визуальные состояния элемента управления в качестве непосредственного дочернего тега корня шаблона в шаблоне элемента управления.

Конкретный набор визуальных состояний содержит одну группу VisualStateGroup с именем CommonStates, которая определяет объекты VisualState PointerOver и Normal. Когда пользователь навел указатель на кнопку, сетка меняется с зеленого на красный через 0,5 секунды. Когда пользователь перемещает указатель от кнопки, элемент Grid немедленно меняется обратно на зеленый.

<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

<common:LayoutAwarePage>
  <Grid>
...
    <VisualStateManager.VisualStateGroups>
    <!-- Visual states reflect the application's window size -->
      <VisualStateGroup>
        <VisualState x:Name="DefaultLayout">
           <Storyboard>
           </Storyboard>
        </VisualState>
        <VisualState x:Name="Below768Layout">
           <Storyboard>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
               Storyboard.TargetName="ContentRoot">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                   <Thickness>20,20,20,20</Thickness>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
               Storyboard.TargetName="FooterPanel">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
           </Storyboard>
         </VisualState>
       </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
   </Grid>
</common:LayoutAwarePage>

Следующий фрагмент кода — это код для работы с XAML, показывающий, как приложение может определить ширину окна приложения и использовать эти сведения для вызова соответствующего визуального состояния.

String state = (Window.Current.Bounds.Width > 768) ? "DefaultLayout" : "Below768Layout";
VisualStateManager.GoToState(this, state, false); // 'this' is the LayoutAwarePage, scope is page code-behind

Комментарии

VisualStateManager поддерживает две важные функции для авторов элементов управления и для разработчиков приложений, которые применяют пользовательский шаблон к элементу управления:

• Авторы элементов управления или разработчики приложений добавляют элементы объекта VisualStateGroup в корневой элемент определения шаблона элемента управления в XAML с помощью присоединенного VisualStateManager.VisualStateGroups свойства . В элементе VisualStateGroup каждый элемент VisualState представляет дискретное визуальное состояние элемента управления. У каждого из них VisualState есть имя, представляющее состояние пользовательского интерфейса, которое может быть изменено пользователем или с помощью логики элемента управления. Состоит VisualState в основном из раскадровки. Это Storyboard предназначено для отдельных изменений значений свойств зависимостей, которые должны применяться всякий раз, когда элемент управления находится в этом визуальном состоянии.
• Управляйте переходом авторов или разработчиков приложений между этими состояниями, вызывая статический метод GoToState объекта VisualStateManager. Авторы элементов управления делают это всякий раз, когда логика элемента управления обрабатывает события, указывающие на изменение состояния, или логика элемента управления инициирует изменение состояния самостоятельно. Чаще всего это делает код определения элемента управления, а не код приложения, поэтому все возможные визуальные состояния, их переходы и условия триггера имеются по умолчанию для кода приложения, а логика инкапсулируется элементом управления.

Большинство разработчиков будут использовать только два VisualStateManager API: VisualStateManager.VisualStateGroupsи GoToState, как описано выше. Остальные API предназначены для поддержки расширений и создания пользовательского VisualStateManagerинтерфейса . Дополнительные сведения см. в разделе "Пользовательский VisualStateManager" этой статьи.

При редактировании копий стилей, включенных областью конструктора XAML в Microsoft Visual Studio, визуальные состояния из шаблона по умолчанию определяются в редактируемом XAML. Убедитесь, что вы не удаляете эти состояния и не изменяете их имена, так как логика элемента управления ожидает, что эти визуальные состояния существуют в шаблоне.

Помимо визуальных состояний, модель визуального состояния также включает переходы. Переходы — это действия анимации, управляемые раскадровкой , которые происходят между каждым визуальным состоянием при изменении состояния. Переход можно определить по-разному для каждого сочетания начального и конечного состояний в соответствии с набором визуальных состояний элемента управления. Переходы определяются свойством Transitions объекта в XAML с использованием синтаксиса VisualStateGroupэлемента свойства. Большинство шаблонов элементов управления по умолчанию не определяют переходы. При отсутствии конкретно определенных переходов переходы между состояниями происходят мгновенно (нулевая длительность). Дополнительные сведения см. в разделе VisualTransition.

Пользовательский VisualStateManager

Если вы хотите реализовать собственную логику для переходов между состояниями (расширенный сценарий), можно создать класс, наследующий от VisualStateManager. Соблюдайте следующие правила.

• Производный класс должен переопределить защищенный метод GoToStateCore . Любой экземпляр настраиваемого VisualStateManager объекта использует эту логику Core при вызове метода GoToState .
• Чтобы сослаться на пользовательский VisualStateManager класс, задайте значение присоединенного свойства в корневом элементе ControlTemplate, где требуется использовать поведение пользовательского VisualStateManager класса, а также VisualStateManager.VisualStateGroups использование присоединенного VisualStateManager.CustomVisualStateManager свойства, определяющего визуальные состояния шаблона. Как правило, экземпляр пользовательского VisualStateManager класса создается с помощью конструкции XAML по умолчанию в Application.Resources. Затем присоединенное VisualStateManager.CustomVisualStateManager свойство задается с помощью ссылки расширения разметки {StaticResource} на ключ настраиваемого VisualStateManager ресурса.

Это основные требования для создания и использования пользовательского VisualStateManager. Вы также можете переопределить еще несколько вариантов поведения:

• Переопределите RaiseCurrentStateChanged , чтобы управлять тем, когда событие CurrentStateChanged активируется объектом VisualStateGroup , управляемым VisualStateManager.
• Переопределите RaiseCurrentStateChanging , чтобы управлять тем, когда событие CurrentStateChanging активируется объектом VisualStateGroup , управляемым VisualStateManager.
• Переопределите или перегрузите конструктор, если пользовательский класс нуждается в дополнительных сведениях для инициализации.

Все остальные API (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) являются инфраструктурой для поддержки присоединенных свойств, и вам не нужно вызывать их или делать с ними какие-либо действия.

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

Визуальные состояния иногда полезны для сценариев, в которых требуется изменить состояние какой-то области пользовательского интерфейса, которая не сразу является подклассом Control . Это невозможно сделать напрямую, так как для параметра управления метода GoToState требуется Control подкласс, который ссылается на объект, с которым работает VisualStateManager. Страница — это Control подкласс, и вы довольно редко отображаете пользовательский интерфейс в контексте, где у Pageвас нет , или ваш корневой каталог Window.Content не является подклассом Control . Рекомендуется определить пользовательский элемент UserControl , который будет Window.Content корнем или контейнером для другого содержимого, к которому вы хотите применить состояния (например , Панель). Затем можно вызвать GoToState для и UserControl применить состояния независимо от того, является ли остальное содержимое .Control Например, можно применить визуальные состояния к пользовательскому интерфейсу, который в противном случае состоит только из SwapChainPanel , если вы разместили его в и UserControl объявили именованные состояния, которые применяются к свойствам родительского UserControl элемента или именованной SwapChainPanel части шаблона.

Присоединенные свойства XAML

VisualStateManager — это класс службы узла для нескольких присоединенных свойств XAML.

Для поддержки доступа обработчика XAML к присоединенным свойствам, а также для предоставления эквивалентных операций получения и задания в коде каждое присоединенное свойство XAML имеет пару Get методов доступа и Set . Другой способ получить или задать значение в коде — использовать систему свойств зависимостей, вызывая метод GetValue или SetValue и передавая поле идентификатора в качестве идентификатора свойства зависимостей.

Конструкторы

Свойства

Присоединенные свойства

Методы

Применяется к

См. также раздел

• DependencyObject
• VisualStateGroup
• VisualState
• Storyboard
• Шаблоны элементов управления XAML
• Раскадрованные анимации
• Общие сведения о присоединенных свойствах
• Пример стиля элемента управления XAML и приложения