The Source of the Image is bound to a URL which points to an image.
If the image at the URL is smaller then the MaxHeight and MaxWidth, the following code works great. The image size is exactly the same as the url and the window is sized properly.
If the image at the URL is larger then the MaxHeight and MaxWidth, only a portion of the image is displayed. The image does not get shrunk to fit into the window.
If I remove Stretch="None", the large picture then shrinks to fit into the MaxHeight and MaxWidth, looks great, but the small image gets expanded to consume all available space and looks like crap.
Here are two images I have been testing with:
http://imgur.com/iaBp2Fv,fiRrTJS#0
<Window x:Class="MyNamespace.Windows.PictureWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Profile Picture" ResizeMode="NoResize" UseLayoutRounding="True" SizeToContent="WidthAndHeight" MaxHeight="750" MaxWidth="750">
<Image Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding}" />
</Window>
What you could do is to to remove the Stretch="None", as you say, to make the large image shrink down. But, to avoid the small image to be scaled up, you just add this property:
StretchDirection="DownOnly"
This prevents small images from being scaled upwards, and allows large images to be scaled down. The Window resizes appropriately as well.
This is the code that I have tested in LinqPad. Just change showLarge to true and false to switch between the images.
bool showLarge = false;
var w = new Window();
w.ResizeMode = ResizeMode.NoResize;
w.UseLayoutRounding = true;
w.SizeToContent = SizeToContent.WidthAndHeight;
w.MaxHeight = 750;
w.MaxWidth = 750;
Image img = new Image();
img.HorizontalAlignment = HorizontalAlignment.Center;
img.VerticalAlignment = VerticalAlignment.Center;
img.StretchDirection = StretchDirection.DownOnly;
if(showLarge)
img.Source = new BitmapImage(new System.Uri(#"http://i.imgur.com/iaBp2Fv.jpg"));
else
img.Source = new BitmapImage(new System.Uri(#"http://i.imgur.com/fiRrTJS.jpg"));
w.Content = img;
w.ShowDialog();
In your code behind, create a property as
public Point ImageSize {get;set}
Get the image from the URL in the constructor/Initialize() and set ImageSize accordingly
Bind the height and width of your window to ImageSize.X and ImageSize.Y
Height="{Binding ImageSize.Y}" Width="{Binding ImageSize.Y}"
Related
I'm creating OCR app and my idea is to draw rectangle on a image to create bounding box from where I want to extract text from image so not to take all ocr recognized text.
I have canvas and inside it image and rectangle. The image is put by default to top=0 and left=0 and then stretched uniform to fit on the canvas so top and left still is the same. How can I get position of rectangle mapped to position on image.
With my code bellow and on result image, because I draw rectangle on canvas top of the rectangle is 100 and left 300 and. But I want to get position of rectangle on the image.
<Grid Grid.Row="1">
<Canvas
Background="Aquamarine"
x:Name="CanvasImagePreview"
SizeChanged="Canvas_SizeChanged"
PointerPressed="Canvas_PointerPressed"
PointerReleased="Canvas_PointerReleased"
PointerMoved="Canvas_PointerMoved"
>
<Image x:Name="ImagePreview"
Width="{Binding Path=ActualWidth, ElementName=CanvasImagePreview}"
Height="{Binding Path=ActualHeight, ElementName=CanvasImagePreview}"
Stretch="Uniform"/>
<Rectangle
x:Name="BoudingBox_Rect"
RadiusX="10"
RadiusY="10"
StrokeThickness="3"
Stroke="Red"
Visibility="Collapsed"
/>
</Canvas>
<Grid/>
result image
By testing, we cannot get the actual size of image when the image is stretched to fill the Canvas panel by using the {Binding} extension to set the Width and Height property. The value of Width and Heigtht property of Image is actual the value of Canvas.
You need to calculate the actual size of the image based on the original size of the image which can be get from the corresponding BitmapImage. Then, get the position of rectangle on the image by calculating.
Please check the following code:
var CanvasActualHeight = CanvasImagePreview.ActualHeight;
var CanvasActualWidth = CanvasImagePreview.ActualWidth;
double visualHeight=0.0;
double visualWeight=0.0;
BitmapImage bitmapImage = (BitmapImage)ImagePreview.Source;
if(bitmapImage!=null)
{
var originalHeight = bitmapImage.PixelHeight;
var originalWidth = bitmapImage.PixelWidth;
if((CanvasActualHeight / originalHeight) >(CanvasActualWidth / originalWidth))
{
visualHeight = originalHeight* CanvasActualWidth / originalWidth;
visualWeight = CanvasActualWidth;
}
else
{
visualHeight = CanvasActualHeight;
visualWeight = originalWidth * CanvasActualHeight / originalHeight;
}
}
var relativeToCanvasTop = BoudingBox_Rect.Margin.Top;
var relativeToCanvasLeft = BoudingBox_Rect.Margin.Left;
var relativeToImageTop = BoudingBox_Rect.Margin.Top - (CanvasActualHeight - visualHeight)/2;
var relativeToImageLeft = BoudingBox_Rect.Margin.Left-(CanvasActualWidth - visualWeight)/2;
When a new MediaElement is made and inserted into a Grid, it is auto-sized to fit the entire Grid size. How can you adjust the proportions of the MediaElement to mimic the video's original size ?
Grid gDim = new Grid();
MediaElement plr = new MediaElement();
plr.Source = new Uri(my_string); // web link to video file
plr.Play();
plr.Width = plr.NaturalVideoWidth ;
plr.Height = plr.NaturalVideoHeight ;
plr.AreTransportControlsEnabled = true;
gDim.Children.Add(plr);
Setting the NaturalVideoWidth/Height makes the MediaElement go invisible.
Did you try my advice for this case(using Stretch property)?
<MediaElement Stretch="None"/>
I am working on Windows 8 Phone app, I have some images displaying in my app, the images which I have are very big with good quality, now in my app I need to resize the image without disturbing the aspect ratio.
I have searched for it and couldnt find a suitable soultion.
How to achieve this?
Here is my code in .CS file.
string imageName= "path to folder" + name + ".png";
BitmapImage bmp = new BitmapImage(new Uri(imageName, UriKind.Relative));
Image.Source = bmp;
EDIT
More info: Currently i am displaying images in my List Box, so the images are looking very big, so i want to decrease it to lower size without affecting the aspect ratio of the image.
If you want to load reduced image into memory then set DecodePixelWidth without setting
DecodePixelHeight (or other way round)
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.DecodePixelWidth = 80;
bitmapImage.UriSource = new Uri(imageName, UriKind.Relative);
EDIT
Or if you want to keep high resolution image in memory set size for Image control.
<Image ... Width="80"/>
Stretch property is set by default to Uniform which means:
The content is resized to fit in the destination dimensions while it preserves its native aspect ratio.
This should do:
static void Main(string[] args)
{
int _newWidth = 60; //the new width is set, the height will be calculated
var originalImage = Bitmap.FromFile(#"C:\temp\source.png");
float factor = originalImage.Width / (float)_newWidth;
int newHeight = (int)(originalImage.Height / factor);
Bitmap resizedImage = ResizeBitmap(originalImage, _newWidth, newHeight);
resizedImage.Save(#"c:\temp\target.png");
}
private static Bitmap ResizeBitmap(Image b, int nWidth, int nHeight)
{
Bitmap result = new Bitmap(nWidth, nHeight);
using (Graphics g = Graphics.FromImage(result))
g.DrawImage(b, 0, 0, nWidth, nHeight);
return result;
}
If you want to reduce image size proportionally on display, try to play with Image control's Stretch property as demonstrated and explained very well in this blog post.
<Image x:Name="Image" Stretch="UniformToFill"></Image>
The size of an image element is influenced by its containing panel, but this should work in any panel.
<Grid>
<Image Source='flower.png' Width='120' Stretch='Uniform'/>
</Grid>
I created the logic that crops an image that is contained inside a border that is inside a grid. The grid has many borders, so this grid will have many pictures. The problem is that when I zoom the picture the logic zoomed the picture (which is okay) but when I use the crop logic the AdornerLayer goes outside the border like the picture:
On this image the pic doesn't have zoom, so the AdornerLayer is correct:
The code that I'm using to add the crop to the image:
private void AddCropToElement(FrameworkElement fel, System.Drawing.Image img)
{
if (!cropElements.ContainsKey(Convert.ToString(((Image)fel).Source)))
{
if (_felCur != null)
{
RemoveCropFromCur();
}
rcInterior = new Rect(
fel.ActualWidth * 0.2,
fel.ActualHeight * 0.2,
fel.ActualWidth * 0.6,
fel.ActualHeight * 0.6);
rectMoving = false;
Rect newRect = scaleRect(rcInterior, img);
imgCropMove = img;
AdornerLayer aly = AdornerLayer.GetAdornerLayer(fel);
_clp = new CroppingAdorner(fel, rcInterior);
aly.Add(_clp);
cropElements.Add(Convert.ToString(((Image)fel).Source), fel);
imageCropped = _clp.Crop(new System.Drawing.Bitmap(img), newRect);
_clp.CropChanged += HandleCropChanged;
_felCur = fel;
}
}
In this case the object named fel is the picture that I want to crop and the Border is his parent.
How I can fix the problem of the AdornerLayout that goes outside if the image is zoomed?
Are you using the default Window Adorner or have you created a custom AdornerDecorator around your Border in your XAML?
<AdornerDecorator>
<Border>...</Border>
</AdornerDecorator>
Additionally, if you are applying a zoom factor on your Border, you can add a Binding on your cropping display rectangle to match the Scale on your Border object.
I have an Image on my wpf control
and I am trying to generate croped part of it - this is ok more or less.
I have used a codeproject solution to generate BitmapSource of croped image (http://www.codeproject.com/KB/WPF/CropAdorner.aspx) but when I am trying to
replace current image with generated BitmapSource like this
imgCurrent.Source = generatedBitmapSource;
I see very strange behaviour ((
I need an advice how to change current Image with new based on BitmapSource.
my XAML(there is nothing extraordinary - and by the right click I am trying to replace currentImage with croped):
<DockPanel Height="395" Width="926">
<!--Went with a DockPanel here so that the image would always be centered in its parent control.-->
<Image x:Name="imgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" MouseRightButtonDown="imgCurrent_MouseRightButtonDown"/>
</DockPanel>
right click:
private void imgCurrent_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
generatedBitmapSource = _clp.BpsCrop();
//this clears croping adonder
AdornerLayer aly = AdornerLayer.GetAdornerLayer(_felCur);
aly.Remove(_clp);
//
imageCurrent.Source = generatedBitmapSource;
}
croping method (from codeproject):
public BitmapSource BpsCrop()
{
Thickness margin = AdornerMargin();
Rect rcInterior = _prCropMask.RectInterior;
Point pxFromSize = UnitsToPx(rcInterior.Width, rcInterior.Height);
// It appears that CroppedBitmap indexes from the upper left of the margin whereas RenderTargetBitmap renders the
// control exclusive of the margin. Hence our need to take the margins into account here...
Point pxFromPos = UnitsToPx(rcInterior.Left + margin.Left, rcInterior.Top + margin.Top);
Point pxWhole = UnitsToPx(AdornedElement.RenderSize.Width + margin.Left, AdornedElement.RenderSize.Height + margin.Left);
pxFromSize.X = Math.Max(Math.Min(pxWhole.X - pxFromPos.X, pxFromSize.X), 0);
pxFromSize.Y = Math.Max(Math.Min(pxWhole.Y - pxFromPos.Y, pxFromSize.Y), 0);
if (pxFromSize.X == 0 || pxFromSize.Y == 0)
{
return null;
}
System.Windows.Int32Rect rcFrom = new System.Windows.Int32Rect(pxFromPos.X, pxFromPos.Y, pxFromSize.X, pxFromSize.Y);
RenderTargetBitmap rtb = new RenderTargetBitmap(pxWhole.X, pxWhole.Y, s_dpiX, s_dpiY, PixelFormats.Default);
rtb.Render(AdornedElement);
return new CroppedBitmap(rtb, rcFrom);
}
Are you sure you don't have issue with your "BitmapSource of croped image"? Can you for test purpose replace it with another valid Bitmap and try if it works. If it works with another one, but not "BitmapSource of croped image" then maybe you have issue with creating "BitmapSource of croped image".