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
Related
I am writing a WPF app that displays an image that is initially centered. The user can zoom in/out and move the image, which are implemented using ScaleTransform and TranslateTransform. That works great.
The problem is when the image is significantly bigger than the window, and the user moves the image or zooms out enough so that the entire image should be visible. The portion of the image that was originally hidden isn't rendered, and instead only the originally viewable part of the image is drawn.
Based on some other questions, if I put my image inside of a Canvas that will cause the entire image to be rendered, and when moved it will be rendered correctly. The problem is that I don't want my image to be in a Canvas, since that prevents any other layout from occurring - the HorizontalAlignment and VerticalAlignment properties are ignored (so the image is no longer centered), and I need to implement an option that will draw the image as large as possible to fill the entire area of the window which no longer works (setting the Stretch property to UniformToFill doesn't do anything).
Currently the two transforms are set to the RenderTransform property. If I use LayoutTransform instead, the entire image is drawn, but this also prevents the user from moving any portion of the image off the edge of the window (which is behavior that I would like to keep).
How can I tell WPF to always render the entire image without using a Canvas or a LayoutTransform?
I suggest not using a TranslateTransform but instead rely on the ScrollViewer.
<ScrollViewer>
<Grid>
<Image Source="blabla">
<Image.LayoutTransform>
<ScaleTransform />
</Image.LayoutTransform>
</Image>
</Grid>
</ScrollViewer>
The ScrollViewer gives the Image infinite space to expand, the entire image will be rendered. The Grid forces a centered layout while still allowing the image to expand. If you don't like the scrollbars to control the translate then you can hide them and roll your own solution.
LayoutTransform is definetely the way to go, so that the image's actual size in pixels (based on the zoom) is properly reflected onto your window.
I'm in the process of making a WPF program that:
can scan a bitmap image, pixel-by-pixel, and assign it a data value (0-255)
design a class that allows panning and zooming of the picture
create a histogram, from the data values, that overlays the bitmap image.
I was able to do all three, however the issue that I am having is that the histogram doesn't dynamically (I think that's the word for it) stretch as I re-size the main window. Actually, nothing stretches to the correct size in the main window (the bitmap image just re-centers itself while keeping the same size). The histogram originally started as a transparent canvas that had many rectangle children. I changed it to a grid but am getting the same results as the canvas; the rectangles don't want to stretch horizontally or vertically. If I do set a horz/vert alignment the histogram disappears altogether. Can anyone help with this problem?
I ended up making a class that was a derivative of the canvas class i cave it some rendering overrides and a paint method that took into account the actual width and height of the window.
I am new to silver light and would like to understand a bit more from the pros. Let me tell you what I am trying to do. I am into photography and my goal is to create a web site that allows users to view their images and be able to rotate, zoom, crop, special effect etc. I have developed the web site that allows users to order pictures but now I want to start working on the actual picture/image manipulation. So for testing i put a canvas and a rectangle( with an image). Placed a slider and was able to link the slider to the rectangle. As i increase the slider the image gets larger. But I was kind of hoping as the image gets larger it does not surpass the boundries of the canvas. I assumed that is what it means by being a child of a canvas. Am i mistaken? If so how do you suggest me doing this? Remember I am very new to this and may be going about this very wrong.
Thanks!
Your are right. In Silverlight (like in WPF, WinForms etc.) gui-elements form a hierarchy of elements wherein controls can act either as parents or as children.
The reason why your rectangle surpasses the boundaries of it's container lies in the way controls are getting aligned. This depends on what kind of container you want to place your child into.
In a canvas for example you position the children with absolute measurements (left, top, height, width). In a self-organizing container like the StackPanel you choose an horizontal alignment (Left, HCenter, HStretch, Right) or a vertical alignment (Top, VCenter, VStretch, Bottom) which determines the childs behavior when you place it inside the parent. Furthermore you can specify the dimension of the child (Width, Height) and an optional margin which determines the gap between the Top, Right, Bottom and Left bound of your child to its enclosing parent.
But what ever container you choose it's inherent to it that you can let its children surpass its boundaries e.g. with a margin that is negative or greater than the container boundaries or simply by an child that is bigger in dimension that its container as you described the situation with your rectangle.
In your case I would consider working with the idea of clipping. Clipping simply means to
(1) define an geometrical area (in Silverlight and WPF it is a Path object) which lies over some graphical context (some section of your ui or your control etc).
(2) what lies inside the boundaries of this clipping area remains visible and everything else remains invisible.
So you can think of a clipping area as a window onto your screen which you use to look through.
When you are using Microsoft Blend this is easy to realize:
(1) Just use a geometrical shape like a Rectangle, a Circle or a custom Path.
(2) Place it somewhere upon your UI
(3) Right-click the shape, select "Path" and then "Make clipping Path"
(4) and voulà, you've just defined a clipping area which you can modify as you are used to modify controls.
Hope this gave you an idea how to deal with your problem.
cheers.
I need to implement a Canvas which scales its contents according to its size. I know there is Viewbox, which scales everything inside of it. However I cannot use that, because some elements have a fixed size and cannot be scaled.
Also how can I bind the size of the Canvas to the parent element (for example a resizable window). There is sizeToContent for windows, I want the size fitting exactly the other way round. Also the canvas uses some drawing based on the size of the hosting element, how is redraw triggered and how can I ensure that it only draws if it gets a valid (or min) size?
If you don't specify any width or height to the canvas it automatically uses all the available space. This is because the default VerticalAlignment and HorizontalAlignment are set to Stretch.
What do you mean by canvas that scales it's contents according to it's size without scaling all the contents as some have fixed size?
Update after comments
If your drawing algorithm already scales the content to the canvas' height and width then all you need to do is to resize the canvas to fit the area I believe? In that case just remove the hardcoded height/width values and the canvas will resize to fit the container.
You might need to use ActualHeight/ActualWidth instead of Height/Width in the drawing algorithm after this though. ActualHeight/ActualWidth return the values that the layout container will give your canvas so these represents the values the canvas is drawn with.
I think you can find the answers to all your questions in my London Underground demo.
I'm doing this from memory, but if I recall correctly a Window uses either a Panel or a Canvas as part of it's ControlTemplate (in which lies the ContentPresenter), which means that a Canvas placed directly in a Window will have issues resizing automatically like it might elsewhere. There are a few basic ways to address this.
1 Write a new ControlTemplate for your Window to use. :(2 Place your content directly in the Window rather than in a Canvas inside the Window. :/
3 Do a by-name binding. :)
<MyWindow x:Name="topWindow">
<Canvas x:Name="topCanvas" Width="{Binding ElementName=topWindow, Path=ActualWidth}" Height="{Binding ElementName=topWindow, Path=ActualHeight}">
...Content...
</Canvas>
</MyWindow>
(As it happens, I often bind grids inside Canvases in this fashion, so I can easily animate items moving from one grid position to another.)
I'm working on a Windows Form in VB.NET 2005 and I would like to have some buttons with images (I'm talking about the plain, vanilla System.Windows.Forms.Button). I have everything set up the way I want it but the images are displaying too low on the button, such that the bottom of the icon is almost right on the bottom of the button and there is a lot of space above the image.
Here is a screenshot:
Button Screenshot http://www.freeimagehosting.net/uploads/b28a5c63b8.jpg
See how the corner of the icon is brushing up against the bottom of the button?
My button is 23 pixels high and the image is a 16 x 16 icon (converted to a bitmap so that it can be assigned to the button's Image property).
I've tried setting the button's Margin.All property to 0, and verified that the Padding.All property is 0. I've also tried changing the button's ImageAlign to TopLeft, MiddleLeft, and BottomLeft, but none of those settings seem to have any affect.
Does anyone know how I can position the image to be of equal distance from the top and bottom edges of the button? I can resize the button or the image if necessary but they are at my preferred size and I would like to keep them that way if possible.
I just encountered a similar problem, which I was able to solve by thinking really hard. (Ain't those situations great?)
The explanation
First it's important to understand that ImageAlign does NOT mean where on the button do you want the image. It means what point (pixel) on the image should be used for positioning. So if you pick "TopLeft", then the top-left-most pixel of the image will be vertically CENTERED on the button.
The problem comes in when you have a button with a centered image, whose ImageAlign is set vertically to "center", and whose dimensions are of an even number of pixels. Your image is 16x16 pixels- 16 is an even number. The middle pixel would theoretically be somewhere between pixel 8 and pixel 9. Since there is no pixel 8.5, VB rounds down to 8, thereby using pixel 8 as your positioning pixel. This the root cause of your unwanted upper margin.
Your button has an odd pixel height (23px) which means it has a true center pixel- pixel 12. VB tries to position the image's center pixel (8) on top of the button's center pixel (12). This puts 8 of the image's pixels BELOW center, and 7 pixels ABOVE center. To even things out, a 1-pixel margin appears above the image.
The solution
Pad the image with 1 extra row of pixels on the bottom. The image now has a height that's odd (17 px), giving the image a true center pixel which can line up perfectly with the button's center pixel.
That's how I solved the problem for myself. However, a simpler possible solution just occurred to me. You could probably achieve the same result by assigning the image a bottom margin of 1px. I have not tested this solution but it seems theoretically equivalent to the first solution.
Additional note: Two objects of EVEN dimensions should theoretically be able to center-align perfectly. But strangely enough, the alignment problem occurs even if the button AND the image BOTH have even dimensions. (Apparently the compiler is not consistent in the way it determines the center pixel of one control vs another.) Nonetheless, in this case, the same solution applies.
Typically, we'll set the following properties (for an image on the right, for example):
ImageAlign: MiddleRight
TextAlign: MiddleLeft
You'll want to align both the text and image in a similar fashion. Outside of that, make sure that you are setting the Image property, not the BackgroundImage property and make sure you are doing the icon to plain bitmap conversion properly. Have you tried a plain bitmap file?
Just a question: are you positive that the bitmap contains no information on the top of the note image? I have had that happen to me more than once where a crop looked right in Photoshop and came out incorrect in the live code... :)
If that were the case your code may be perfect ;)