Is there any way in WPF to set X and Y coordinates of an image relative to it's parent grid?
Not using the setRow or setColumn, but X and Y.
This is not what the Grid control is for, that's what Canvas does. What you can do is add a Canvas control that spans all rows and columns of the grid, and then use the Canvas.X and Canvas.Y attributes to set the position.
Try Margin property to create space around element.
Margin can be set in formats "Left, Top, Right, Bottom" (e.g. Margin="10,20,10,20") or "LeftAndRight,TopAndBottom" (e.g. Margin="10,20", equal to previous example) or just one value for all sides (e.g. Margin="10"). X and Y will be Left and Top.
Panels (Grid, StackPanel, etc) respect Margin settings.
XAML designer in Visual Studio uses Margin,Width and Height to locate elements in a fixed positions, when drag and drop controls from Toolbox ("nails" them to one place, not very nice for adaptive desing).
Using Margin,Width and Height together is similar to using Location and Size to position WinForms controls
Related
I have a vertical gridsplitter with a column width of 10 pixels. I've floated an icon over the top of it, and using a multibinding, this icon stays centred on the gridsplitter (so it follows the gridsplitter as it's dragged left and right).
Is there a way I can (a) allow the user to the drag the icon only left and right within the grid (I'm guessing by tracking the delta values?), and (b) bind the grid column widths to its position, so that the gridsplitter effectively follows it?
I can see a very rough solution in my head, but I'm wondering if I'm overcomplicating things - maybe there's a simple way to do this through binding?
I have a WPF application. I am trying to create a ellipse toggle button. I wanted to have a textbox in the ellipse with two images next to each other below the textbox. In my other buttons I have added a grid with two rows to achieve this.
However it doesn't like it when I try to add a grid to an ellipse. "The type ellipse does not support direct content". What does this mean? Is it possible to do what I wish?
This particular error really couldn't be too much clearer:
The type Ellipse does not support direct content.
The Ellipse Shape is not a ContentControl. Therefore, it does not have a Content property. This means that you cannot add any content to it.
What you can do is to add a Grid with no columns or rows defined and add your Ellipse into the Grid. Then you can overlay other UI elements in front of the Ellipse, which may appear as if they were inside it.
A WPF application consists of a uniform grid of arbitrary size. Each cell in the grid contains a canvas. Each canvas is a target for a drag and drop operation.
When I drag another canvas and drop it onto a canvas inside the grid I want the top left corners of the dragged canvas(source) and the target canvas to align, essentially placing the source on top of the target. The behaviour I'm looking for is a snap-to-grid effect.
Currently when I use element.GetValue(Canvas.LeftProperty) the result in NaN. The problem is to determine the position of the corner for a canvas inside the grid, but relative to the entire window. I would prefer to use the grid, as it automatically resize as the window resize.
Is it possible to get the actual position of a canvas inside a grid even when the grid size changed or alternatively specify a canvas to be aligned to another canvas inside the grid?
This problem was solved by drawing each canvas onto another canvas by specifying the top and left properties of the canvas, I had to scratch the grid. I specified the position of every canvas by using
Canvas.SetLeft(Me, position.X)
Canvas.SetTop(Me, position.Y)
where Me is an instance of the canvas.
It is now easy to get the top and left properties of every canvas. The only problem now is I have to implement the resizing of every canvas manually.
I have read that placing a canvas inside a scrollviewer won't work because the canvas does not report its size. I have been experimenting with different containers (borders, grids, canvases and scrollviewers) and could really do with a simple explanation of how scrollviewers behave within nested containers. e.g. If I have a container hierarchy of UserControl>Grid1>Canvas1>ScrollViewer>Grid2>Canvas2 should scrollbars appear around Grid2 when Canvas2 becomes wider than Canvas1? (or indeed wider than UserControl) If not, how should I organise my containers so I can add loads of uielements to Canvas2 and have scrollbars appear as necessary. (My usercontrol width and height are set to 100%)
Canvas will work with a ScrollViewer if you explicitly give it a size. The problem comes from the fact that if you don't supply a Height and Width for any control it will try and determine it's available area based off it's parent container. A ScrollViewer however has infinite available area.
Take a Grid for example. If I define a Grid that has 2 Star Width columns and 2 Star Height rows. How does the Grid know how wide each of those columns should be? The star says they should be half of the available area, but inside a ScrollViewer the available area is infinity.
What controls are you adding to Canvas2? If you are adding them with fixed positions than the ScrollViewer will expand to house all elements. If you aren't giving them fixed positions than all the controls will stack on top of each other, because that is the arrange behavior of a Canvas
I would like use a panel whose children have coordinates specified as percentage of total panel's width/height. Moreover, I should be able to animate the coordinate property, for example to make a button move from 10% to 50% panel's width.
I've made 2 attempts:
Use a Grid and specify size as stars - this was not enough, because AFAIK by default WPF cannot animate distance properties specified by stars. I've found somewhere a custom class that enabled me to do so, it even worked, hovewer I consider that solution overly complicated an I am looking for something simpler.
Use a Canvas with fixed width and height and put it inside a Viewbox - this is a simple solution, but when resizing the Viewbox the whole content of Canvas is resized too. I want the content to have fixed size.
Is there a simple solution or should I implement my own panel (or maybe extend one of the existing ones, i.e. Canvas)?
Cheers!
I would:
subclass Canvas, perhaps calling it RelativeCanvas or RatioCanvas
add two attached properties: XRatio and YRatio
override ArrangeOverride and loop over all children. For each child, use their XRatio and YRatio along with the ActualWidth and ActualHeight of the RelativeCanvas to calculate and apply values for their Canvas.Left and Canvas.Top attached properties
You would use it as follows:
<local:RelativeCanvas>
<!-- the top-left of this button will be center of panel -->
<Button local:RelativeCanvas.XRatio="50" local:RelativeCanvas.YRatio="50"/>
</local:RelativeCanvas>
One thing you might like to add after you get that working is control over alignment. For example, I might to align the center of a control to the specified ratio, not its top-left corner.
There's one here: WPF Proportional Panel