XAML: trigger

Fondamentalmente, un trigger consente di modificare i valori delle proprietà o eseguire azioni in base al valore di una proprietà. Quindi, fondamentalmente ti consente di modificare dinamicamente l'aspetto e / o il comportamento del tuo controllo senza doverne creare uno nuovo.

I trigger vengono utilizzati per modificare il valore di una determinata proprietà, quando determinate condizioni sono soddisfatte. I trigger sono generalmente definiti in uno stile o nella radice di un documento che vengono applicati a quel controllo specifico. Esistono tre tipi di trigger:

  • Trigger di proprietà
  • Trigger di dati
  • Trigger di eventi

Trigger di proprietà

Nei trigger di proprietà, quando si verifica una modifica in una proprietà, verrà apportata una modifica immediata o animata in un'altra proprietà. Ad esempio, è possibile utilizzare un trigger di proprietà se si desidera modificare l'aspetto del pulsante quando il mouse si trova sopra il pulsante.

Esempio

L'esempio seguente mostra come modificare il colore di primo piano di un pulsante quando il mouse entra nella sua regione.

<Window x:Class = "XAMLPropertyTriggers.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources>
      <Style x:Key = "TriggerStyle" TargetType = "Button">
         <Setter Property = "Foreground" Value = "Blue" />
         <Style.Triggers>
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter Property = "Foreground" Value = "Green" />
            </Trigger> 
         </Style.Triggers>
      </Style>
   </Window.Resources>
	
   <Grid>
      <Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}" 
         Content = "Trigger"/>
   </Grid>
	
</Window>

Quando compili ed esegui il codice sopra, produrrà il seguente output:

Quando il mouse entra nella regione del pulsante, il colore di primo piano diventerà verde.

Trigger di dati

Un trigger di dati esegue un'azione quando i dati associati soddisfano una determinata condizione. Diamo un'occhiata al seguente codice XAML in cui vengono creati una casella di controllo e un blocco di testo con alcune proprietà. Quando la casella di controllo è selezionata, cambierà il colore di primo piano in rosso.

<Window x:Class = "XAMLDataTrigger.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Data Trigger" Height = "350" Width = "604">
	
   <StackPanel HorizontalAlignment = "Center">
      <CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>
		
      <TextBlock Name = "txtblock" VerticalAlignment = "Center" 
         Text = "Event Trigger" FontSize = "24" Margin = "20">
         <TextBlock.Style>
            <Style>
               <Style.Triggers>
                  <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}" 
                     Value = "true">
                     <Setter Property = "TextBlock.Foreground" Value = "Red"/>
                     <Setter Property = "TextBlock.Cursor" Value = "Hand" />
                  </DataTrigger>
               </Style.Triggers>
            </Style>
         </TextBlock.Style>
      </TextBlock>
   </StackPanel>
	
</Window>

Quando compili ed esegui il codice sopra, produrrà il seguente output:

Quando la casella di controllo è selezionata, il colore di primo piano del blocco di testo diventerà rosso.

Trigger di eventi

Un trigger di evento esegue un'azione quando viene generato un evento specifico. Di solito viene utilizzato per realizzare alcune animazioni come DoubleAnimation, ColorAnimation, ecc. Il seguente blocco di codice crea un semplice pulsante. Quando viene generato l'evento clic, espanderà la larghezza e l'altezza del pulsante.

<Window x:Class = "XAMLEventTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <Button Content = "Click Me" Width = "60" Height = "30">
         <Button.Triggers>
            <EventTrigger RoutedEvent = "Button.Click">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>
                     
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Button.Triggers>
      </Button>
   </Grid>
</Window>

Quando compili ed esegui il codice sopra, produrrà il seguente output:

Ora, fai clic sul pulsante e noterai che inizierà ad espandersi in entrambe le dimensioni.