I want to assign height and width of dynamically created image to a canvas .
Here is my code
Image image=new Image();
BitmapImage bm=new BitmapImage();
bm.UriSource=new Uri("url",Urikind.RelativeOrAbsolute);
image.Source=bm;
MyCanvas.Height=image.Height;
MyCanvas.Width=image.Width;
but it gives 0.0 value when i check in debug mode ,when I change image.Height to image.ActualHeight it gives NaN .
How to resolve this.
You should use the ActualWidth and ActualHeight properties of the Image control. The Width and Height are the dimensions you want the control to have; by default their value is double.NaN, which means "Auto".
But anyway, it still won't be enough:
at this point, the image has not finished loading, so its width and height are not accessible yet. You need to initialize the image like that:
BitmapImage bm=new BitmapImage();
bm.BeginInit();
bm.UriSource=new Uri("url",Urikind.RelativeOrAbsolute);
bm.EndInit();
the Image control is not yet part of the visual tree, so its dimensions can't be computed
So ActualWidth and ActualHeight will still not give your the correct values... A better way would be to set the canvas size according to the width and height of the BitmapImage:
MyCanvas.Height= bm.Height;
MyCanvas.Width = bm.Width;
I solved it in this way
BitmapImage bm = new BitmapImage();
bm.UriSource=new Uri("ms-appx:///" + d.source, UriKind.RelativeOrAbsolute);
bm.ImageOpened += (sender, e1) =>
{
DrawCanvas.Height = bm.PixelHeight;
DrawCanvas.Width = bm.PixelWidth;
};
Related
I have a WPF Image control already working in my application. Using ScaleTransform and TranslateTransform, the Image control has zooming and panning functionality working very well.
I was wondering if there is any way to display certain rectangle area of the image source in the Image control using ScaleTransform and TranslateTransform. In order to do that, I think I need to get/set rectangle coordinates of the image source in view port of the Image control. But it seems that I can't find any reference on this.
I think CroppedBitmap can help you:
<CroppedBitmap x:Key="croppedImage"
Source="{StaticResource masterImage}" SourceRect="30 20 105 50"/>
Lucky for me, the rectangles have all the same size so I could find easily a fixed scale value for ScaleTrensformation such as 5.0 which will fit each rectangle into the view port. Once that determined, I could come up with following function to calculate values for TranslateTransform in terms of coordinate in the image. Hope it may help people in a similar situation.
public void SetImageCoordinate(double x, double y)
{
TransformGroup transformGroup = (TransformGroup)image.RenderTransform;
ScaleTransform transform = (ScaleTransform)transformGroup.Children[0];
ImageSource imageSource = image.Source;
BitmapImage bitmapImage = (BitmapImage) imageSource ;
//Now since you got the image displayed in Image control. You can easily map the mouse position to the Pixel scale.
var pixelMousePositionX = -(x ) / bitmapImage.PixelWidth * transform.ScaleX * image.ActualWidth;
var pixelMousePositionY = -(y) / bitmapImage.PixelHeight * transform.ScaleY * image.ActualHeight;
//MessageBox.Show("X: " + pixelMousePositionX + "; Y: " + pixelMousePositionY);
var tt = (TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr => tr is TranslateTransform);
tt.X = pixelMousePositionX;
tt.Y = pixelMousePositionY;
}
I'm trying to print image from Silverlight application. I have pretty good quality scans (TIFF) with resolution 1696x2200
When I print - I get PrintableArea from PrintDocument and it's 816x1056
What I do - I resize bitmap to Printable area (to fit document to page) and result I get is blurry image. I understand this is scaling problem (most likely), but how do I scale properly so it looks good? When I display document inside Image and just set image size - it looks good.
For resizing I'm using WriteableBitmapEx extensions and tried both types of resize (Nearest neighbor and bilinear)
Code:
var printDocument = new PrintDocument();
printDocument.PrintPage += (s, ea) =>
{
var printableArea = ea.PrintableArea;
var bitmap = this.currentPreviewPage.FullBitmap.Resize((int)printableArea.Width, (int)printableArea.Height, WriteableBitmapExtensions.Interpolation.Bilinear);
var image = new Image { Source = bitmap };
var canvas = new Canvas { Width = bitmap.PixelWidth, Height = bitmap.PixelHeight };
canvas.Children.Add(image);
ea.PageVisual = canvas;
ea.HasMorePages = false;
};
printDocument.PrintBitmap("Silverlight Bitmap Print");
How document looks on screen (inside Image)
And this is printed:
Rather than using the WriteableBitmapEx extensions, when declaring your Image element, try setting the Stretch property so that it stretches based on your maximum specified dimensions:
var image = new Image { Source = bitmap, Stretch = Stretch.UniformToFill };
Blilinear filter tends to blur images.You may want to try WriteableBitmapExtensions.Interpolation.NearestNeighbor instead to see if you get better results
In my case it was enough to set UseLayoutRounding="True".
Rather than declaring an image and setting the source from the xaml file, can someone do the initialization part, set the image coordinates, and set the source completely in the code?
// Create Image Element
Image myImage = new Image();
myImage.Width = 200;
// Create source
BitmapImage myBitmapImage = new BitmapImage();
// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(#"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");
// To save significant application memory, set the DecodePixelWidth or
// DecodePixelHeight of the BitmapImage value of the image source to the desired
// height or width of the rendered image. If you don't do this, the application will
// cache the image as though it were rendered as its normal size rather then just
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200;
myBitmapImage.EndInit();
//set image source
myImage.Source = myBitmapImage;
You need to create a new Image specifying the source:
Image myImage = new Image();
BitmapImage bitmapImage = new BitmapImage(new Uri("/YourSource", UriKind.Relative)); //Or UriKind.Absolute depending in the path
myImage.Source = bitmapImage;
If you want to place the image into some coordenates you can place a Canvas behind and place the image using Canvas coordenates. Use:
_myCanvas.Children.Add(myImage); //To add your image to Canvas, declared on Xaml or previously created and added to your control
Canvas.SetTop(myImage, 100); //Set Y coordenate relative to Canvas initial point
Canvas.SetLeft(myImage, 100); // Set X
Can I get the Height and Width of an Image, if it has been Stretched by UniformToFill?
I tried Width and Height properties but they are always NaN.
If you want to know the dimensions of the image control, this is the way:
double theHeight = this.ActualHeight - img.Margin.Top - img.Margin.Bottom;
double theWidth = this.ActualWidth - img.Margin.Left - img.Margin.Right;
(img is the image control name in the code above, and in the codes below)
And if you want to know actual size of image (before it being stretched) you may try this:
BitmapSource SourceData = (BitmapSource)img.Source;
double imgWidth = SourceData.PixelWidth;
double imgHeight = SourceData.PixelHeight;
(I've Found this here)
Also this will get you the dimensions of image after resizing (But before uniforming):
double actWidth = img.ActualWidth;
double actHeight = img.ActualHeight;
So, one of those variables (actWidth or actHeight) must be equal to image control dimension, and the other will be higher than it.
Please note that the second and the third codes are not working if you call them in Window_Loaded event, since images are not loaded at that moment. You should use it after everything is loaded.
I have an Image control as the child of a Canvas control. If I load the Image control with a bitmap and set the Stretch property to Uniform, I get a centered image. However, I can find no way to either set or retrieve the position of the Image. Solution anyone?
Here is some code to make understanding the problem a bit easier:
Image img = new Image();
img.Height = maxSize.Height;
img.Width = maxSize.Width;
img.Stretch = Stretch.Uniform;
img.Source = bmp;
myCanvas.Children.Add(img);
// returns 0:
MessageBox.Show(((Image)myCanvas.Children[0]).GetValue(Canvas.LeftProperty).ToString());
MessageBox.Show(((Image)myCanvas.Children[0]).GetValue(Canvas.TopProperty).ToString());
// in order to set explicitly set the values I have to know what they are?
Double left = {the current left value};
Double top = {the current top value};
((Image)myCanvas.Children[0]).SetValue(Canvas.LeftProperty, left);
((Image)myCanvas.Children[0]).SetValue(Canvas.TopProperty, top);`
I select the code and press the {} button, but it does not work for me, neither does entering code ticks manually.
Use the Canvas.LeftProperty and Canvas.TopProperty
var left = (double)image.GetValue(Canvas.LeftProperty)
left += 50;
image.SetValue(Canvas.LeftProperty, left);