Button Event Handlers and Image Effects
With the images successfully loaded into the list box and displayed in the central Image control, we can turn our attention to our four image editing/effects features:
Black-and-white filter
Image blur
Rotate
Flip
Because these four functions are controlled by the four buttons, we need to add some appropriate button images and events; we don’t cover the button stylings here because they involve external graphics resources, but you can see how they turn out in the final screenshot (at the end of this chapter) or by downloading the source from this book’s website.
The code for the events, however, is fair game. First, here are the XAML event declarations on each button.
<Button Click="buttonBandW_Click" Margin="20,0,0,0" Height="23"
Name="buttonBandW" Width="30"/>
<Button Click="buttonBlur_Click" Margin="20,0,0,0" Height="23"
Name="buttonBlur" Width="30"/>
<Button Click="buttonRotate_Click" Margin="20,0,0,0" Height="23"
Name="buttonRotate" Width="30"/>
<Button Click="buttonFlip_Click" Margin="20,0,20,0" Height="23"
Name="buttonFlip" Width="30"/>
Notice as you type these click events into the XAML pane that the XAML editor intervenes with IntelliSense pop-ups that not only complete our Click declaration but also create the corresponding event handler in our code-behind class!
Changing the image to grayscale is accomplished via the class FormatConvertedBitmap, which allows you to specify the color depth and format of your palette.
private void buttonBandW_Click
(object sender, RoutedEventArgs e)
{
BitmapSource img = (BitmapSource)image1.Source;
image1.Source =
new FormatConvertedBitmap
(img, PixelFormats.Gray16,
BitmapPalettes.Gray256, 1.0);
}
To perform the image manipulations, we use something known as a transform: the manipulation of a 2D surface to rotate, skew, or otherwise change the current appearance of the surface. We can handle our rotation feature directly with RotateTransform like this:
private void buttonRotate_Click(object sender, RoutedEventArgs e)
{
CachedBitmap cache = new CachedBitmap((BitmapSource)image1.Source,
BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
image1.Source = new TransformedBitmap(cache, new RotateTransform(90));
}
Our flip action ends up being just as easy but uses a ScaleTransform instead.
private void buttonFlip_Click(object sender, RoutedEventArgs e)
{
CachedBitmap cache = new CachedBitmap((BitmapSource)image1.Source,
BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
ScaleTransform scale = new ScaleTransform(-1, -1, image1.Source.Width / 2,
image1.Source.Height / 2);
image1.Source = new TransformedBitmap(cache, scale);
}
The image-blurring action is provided through a different mechanism known as an effect. By creating a new BlurBitmapEffect instance and assigning that to our image control, WPF applies the appropriate algorithm to the bitmap to blur the picture.
image1.Effect = new BlurEffect();