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 : DependencyObjectPublic Class VisualStateManager
Inherits DependencyObject- Наследование
- Атрибуты
Примеры
В этом примере показано, как использовать присоединенное 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 и передавая поле идентификатора в качестве идентификатора свойства зависимостей.
| Присоединенное свойство | Описание |
|---|---|
| VisualStateGroups | Возвращает коллекцию элементов VisualStateGroup, определенных корневым элементом определения шаблона. Элемент управления обычно определяет его как часть своего шаблона.
При получении этого свойства в коде используйте GetVisualStateGroups. При этом возвращается объект коллекции, в который можно добавлять элементы. Это параллельное поведение обработки XAML для любых дочерних элементов использования элемента свойства VisualStateManager.VisualStateGroups. Так как для этого конкретного присоединенного свойства нет открытого идентификатора свойства зависимостей, вы не можете использовать GetValue для получения значения присоединенного свойства. Всегда необходимо использовать GetVisualStateGroups. |
| CustomVisualStateManager | Возвращает или задает пользовательский объект VisualStateManager, обрабатывающий переходы между состояниями элемента управления.
Это присоединенное свойство требуется только в случаях, когда требуется использовать пользовательский класс реализации для обработки изменений визуального состояния приложения, а не класс VisualStateManager по умолчанию, реализованный среда выполнения Windows. Если вы не планируете использовать пользовательскую реализацию, задавать это свойство не нужно. |
Конструкторы
| VisualStateManager() |
Инициализирует новый экземпляр класса VisualStateManager . |
Свойства
| CustomVisualStateManagerProperty |
Определяет свойство зависимости VisualStateManager.CustomVisualStateManager . |
| Dispatcher |
Всегда возвращает в |
| DispatcherQueue |
Возвращает объект , |
Присоединенные свойства
| CustomVisualStateManager |
Возвращает или задает пользовательский объект VisualStateManager, обрабатывающий переходы между состояниями элемента управления. |