A Trigger обычно используется в Style или ControlTemplate. Он запускает свойства любого шаблона и устанавливает другие свойства элемента управления (или определенных элементов шаблона). Например, вы бы использовали триггер на IsMouseOver, чтобы реагировать на то, что мышь находится над элементом управления, а setters может обновить кисть для отображения «горячего» эффекта.
Почему используется триггер?
Триггеры используются в стилях для выполнения действий при изменении любого значения свойства или при возникновении события. Триггеры создают визуальные эффекты на элементах управления. Используя триггеры, мы можем изменить внешний вид элементов Framework.
Сколько типов триггеров в WPF?
WPF поддерживает пять типов триггеров; они:
- Триггер свойства
- Триггер данных
- MultiTrigger
- MultiDataTrigger
- Событие триггера
Триггер свойства
Самая простая форма триггера - это триггер свойства, который следит за тем, чтобы свойство зависимости имело определенное значение. Например, если мы хотим подсветить кнопку желтым цветом, когда пользователь наводит на нее курсор мыши, мы можем сделать это, наблюдая, чтобы свойство IsMouseOver имело значение "True".
Property Trigger Выполняет коллекции сеттеров при изменении значения свойства UIElements.
Чтобы создать триггер свойства для любых элементов управления, вы должны установить триггер в стиле элемента управления.
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
В приведенном выше коде Trigger создано на кнопке. При изменении свойства Buttons IsPressed будет установлено значение Opacity, равное 0,5. Вы можете установить триггер для любого свойства зависимости элемента управления.
например,
<Style x:Key="NormalStyle">
<Setter Property="Control.FontSize" Value="20"></Setter>
<Setter Property="Control.HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Control.Margin" Value="10"></Setter>
<Setter Property="Control.Foreground" Value="Black"></Setter>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="true">
<Setter Property="Control.FontStyle" Value="Italic"></Setter>
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.Background" Value="Yellow"></Setter>
</Trigger>
<Trigger Property="Button.IsPressed" Value="true">
<Setter Property="Control.Foreground" Value="Green"></Setter>
<Setter Property="Control.Background" Value="Blue"></Setter>
</Trigger>
</Style.Triggers>
</Style>
MultiTrigger
MultiTrigger используется для установки действия при изменении нескольких свойств. Он будет выполнен, когда все условия удовлетворены в течение MulitTrigger .Condition.
<Style x:Key="MulitTriggerButtonStyle" TargetType="Button">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="Background" Value="BlanchedAlmond" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="BorderBrush" Value="Blue" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
Триггер события
Event Trigger используется для выполнения действия при RoutedEvent повышения FrameworkElement. Event Trigger обычно используется для выполнения некоторой анимации элемента управления (например, colorAnimation, doubleAnumation с использованием ключевого кадра и т. Д.)
Давайте сначала разберемся Storyboard и Animation.
Animations
Анимация может сделать пользовательский интерфейс более привлекательным. Мы также можем создавать визуальные эффекты для элемента управления, анимация может быть любого типа, например:
изменить цвет фона элемента управления
повернуть экран на угол 90 градусов
перемещать объект из одного места в другое
Изменить непрозрачность (FadeIn / FadeOut) круга.
Анимация используется со свойством элемента UIElement. WPF предоставляет различные типы анимации, используемые со свойствами, например:
ColorAnimation:
используется для анимации / изменения свойства цвета (SolidColorBrush, LinearGradientBrush) UIElement в течение определенной длительности. Имеет два свойства:
Из (источника) и До (цели)
<Border Name="border1" Width="100" Height="30"
BorderBrush="Black" BorderThickness="1">
<Border.Background>
<SolidColorBrush x:Name="MyBorder" Color="LightBlue" />
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:1"
Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="Color" To="Gray" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
Пример 2:
<TextBlock Visibility="Collapsed" Style="{StaticResource CDCStandardTextBlockStyle}" Name="TxtBlockTerminatingHeading" Text="{Binding NotifyOnTargetUpdated=True}" Foreground="Red" TextWrapping="Wrap" Margin="10,10,10,0">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00" RepeatBehavior="Forever"
Storyboard.TargetName="TxtBlockTerminatingHeading"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
<ColorAnimation From="Red" To="#f0f0f0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
Пример 3:
<ListBox Name="employeeListBox" ItemsSource="{Binding
empList}" Grid.Row="0" SelectedItem="{Binding SelectedIndex}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding
ElementName=employeeListBox, Path=SelectedValue}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
DataTrigger
DataTriggers - это триггеры, которые следят за привязанным значением вместо Dependency Property. Они позволяют вам наблюдать связанное выражение и будут реагировать, когда эта привязка оценивается равной вашему значению. Как следует из названия, DataTrigger применяет значение свойства для выполнения действия с данными, связывающимися с элементом UIElement.
DataTrigger позволяет установить значение свойства, когда Binding Data соответствует указанному условию. Например:
<DataTemplate>
<Grid Margin="0 5 0 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="viewImage"
Grid.Row="0" Width="100"
Height="60" HorizontalAlignment="Center"
Source="{Binding Picture}" Stretch="Fill" />
<TextBlock x:Name="viewText"
Grid.Row="1" Margin="0 5 0 0"
HorizontalAlignment="Center"
FontWeight="Black" Foreground="Green"
Text="{Binding Title}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Picture}" Value="{x:Null}">
<Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png" />
<Setter TargetName="viewText" Property="Text" Value="No Image Available" />
<Setter TargetName="viewText" Property="Foreground" Value="Red" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=textBox1, Path=Text.Length}"
Value="0">
<Setter Property="IsEnabled" Value="False"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
MultiDataTrigger
MultiTrigger и MultiDataTrigger одинаковы, за исключением того, что они позволяют указывать несколько условий (соответственно свойств или привязок) и вступают в силу только при выполнении всех условий.
<DataTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=Picture}" Value="{x:Null}" />
<Condition Binding="{Binding Path=Title}" Value="Waterfall" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png"/>
<Setter TargetName="viewImage" Property="Opacity" Value="0.5" />
<Setter TargetName="viewText" Property="Background" Value="Brown" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</DataTemplate.Triggers>