Поделиться через


VisualStateManager Класс

Определение

Управляет визуальными состояниями и логикой переходов между визуальными состояниями для элементов управления. Также предоставляет поддержку присоединенного свойства для VisualStateManager.VisualStateGroups, который определяет визуальные состояния в XAML для шаблона элемента управления.

/// [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
Атрибуты

Примеры

В этом примере показано, как использовать присоединенное 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. Вы также можете переопределить еще несколько вариантов поведения:

Все остальные 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 и передавая поле идентификатора в качестве идентификатора свойства зависимостей.

Присоединенное свойствоОписание
VisualStateGroups Возвращает коллекцию элементов VisualStateGroup, определенных корневым элементом определения шаблона. Элемент управления обычно определяет его как часть своего шаблона.

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

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

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

Это присоединенное свойство требуется только в случаях, когда требуется использовать пользовательский класс реализации для обработки изменений визуального состояния приложения, а не класс VisualStateManager по умолчанию, реализованный среда выполнения Windows. Если вы не планируете использовать пользовательскую реализацию, задавать это свойство не нужно.

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

VisualStateManager()

Инициализирует новый экземпляр класса VisualStateManager .

Свойства

CustomVisualStateManagerProperty

Определяет свойство зависимости VisualStateManager.CustomVisualStateManager .

Dispatcher

Всегда возвращает в null приложении Windows App SDK. Вместо этого используйте DispatcherQueue .

(Унаследовано от DependencyObject)
DispatcherQueue

Возвращает объект , DispatcherQueue с которым связан этот объект. представляет DispatcherQueue средство, которое может получить доступ к в потоке DependencyObject пользовательского интерфейса, даже если код инициируется потоком, не относящегося к пользовательскому интерфейсу.

(Унаследовано от DependencyObject)

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

CustomVisualStateManager

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

Методы

ClearValue(DependencyProperty)

Очищает локальное значение свойства зависимостей.

(Унаследовано от DependencyObject)
GetAnimationBaseValue(DependencyProperty)

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

(Унаследовано от DependencyObject)
GetCustomVisualStateManager(FrameworkElement)

Возвращает значение присоединенного свойства VisualStateManager.CustomVisualStateManager .

GetValue(DependencyProperty)

Возвращает текущее действующее значение свойства зависимостей из DependencyObject.

(Унаследовано от DependencyObject)
GetVisualStateGroups(FrameworkElement)

Извлекает коллекцию объектов VisualStateGroup, связанных с указанным FrameworkElement.

GoToState(Control, String, Boolean)

Перемещает элемент управления между двумя состояниями, запрашивая новый VisualState по имени.

GoToStateCore(Control, FrameworkElement, String, VisualStateGroup, VisualState, Boolean)

При переопределении в производном классе перемещает элемент управления между состояниями.

RaiseCurrentStateChanged(VisualStateGroup, VisualState, VisualState, Control)

При переопределении в производном классе вызывает событие CurrentStateChanged для указанного объекта VisualStateGroup.

RaiseCurrentStateChanging(VisualStateGroup, VisualState, VisualState, Control)

При переопределении в производном классе вызывает событие CurrentStateChanging для указанного объекта VisualStateGroup.

ReadLocalValue(DependencyProperty)

Возвращает локальное значение свойства зависимостей, если задано локальное значение.

(Унаследовано от DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

Регистрирует функцию уведомления для прослушивания изменений определенного DependencyProperty в этом экземпляре DependencyObject .

(Унаследовано от DependencyObject)
SetCustomVisualStateManager(FrameworkElement, VisualStateManager)

Задает значение присоединенного свойства VisualStateManager.CustomVisualStateManager .

SetValue(DependencyProperty, Object)

Задает локальное значение свойства зависимостей для Объекта DependencyObject.

(Унаследовано от DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

Отменяет уведомление об изменениях, которое было ранее зарегистрировано путем вызова Метода RegisterPropertyChangedCallback.

(Унаследовано от DependencyObject)

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

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