In my applcaiton,i make Grid of size Grid Width="1300.441" Height="80",
Its working fien in this resolution.But when i changed my resolution to 1152 width,quater of application get out of the desktop.
How can i avoid that?
I want to display full page in all resolution.
Pls help me
In WPF, the pixel size is 1/96 inch. There's no other resolution. It seems that your content is 13.54626 inches wide. My guess is that this is an XPS document or a raster or something? In this case, there is no way to display the whole thing in 1152 pixels at 100% without cropping and needing to scroll.
You can place your grid inside a ViewBox element, it will scale everything down to whatever resolution you need.
<ViewBox Width="1000">
<Grid Width="1300.441">
...
</Grid>
</ViewBox>
Related
I have an image that is 24x24. If i do not enter width and height in xaml and set Stretch="None" my 24x24 will size up to 32x32. Shouldn't 'no stretch' mean that the image displays at 24x24?
If i forcibly set the image to 24x24 then i get extra pixels that are not there in the original image.
I would like the image to be displayed at 100% size/scale with "pixel perfect"/"point filtering" rendering.
I read on a related question that something about some images having 96 DPI and some 72 which can cause weird behavior. I tried checking the DPI of my image following a tutorial, but there is no DPI info in the place the tutorial said (at the red line):
Either way, even if i fix so the image DPI is the same as my screen DPI (dont know how to check that either) wont't there be a problem on other people's screens? I don't want the image to be pixel perfect on only 96 DPI screens. I want it to be pixel perfect always, i always want 1 pixel of the image to correspond to 1 pixel in the application/on-screen.
Is this impossible to achieve in WPF? If it is, how can i at least make it so the awkward extra pixels are "uniform" (look at the image in the middle, it has extra pixels on the width but not height) and so that all images scale the same way (depending on where in the window the image is placed the extra pixels are in different places, i would like every instance of the same image to look the same).
In order to size an Image element to the PixelWidth and PixelHeight of its Source image, you may bind its Width and Height like shown below.
Also set RenderOptions.BitmapScalingMode to NearestNeighbor to avoid pixel interpolation.
<Image ...
Width="{Binding Source.PixelWidth, RelativeSource={RelativeSource Self}}"
Height="{Binding Source.PixelHeight, RelativeSource={RelativeSource Self}}"
RenderOptions.BitmapScalingMode="NearestNeighbor"/>
I'm new on Windows development and more in Windows Phone Development.
I'm trying to create a grid view composed of three cell.
Each grid view are composed of one image (for the background) and a textblock.
My background image is a cloud image and I want the first image partialy hidden by the second one and the second one partially hidden by the third one.
I tried to play with the margin of the cell for the y part, that's works but my cloud image doesn't make the entire width of my cell. So I tried the "UnifirmToFill" option but my images are cropped...
On iOS development in this case we can use the magic property "ClipToBounds", everywhere I saw the answer "use the clip to bounds property" but apparently this property is a legend or Visual Studio lie me...
Do you have an idea to resolve my problem ?
Thank you in advance!
To resume:
If I use the "uniformToFill" stretch option, my image is zoomed. It is ok for me.
But there is a way to display the cropped part? I want my image zoomed and displayed out the cell view.
In XAML there are four possible Stretch options:
None
The image is shown in it's original size. If its larger than the parent element, it'll only show the top left portion of the image that fits inside. If the image is smaller than the parent element, then it's shown in it's entirety.
Fill
The image is resized to fill the parent element. If the aspect ratios are different, then the image will be stretched to fit the parent. This will distort the image.
Uniform
The image will be scaled up as large as it can be, while still being completely inside of the parent. Unlike Fill which will stretch the image to make it fit perfectly, Uniform will keep the aspect ratio of the image and stop scaling when it reaches the bounds of the parent.
UniformToFill
This is the bastard child of the previous two. It will scale the image, while keeping the aspect ratio, until it fills the parent element. This means that some parts of the image will be clipped if the aspect ratios are different.
For more information on the Stretch enumeration, hit it up on MSDN
UPDATE
If you want to show the image outside of the bounds of the parent you could do something like this:
<Grid Width="100" Height="50">
<Grid.Clip>
<RectangleGeometry Rect="0 0 100 50"/>
</Grid.Clip>
</Grid>
This was suggested here on SO
Ok, I've created a PNG-24 with transparency. It's basically a grayscale image that uses 'colors' in between black and transparent instead of black and white. I did this so I can use this as the Opacity Mask of a colored rectangle, thus rendering the image in whatever color I want using only a single graphic.
However, for the life of me, I can't get WPF to stop anti-aliasing the da*n image!!
I've set 'SnapesToDevicePixels' on the rectangle to which the brush is applied... I've set the ImageBrush's Scale to 'None'... I've set its ViewPort and the ViewBox to absolute units and sized them exactly to the source image. But no matter what I try, WPF still insists on trying to smooth things out! This is VERY frustrating!!!
So... anyone know how to use an image as an opacity mask but not lose the pixel-precise drawing that we have done? I just want WPF to render the damn thing as we drew it, period!
I have tried to reproduce your problem. Simply like this:
<Rectangle Width="200" Height="200" Fill="Red">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/mask.png"/>
</Rectangle.OpacityMask>
</Rectangle>
mask.png contains a simple diagonal mask, like that half of rectange is visible and other half is 100% transparent.
And recrangle is rendering pixel perfect (and aliased, as you want).
I think, that you may a DPI setting, that is not native to your monitor, and WPF just can`t render images correctly.
GOT IT! It's a layout issue that for some reason, there's no easy way to change. However, there's a value you can set called UseLayoutRounding that fixes it. I just set it at the root level (for this fauxample, a grid...)
<Grid UseLayoutRounding="True">
....
</Grid>
...and BAM! Works like a charm! "Sort of" like a 'SnapsToDevicePixels' but for positioning of elements (i.e. it rounds all layout-related values like left, width, etc. whereas SnapsToDevicePixels snaps the layout to the on-screen pixels when rendering.)
M
I wrote some wpf application that contain labels.
I want to change the label font size according to the screen .. that mean that if the user will maximize the application window - the font will grow up - if he will change the size to small window - the font will shrink.
I try a lot of solutions - but the font size is not changing.
need help ...
Thanks.
Try using a ViewBox
<Grid>
<Viewbox>
<Label >Hello world</Label>
</Viewbox>
</Grid>
Using FormattedText class, you can find out Width and Height of given text with specified Fontfamily. You can use this method to calculate and find out how much font size is needed to fill up available space.
Specifically, I'm looking to use the 16*16 32-bit png images included with the VS2008ImageLibrary. I've tried manually setting the Height and Width attributes of the image, adjusting margins and padding, adjusting Stretch and RenderOptions. My attempts to create toolbar buttons have all led to either Improper Scaling (blurry icons), the bottom row of pixels on the icon being truncated, or the toolbar button being improperly sized - not to mention the disappearing icons already mentioned Here. Has anyone found the best way to make standard, VisualStudio/WinForms-style toolbar buttons that display properly in WPF?
First, change the image resolution to 96DPI, this can done with the free Paint.net ( http://www.getpaint.net ) by opening the file, Selecting Image->Canvas Size from the menu and adjusting the "resolution" to 96 and saving.
If this doesn't help you can then use the solution I wrote about in my blog here http://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx
Best way would be using Vector graphics instead of png. I know the following is not exactly what you asked for, but imho there is no way for better looking icons. Also it would help you get rid off margins and paddings. (Ok, if you want to use photos you're screwed)
Bad News is you probably need to repaint all your icons. You could do this using MS Expression Blend(it's capable to save painted Images as .xaml) or you make them on our own with a texteditor.
I prefer the Border.Background instead of the Image.Source for placing the icon, this allows me to put text over the image. This would look samething like that:
<Window.Resources>
<ResourceDictionary Source="Resources/Icons.xaml"/>
</Window.Resources>
<!--
...
-->
<Button>
<Border Background="{StaticResource IconName}" Height="16" Width="16" />
</Button>
The best workaround I can come up with is this:
<Image x:Key="TB_NewIcon" Source="Toolbar Images/NewDocumentHS.png" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
...
<Button Command="ApplicationCommands.New" Content="{StaticResource TB_NewIcon}" Padding="2,2,2,1"/>
Or Alternatively:
<BitmapImage x:Key="TB_NewIcon" UriSource="Toolbar Images\NewDocumentHS.png"/>
...
<Button Command="ApplicationCommands.New" Padding="2,2,2,1">
<Image Source="{StaticResource TB_NewIcon}" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
</Button>
For the Button Tag, the Padding attribute is needed to ensure that the image isn't truncated at a height of 15 pixels, and that the button isn't resized to fit the image. Alternatively, we could specify Padding="1", but then we must manually set Height="21" and Width="22" to ensure the button isn't resized to fit the image
On the Image Tab, the Height and Width are needed to ensure that the image isn't stretched. SnapsToDevicePixels and RenderOptions.BitMapScalingMode are both needed to ensure that there is no blurring. I can't promise that this will work nicely for all resolutions.
Note:
For the NewDocumentHS.png icon, the one that causes the most issues,as it takes up the full 16 pixels of height, you may want to adjust the padding to "1,1,3,2", so that the bottom aligns more properly with other icons.
You may want to consider trying a new property available now in WPF4.
Leave the RenderOptions.BitmapScalingMode to HighQuality or just don't declare it.
On your root element (i.e. your main window) add this property: UseLayoutRounding="True".
A property previously only available in Silverlight has now fixed all Bitmap sizing woes. :)
Please Note - a few of the effects layout rounding
can have on exact layout:
width and or height of elements may grow or shrink by at most 1 pixel
placement of an object can move by at most 1 pixel
centered elements can be vertically or horizontally off center by at most
1 pixel
More info found here: http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx