In CSS we can simply write:
a:active {
background: #000;
color: #fff;
}
for changing the state of a link when one clicks on them. The same applies to lots of other elements (not in old browsers, but more so in newer ones).
As, I’m learning WPF, I found that there wasn’t an easy way to do this, there are no states of a button as we see in iOS development, rather we have triggers:
<UserControl.Resources> <UserControl.Resources> <BitmapImage x:Key="btnRefreshOn" UriSource="/Emulator;component/Assets/btn_refresh_on.png" /> <BitmapImage x:Key="btnRefreshOff" UriSource="/Emulator;component/Assets/btn_refresh_off.png" /> </UserControl.Resources> <Grid> <Button Content="Check Now" Height="30" HorizontalAlignment="Left" Margin="10,4,0,0" Name="btnGetMessagesNow" VerticalAlignment="Top" Width="30"> <Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <Image Name="btnRefresh" Source="{StaticResource btnRefreshOff}" Stretch="Fill" VerticalAlignment="Center" /> <ControlTemplate.Triggers> <Trigger Property="ButtonBase.IsPressed" Value="true"> <Setter Property="Image.Source" TargetName="btnRefresh" Value="{StaticResource btnRefreshOn}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> </Grid> </Page>
The code above has a trigger that fires when ButtonBase.IsPressed is fired, and sets the property Source of an image that makes up the template of a button.
One may say, why bother go to this length when we could simply change the source of the image from code behind. If you use UIElement.MouseDown on the target image, any other events such as MouseUp will not fire once you change the source of the target image.