|
|
Questions and answers for Controls Image.
|
73. Controls Image
|
| 73.1 How can I convert an
Image to grayscale ?
|
| 73.2 How can I crop an
Image ?
|
| 73.3 Why does adding
images to an ImageList in the Designer cause them to lose their alpha channel ?
|
| 73.4 How to rotate an
image ?
|
| 73.5 How do I access /
edit the metadata associated with an Image ?
|
| 73.6 How can the
DrawVisual be used for rendering images ?
|
73.1 How can I convert an Image to grayscale ?
|
|
This example shows how to convert an image to grayscale using the
"FormatConvertedBitmap".
|
[XAML]
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<!-- This resource defines a BitmapImage with a source and
a
DecodePixelWidth of 200. This property is set to the same
value
as the desired width of the image to save on memory use. This
BitmapImage is used as the base for the other BitmapSource
resources. -->
<BitmapImage x:Key="masterImage" DecodePixelWidth="200"
UriSource="C:\Documents and Settings\All Users\Documents\My
Pictures\Sample Pictures\Water Lilies.jpg"/>
<!-- This FormatConvertedBitmap uses the BitmapImage
defined above and
changes the format to Gray32 (grayscale). -->
<FormatConvertedBitmap x:Key="convertFormatImage"
Source="{StaticResource masterImage}"
DestinationFormat="Gray32" />
</Page.Resources>
<StackPanel>
<!-- Apply the "convertFormatImage" resource defined above
to this image. -->
<Image Width="200" Source="{StaticResource
convertFormatImage}" />
</StackPanel>
</Page>
|
|
This can be done by using the "FormatConvertedBitmap" class. The image is
converted to it's destination pixel format type. The list of PixelFormats can
be found in the "PixelFormats" class. The following code snippet shows the
conversion of an image to grayscale.
|
[XAML]
<Image Width="200" Height="200" >
<Image.Source>
<FormatConvertedBitmap Source="C:\Documents and Settings\All
Users\Documents\My Pictures\Sample Pictures\Winter.jpg"
DestinationFormat="Gray4" />
</Image.Source>
</Image>
|
73.2 How can I crop an Image ?
|
|
The following example shows how to create and use an 'instance' of the
GridLengthConverter object. The example defines a custom method called
"changeCol()", which passes the ListBoxItem to a GridLengthConverter that
converts the Content of a ListBoxItem to an instance of GridLength. The
converted value is then passed back as the value of the "Width" property of the
ColumnDefinition element.
|
[C#]
public void changeColVal(object sender, RoutedEventArgs e)
{
txt1.Text = "Current Grid Column is " + hs1.Value.ToString();
}
public void changeCol(object sender, SelectionChangedEventArgs
args)
{
ListBoxItem li = ((sender as ListBox).SelectedItem as
ListBoxItem);
GridLengthConverter myGridLengthConverter = new
GridLengthConverter();
if (hs1.Value == 0)
{
GridLength gl1 =
(GridLength)myGridLengthConverter.ConvertFromString(li.Content.ToString());
col1.Width = gl1;
}
else if (hs1.Value == 1)
{
GridLength gl2 =
(GridLength)myGridLengthConverter.ConvertFromString(li.Content.ToString());
col2.Width = gl2;
}
else if (hs1.Value == 2)
{
GridLength gl3 =
(GridLength)myGridLengthConverter.ConvertFromString(li.Content.ToString());
col3.Width = gl3;
}
}
|
73.3 Why does adding images to an ImageList in the Designer cause them to lose
their alpha channel ?
|
|
It looks like the ImageList editor loses the transparency when it does some
internal copy or clone of the images. However, it seems that it does work when
you add the images in code to the ImageList. One workaround (not so tidy) is to
add the images to the ImageList at design-time (so that your design-time will
be closer to the run-time) and then clear that ImageList and refill it with the
images in code.
|
73.4 How to rotate an image ?
|
|
Image rotations can be performed using the "Rotation" property of the
BitmapImage. Rotation can be done only by 90 degree increments.
|
[XAML]
<Image Width="200" Height="200">
<Image.Source>
<TransformedBitmap Source="C:\Documents and Settings\All
Users\Documents\My Pictures\Sample Pictures\Winter.jpg">
<TransformedBitmap.Transform>
<RotateTransform Angle="270" />
</TransformedBitmap.Transform>
</TransformedBitmap>
</Image.Source>
</Image>
|
73.5 How do I access / edit the metadata associated with an Image ?
|
|
The "BitmapMetaData" class provides metadata information contained by the image.
This metadata can be one metadata schema or a combination of different schemes.
WPF inherently supports the following image schemas:
ExchangableImageFile (Exif).
PNG Textual Data.
ImageFileDirectory (IFD).
InternationalPressTelecommunicationsCouncil (IPTC).
ExtensibleMarkupLanguage (XMP).
|
[C#]
Stream pngStream = new System.IO.FileStream("winter.png",
FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite);
PngBitmapDecoder pngDecoder = new PngBitmapDecoder(pngStream,
BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapFrame pngFrame = pngDecoder.Frames[0];
InPlaceBitmapMetadataWriter pngInplace =
pngFrame.CreateInPlaceBitmapMetadataWriter();
if (pngInplace.TrySave() == true)
{
pngInplace.SetQuery("/Text/Author", "Me");
}
pngStream.Close();
|
73.6 How can the DrawVisual be used for rendering images ?
|
|
The DrawingVisual can be used with a "BitmapImage" instance and then rendered
using "RenderBitmap" class for creating custom rendered images. If text needs
to be added, then use the "FomattedText" instance.
The following code snippet shows how to render an image with a text.
|
[C#]
BitmapImage bitImage = new BitmapImage()
{
UriSource = new Uri(@"C:\Documents and Settings\All
Users\Documents\My Pictures\Sample Pictures\Winter.jpg", UriKind.Relative),
DecodePixelWidth = 200,
DecodePixelHeight = 200
};
FormattedText text = new FormattedText("Winter", new
CultureInfo("en-us"), FlowDirection.RightToLeft, new Typeface("Calibri",
FontStyles.Normal, FontWeights.Normal, new FontStretch()), this.FontSize,
Brushes.White);
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
drawingContext.DrawImage(bitImage, new Rect(0, 0,
bitImagebi.Width, bitImagebi.Height));
drawingContext.DrawText(text, new Point(bitImage.Height / 2,
0));
drawingContext.Close();
RenderTargetBitmap renderBmap = new
RenderTargetBitmap(bitImage.PixelWidth, bitImage.PixelHeight, 96, 96,
PixelFormats.Pbgra32);
renderBmap.Render(drawingVisual);
// Encoding the RenderBitmapTarget as a PNG file.
PngBitmapEncoder png = new PngBitmapEncoder();
png.Frames.Add(BitmapFrame.Create(rtb));
using (Stream stm = File.Create("new.png"))
{
png.Save(stm);
}
|
|