Example of a trigger that kicks in when MouseOver event occurs:
<Button Background="AliceBlue"> <Button.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Button.Background" Value="Yellow" /> </Trigger> </Button.Triggers> </Button>
Button
click triggers Border
animation. Basically, the button click event will trigger a named and defined action (here an animation). In turn, another control (here a Border) will use the action which gets triggered by button.
Here is the button definition:
<Button Name="btnsidePatient"> <Button.Triggers> <EventTrigger RoutedEvent="Button.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="transPanelSlideRight" Storyboard.TargetProperty="(TranslateTransform.X)" From="-200" To="0" Duration="0:0:0.5" AutoReverse="False"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> <StackPanel> <Image Source="/images/icons/icon-patient.png" Height="30" /> <TextBlock HorizontalAlignment="Center">Patient</TextBlock> </StackPanel> </Button>
Border (in Popup) that gets animated:
<!--Popup menu for Patient--> <Popup x:Name="popmnuPatient" Placement="Mouse" AllowsTransparency="True" PopupAnimation="Fade" VerticalOffset="0" MouseLeave="popmnu_MouseLeave"> <Border CornerRadius="10" Margin="0,0,10,10" BorderBrush="DarkGray" BorderThickness="2" Background="White"> <Border.RenderTransform> <TranslateTransform x:Name="transPanelSlideRight" /> </Border.RenderTransform> <Grid> ... </Grid> </Border> </Popup>