I have noticed some strange image display behaviour with stretch property set to "none"
For image which width > screen width & height > screen width, all area that is overlapping is clipped. (As expected)
Result: http://www.bildites.lv/images/urha41iqz8oz9hq8a6lu.png
For image which width > screen width & height < screen height, it's overlapping sides are clipped and it is centered vertically. (As expected)
Result: http://www.bildites.lv/images/kt4cc6jz0nogajyqmmc2.png
But for image which width < screen width & height > screen height, it get's resized to a thumbnail like size. (NOT as expected)
Result: http://www.bildites.lv/images/rqo9acdqg50lygndk4g.png
Here is a simple WPF app that demonstrates it:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" WindowState="Maximized" WindowStyle="None" Height="350" Width="525">
<Grid>
<Image Source="" Stretch="None"></Image>
</Grid>
Can someone please explain the third result?
Images I used for demonstration:
1) http://oi59.tinypic.com/2edqyis.jpg (it is resized, it was actually something like 4kx4k px)
2) http://www.bildites.lv/images/rjt4rl15g2ib7r74t77.jpg
3) http://www.bildites.lv/images/3f05cd42b2oqc1utmltt.jpg
The third image has its resolution set to 1000 DPI. You may change that to 96 DPI. See here.
Related
I want to create a zooming control, that can be operated with mouse wheel.
Scroll up -> zoom in; scroll down -> zoom out.
Additionally, I want the zoom center to be located at wherever the mouse pointer is. So that one can always zoom in on the spot, where the mouse cursor is.
Seems simple enough, yet I can't get to work.
I am using a Grid and applying ScaleTransform to it.
When I zoom in the first time, it works and zooms in that particular spot. But then, if I move the cursor to some other spot and try to zoom in a bit more, the Grid is being offset and my initial center is off.
What is causing this? How can fix this?
My code:
Class MainWindow
Dim trans As New ScaleTransform
Dim Scale As Double = 1
Private Sub DefGrid_MouseWheel(sender As Object, e As MouseWheelEventArgs) Handles DefGrid.MouseWheel
If e.Delta > 0 Then
Scale = Scale + 0.1
End If
If e.Delta < 0 Then
Scale = Scale - 0.1
End If
trans.CenterX = e.GetPosition(DefGrid).X
trans.CenterY = e.GetPosition(DefGrid).Y
trans.ScaleX = Scale
trans.ScaleY = Scale
DefGrid.RenderTransform = trans
End Sub
End Class
And the xaml:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" PreviewMouseWheel="Window_PreviewMouseWheel">
<Grid x:Name="DefGrid" HorizontalAlignment="Left" Height="291" Margin="19,10,0,0" VerticalAlignment="Top" Width="475">
<Canvas HorizontalAlignment="Left" Height="254" Margin="137,10,0,0" VerticalAlignment="Top" Width="195">
<Canvas.Background>
<ImageBrush ImageSource="TestImage.jpg"/>
</Canvas.Background>
</Canvas>
</Grid>
</Window>
There's a Canvas image on the grid, just for reference.
It's a bit more complicated unfortunately. If you don't think you'll need scrollbars, check the answers here (I couldn't find VB-specific examples, so these are C#):
Pan & Zoom Image
If you need scrollbars as well, you will need to scroll to the mouse pointer. In that case you need something like this:
http://www.codeproject.com/Articles/97871/WPF-simple-zoom-and-drag-support-in-a-ScrollViewer
I need to set a image as background for WPF Window. I have set it like that:
<Window x:Class="DiagramView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="418" Width="1185" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Window.Background>
<ImageBrush ImageSource="../Images/Med.jpg" ></ImageBrush>
</Window.Background>
</Window>
But If I have height and width for window as orginal image, the image at window isn't not sharpen as it should be. I guess it happens because part of height and width is taken by window itself. What I properties I should use to have images with orginal width/height
In order to retain the original image size set the Stretch property to None:
<Window.Background>
<ImageBrush ImageSource="../Images/Med.jpg" Stretch="None" />
</Window.Background>
If you look on the ImageBrush Class page on MSDN, you'll see that there are a number of properties that you can use to position the image within the Brush. The following are of particular interest for positioning:
AlignmentX
AlignmentY
Stretch
Viewbox
ViewboxUnits
Viewport
ViewportUnits
Please see the linked page for their descriptions.
I wish to display a HD size 1920X1080 image in my WPF application. When I set the image source in the image control, only part of the image is displayed, size of image control.
I do not wish to auto-fit the HD image into the image control. Say the image control is size 640 X 480 then the 640X480 of HD image should be displayed. But when I pan the image then the next 640 X 480 of the image should be displayed.
I already have implemented TransformGroup
TransformGroup group = new TransformGroup();
ScaleTransform xform = new ScaleTransform();
group.Children.Add(xform);
TranslateTransform tt = new TranslateTransform();
group.Children.Add(tt);
But my problem is that entire image is not loaded initially.
If all you want is the ability to scroll your image...then use:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<Image Stretch="None" Source="c:\mytestimage.png" />
</ScrollViewer>
</Grid>
</Window>
See these handy posts if you want to be more sophisticated/efficient:
WPF Image Zooming
Pan & Zoom Image
http://www.codeproject.com/Articles/85603/A-WPF-custom-control-for-zooming-and-panning
There is an alternate way to display the image. Set the max-es on the image, so it wont visually load larger than what is needed.
<Image Source="{Binding Source}"
Stretch="UniformToFill"
MaxHeight="200"
MaxWidth="400"/>
Image below shows two images loaded as is, a small one and a large one. The left side shows the large one exploding past the boundaries. The right one shows the proper shrinkage for the large one.
To keep the smaller image from oversizing (as shown on the right side) set the StretchDirection="DownOnly" to keep the smaller one from expanding.
I've got an image with 400 * 400 pixels. Now, when I add it to the WPF page:
<Image Source="Resources\about.png" Stretch="None"/>
its size become larger:
Any idea why this behavior happens?
Specify the width and height explicitly:
<Image Source="Resources\about.png" Width="400" Height="400" />
(Also, in your screenshot, it looks like HorizontalAlignment and VerticalAlignment are set to Stretch?)
How to relative scale size of User Control like image (in image editor).
Example (100%):
(source: stegnar.com)
Scaled down UC (70%):
(source: stegnar.com)
Well I achieve this in picture editor, but I would like in WPF. :) I need this to adjust my application to different screen resolution, while nothing hiding (no scrollbars).
You could try the ViewBox control that scales up/down its content so that it fills the available space.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1">
<Grid>
<Viewbox StretchDirection="Both" Stretch="Uniform">
<local:UserControl1 Height="600" Width="600"/>
</Viewbox>
</Grid>
you can place the whole container into a ViewBox
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid>...</Grid>
</Viewbox>
you don't have to place each single textblock in it!
Use of Viewbox (as said by Milan Nankov) is a great idea. One thing that I must warn you is that it also zooms in or out other visual aspects as well.
For example, a Textbox with dimension 200 X 1000 is very different from a Textbox with dimension 20 X 100 zoomed in 10x.
WPF provides many layouting options which can change dimension of the controls according to the size of the container. But it doesn't change the size of the text. Viewbox overcomes this issue, but it introduces another issue. Check the image below which shows the same textbox in a viewbox before and after zooming.
One trick which could be used is to place every textblock in a viewbox. But I guess that would be an overkill, and I seriously don't having any backing for this trick. Please do check for yourself and reply whether it's practical or not.
Another trick could be to bind the control's height to the font size. We would be needing a converter in that case. Please refer to this reply.. Resize font in TextBox in Grid