I started my app by placing rectangles and other objects on a stackpanel. That worked will until I wanted to split my rectangles and have two columns of rectangles. The vertical stackpanel worked well until I needed to split my rectangles into two columns and put stuff on the left and stuff on the right.
So I converted to a canvas. Now
mainCanvas.Children.Add(grid); // seems to replace what the last Add placed on screen. Any ideas how to control the position of items added to the canvas?
Edit:
Ok clearly a canvas is the wrong panel to use. Two column's of stackpanel's might be made to work. But when I look at what I am actually trying to accomplish, the column's aren't limited to two, but could be n number of columns. Why? Because the application is a flowchart style app that builds a custom language script. The diamond decision shape splits one column into two which can split into two more extra.
I wonder about using a single stack panel and just making a grid with multiple grids horizontally in it. But mouse events would have to be smart enough to know which grid in the grid your actually in. Not undoable I think, but not trivial...just looking to see if there is a obvious use this choice that i am missing by being a wpf rookie.
Edit2:
The issue I have with just using a grid is that when the window is stretched a
grid does not resize to the new window size.
making a grid of multiple other grids, then using isMouseOver to test to see which grid in the single child of the stackpanel actually needs mouse highlighting works.
Related
I have a WinForm form that has two DataGridView controls paced on it such that they are stacked, one above the other against the right hand side of the form.
I would like a way of setting them so that when I expand the form, they expand height-wise with it, as well as width-wise. I managed width-wise by anchoring them to the left and right sides and anchoring the top one to the top and the bottom one to the bottom. However, from here I'm not sure how to get them to use up the space in the middle that appears when the form maximizes...Maybe an image will make my meaning clearer:
Normal Size:
Maxmized; I'd like the grids to expand to take up the full height of the form between the two of them as the red arrows show:
If this question is blindingly obvious I apologise and can only say I didn't really know how to phrase it properly and so found searching for it on Google unhelpful!
You have two options:
TableLayoutPanel or
SplitContainer
The former lets you create a table of many columns and/or rows with various sizing options from absolute and percent to autosize. This is very powerful for layout; but in other respects TLPs are somewhat restricted as the 'cells' are only virtual..
A SplitContainer offers only two panes but lets you treat each with all the things you can do to a container: add one or more controls, anchor or dock them, give each pane a BackColor and make use of its event model.
So if you need just two controls of equal size that adapt to the form size like you showed in the question, a SplitContainer is maybe the better option.
Set the splitter to fixed and make it smaller, anchor the SplitContainer to all sides and drop the DGVs into their panes and Dock them to Fill.
You could also make the splitter moveable to allow the user to resize the panes; if you do that do make the splitter width larger..
Also make sure that the FixedPanel is set to None so that height changes are shared.
Hint: If you want a few more panes to share the space you can nest several SplitContainers.. But for larger numbers do consider switching to TLP!
I am new to WPF. I want to draw a simple 2 rows by 2 columns table inside a Canvas. Can I use a 2x2 Grid to do this? One obvious problem is that the Grid stays 'invisible' in the Canvas, probably because it is meant to hold other visual controls ( instead of being visible itself, which is what I want). If Grid is a bad idea for this 2x2 table, please advise the correct method.
The grid panel would be a quick way to draw this. In order to give the visual appearance of a grid I would recommend putting a border inside each one of the cells and setting its borderthickness and borderbrush.
There are many other ways to accomplish this but for something this simple the above method should suffice.
I am trying to write a XAML UI in WPF where the main window container (a panel) would host children.
The tricky part is I want the children to resize when the window resizes (e.g. when it's being maximized on a screen) and I want them to occupy the maximum of the available space without stretching.
But at the same time I would like them to be allowed to wrap like a wrap panel when possible.
I have designed a quick mockup for easier understanding.
Image mockup on Imgur (25.2KB)
The top one shows a panel hosting 3 elements which all share the same width and the same height. Two are on the first line, the third one takes advantage of the 2nd line to display.
If all were displayed on the first line, they would be of a smaller width.
The bottom one shows a panel hosting 8 elements which all share the same width and the same height (smaller than in the first mockup so they can fit in one screen). The first two lines have 3 elements each while the last line has only 2.
My initial idea was to use a Stackpanel but they strech your child elements and, as far as I know, they don't allow dynamic sizing of their children depending on the number of elements.
Then I had a look at the wrappanel which does the wrapping very nicely but requires you to set the children size in order to do its magic (I might have missed something but I couldn't find a way around it).
Do you have any idea how I could implement this behaviour while keeping my pannel flexible?
The application which is going to use it will have a different number of children to put in the panel depending on the user's settings.
Ah, I forgot to mention that there should obviously be no vertical scrolling, everything should fit on one screen like a dashboard. That's the point of this panel, make sure that everything fits but displays as big as possible, with no distortion.
If you have any question, just ask.
Thank you for your help.
Following the guide here, I have created a full-screen WPF application. But I met a problem: the various size & resolution of screens. For example, I want to put several sprites on the screen as buttons; but they are located at different positions in each screen, and even different to what shown in the XAML designer.
I have searched all over without a clue got. How can I fix this problem? (to make the buttons appears the exact place (in the center), and better, help the xaml designer reflect exactly what will happens when the program is running). Any help will be appreciated.
UPDATE: I'm defining my page as a Canvas inside the Window element. Actually I like Canvas more, cause I can easily put my sprites anywhere, not like a grid.
In general, you should not use pixel values in WPF.
Instead, you should layout your content in <Grid>s with rows and columns, and it will automatically expand to fill the screen (based on the alignments and row / column definitions).
Avoid using the canvas. Also, do not rely too much on the designer to build your layout. Using Grids, Stackpanels and/or Dockpanels will give much better results (and scale when resizing your window). For example, if you use only the designer and drag-and-dropp all your elements, the designer often puts huge margins a bit randomly and this will not always scale properly if you resize your window.
I'm developing a WPF application. In this application, I have a Window which contains a WrapPanel. Inside the WrapPanel are a series of StackPanels which have varying heights, but all the same width. The number and size of the StackPanels is not known at design time (they are generated dynamically).
These StackPanels normally stack fine on top of each other, and then "wrap" to another column when there is no more room in the WrapPanel. To achieve this, I had to set a fixed height for my WrapPanel (with the height set to "Auto", it would continue down the page instead of wrapping to another column). However, when by chance I have a StackPanel that is too large to fit in the WrapPanel height, it is simply truncated. An image of this situation is below.
My question is, can I query the height of each StackPanel before I Show() this to the user, and set the WrapPanel height based on the largest StackPanel? Is there a better way to do this?
First, have you ensured that this issue is not caused by the WrapPanel reaching its maximum available dimensions (i.e. if its size is being constrained by its parent Window or element)? Because if this is the case, then you'll need to either look at restructuring your overall layout, or wrap it in a ScrollViewer.
If the above is not the case, and the WrapPanel has plenty of room to 'grow', this does indeed seem like a strange issue. You say the StackPanels are generated dynamically. So in your code, you must be calling myWrapPanel.Children.Add(stackPanel). After this line of code, you could try adding something like the following:
myWrapPanel.Height = myWrapPanel.Children.Cast<FrameworkElement>().Max(e => e.ActualHeight);
EDIT: just realized this will only work if a single StackPanel takes up the entire height, as in your image. but perhaps it will start you on the right track!