Use Triggers to Play Audio When a User Interacts with a Control

image_pdfimage_print


   
  
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="100" Width="300">
    <StackPanel>
        <MediaElement Name="meMediaElem" />
        <UniformGrid Height="70" Columns="2">
            <Button Content="Ding" MaxHeight="25" MaxWidth="70">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <MediaTimeline 
                                      Source="ding.wav" 
                                      Storyboard.TargetName="meMediaElem"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <Slider MaxHeight="25" MaxWidth="100" >
                <Slider.Triggers>
                    <EventTrigger RoutedEvent="Slider.ValueChanged">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <MediaTimeline 
                                      Source="a.wav" 
                                      Storyboard.TargetName="meMediaElem" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Slider.Triggers>
            </Slider>
        </UniformGrid>
    </StackPanel>
</Window>

   
    
     


Style With MultiTrigger

image_pdfimage_print


   
     

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
      <Style x:Key ="TextBoxStyle" TargetType = "{x:Type TextBox}">
        <Setter Property = "Foreground" Value = "Black"/>
        <Setter Property = "Background" Value = "LightGray"/>
        <Setter Property = "Height" Value = "30"/>
        <Setter Property = "Width" Value = "100"/>
          <Style.Triggers>
            <MultiTrigger>  
            <MultiTrigger.Conditions>
              <Condition Property = "IsFocused" Value = "True"/>
              <Condition Property = "IsMouseOver" Value = "True"/>
            </MultiTrigger.Conditions>
            <Setter Property = "Background" Value = "Yellow"/>                   
          </MultiTrigger>
        </Style.Triggers>
      </Style>
    </Window.Resources>


  <StackPanel >
    <TextBox Name = "txtOne" Style = "{StaticResource TextBoxStyle}" />    
    <TextBox Name = "txtTwo" Style = "{StaticResource TextBoxStyle}" />
    <TextBox Name = "txtThree" Style = "{StaticResource TextBoxStyle}" />
   </StackPanel>
</Window>

   
    
    
    
    
     


Starting an animation with a trigger

image_pdfimage_print


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">
        
        <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10">
          <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.MouseEnter">
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)"
                                   To="300" Duration="0:0:5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Ellipse.Triggers>
        </Ellipse>


</Page>

   
    
    
    
    
     


Pausing and resuming a storyboard with triggers

image_pdfimage_print


   
     
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">
        
        <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10">
          <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.MouseEnter">
              <BeginStoryboard Name="changeWidth">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)"
                                   To="300" Duration="0:0:5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>

          </Ellipse.Triggers>
        </Ellipse>
</Page>

   
    
    
    
    
     


EventTrigger Ellipse.MouseLeftButtonDown

image_pdfimage_print


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">
        
        <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10">
          <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.MouseEnter">
              <BeginStoryboard Name="changeWidth">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)"
                                   To="300" Duration="0:0:5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
        
            <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonDown">
              <PauseStoryboard BeginStoryboardName="changeWidth" />
            </EventTrigger>
          </Ellipse.Triggers>
        </Ellipse>
</Page>

   
    
    
    
    
     


EventTrigger Ellipse.MouseLeftButtonUp

image_pdfimage_print


   
     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Center" VerticalAlignment="Center">
        
        <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10">
          <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.MouseEnter">
              <BeginStoryboard Name="changeWidth">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)"
                                   To="300" Duration="0:0:5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
        
            <EventTrigger RoutedEvent="Ellipse.MouseLeftButtonUp">
              <ResumeStoryboard BeginStoryboardName="changeWidth" />
            </EventTrigger>
          </Ellipse.Triggers>
        </Ellipse>
</Page>

   
    
    
    
    
     


Playing a sound with a trigger

image_pdfimage_print


   
     

        

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <Rectangle Fill="Green">
          <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
              <SoundPlayerAction Source="c:windowsmediading.wav" />
            </EventTrigger>
          </Rectangle.Triggers>
        </Rectangle>
</Page>