I'm trying to improve the graph drawing control that comes with Graph#. It's good, but things get out of hand when you start dragging nodes around. This is my first encounter with WPF, so this is probably a newbie question. :)
I have the GraphCanvas control which has nodes and edges on it. They can be dragged around which changes their coordinates, possibly making them negative. I would like to add scrollbars to the control which would allow to see how big the canvas really is.
To this end I'm thinking of putting the GraphCanvas inside a ScrollViewer. Which would be pretty easy and straightforward if not for one problem. I may not resize the GraphCanvas itself when a node is dragged outside the borders or this will mess up dragging bad. That is also the problem with the original control (check it out, it comes with a sample application).
It would be good if I could bind the scrollbar size/location to properties of the GraphCanvas, so that the ScrollViewer would not scroll anything physically, but just set the properties of GraphCanvas. That in turn would perform all actual calculations and scrolling.
How can this be done?
OK, I found it! Three easy steps:
Implement System.Windows.Controls.Primitives.IScrollInfo on your custom control;
Add your custom control to a ScrollViewer;
Set the CanContentScroll property on the ScrollViewer to True.
Voila!
Check out this link straight from MSDN. It talks about composing several controls into a single Composite Control:
WPF: Customizing Controls for Windows Presentation Foundation
Related
Alright, so I'm trying to figure out the best way to accomplish this for my rather unique case. I have a fullscreen WPF application where controls are added to a Grid dynamically and the user is given the option to freely move/resize them. The controls can be individually moved or resized anywhere on the parent Grid but I have prevented them from overlapping via their MouseMove events. They also cannot be moved outside of their container. Since the app will be running on machines with different monitor sizes, I need to take that into consideration when making the original layout. I have an initial layout that I would like to use, but it would seem that I'm out of options:
I first tried using rows and columns just to (initially) place the controls that are added. This method places them correctly but becomes a problem when I need to move or resize the elements because the control is already assigned to a particular row and column. I could try to use this method and then remove any rows/columns after placing the controls, but I don't think that would work well.
I've also considered a Viewbox, but that's not practical in my case for fairly obvious reasons (as it merely resizes the controls to fit the screen). I'd prefer not to use this because I would only need it to standardize my initial layout. That's it. I also don't want to mess up any text that will be displayed on the window.
So yeah, this is more of a "best practice" question because any solution I can think of would not look very professional or elegant. Feel free to ask any questions if you need clarification.
Edit: As an additional note, I'd prefer to stick with a Grid as opposed to a Canvas as my container.
Edit 2: Just to be clear, I would not need the specific (inital) layout after the first launch. When the program exits, the layout (Margins, Width & Heights, etc. for each element) is saved to a file to use for the next launch.
I've developed a number of kiosk/interactive applications using WPF. If you are trying to show the element transitions (while moving), then it might be best to use a parent Canvas and bind the Canvas.Left and Canvas.Top properties. You can mimic the grid alignment, using a Canvas, if you put in place mechanisms (e.g. Manipulation/Mouse events, converters) to make sure that the Canvas attached properties adjust to the row/column offsets.
It is not uncommon at all to use the Viewbox to mitigate display differences (and your use case is not "rather unique"). You set the Viewbox to a target resolution (e.g. 1920x1080) and allow the control to fill the available space. The other alternative would be to dynamically apply a content template based on the application window size/ratio.
After looking at multiple options, I've decided to just use a calculation to (sort of) simulate the behavior of rows/columns. Because my application is fullscreen, I can take my SystemParameters.PrimaryScreenWidth and SystemParameters.PrimaryScreenHeight to orient my layout. Using a combination of universal padding (static values) and ratio-based calculations (dynamic values), I can smoothly set my initial layout.
For instance, I'm dividing the width of my monitor by 6 (rounded up to avoid decimals) and using that (minus half the control's width) as the control's Margin.Left property, centering it on a 'column' of sorts.
Honestly, my initial layout is fairly simple right now, so we'll see if this will suffice going forward. Thanks to everyone who contributed to the question, and sorry if I was unclear on what I was asking.
What would be the best way to make a WinForms application fully scalable, for example when the Form resizes?
In WPF i would use something like a Viewbox and/or a UniformGrid, but something like this doesn't exists in WinForms.
Is there an easier (and maybe faster) way to rescale controls on a from after resizing it, instead of resizing them all by calculating their new Size/Location etc.?
Thanks in advance
In Windows Forms, you use the Anchor and Dock properties for each control.
Here's an article about using them: http://www.techrepublic.com/article/manage-winform-controls-using-the-anchor-and-dock-properties/
You should also look at FlowLayoutPanel and TableLayoutPanel
you can use anchor and dock, depending on your need:
Anchor - the edges of the container to which a control is bound and determines how a control is resized with its parent.
Dock - which control borders are docked to its parent control and determines how a control is resized with its parent.
for further read: Dock and Anchor
Have a look at the Anchor property found on pretty much any control. This allows you to lock a control to any (or all) of the four borders of a window.
Once one distance is anchored (e.g. Top or Right), the control will always try to keep that distance, no matter how you resize your window.
For example, you'd set Anchor to Bottom and Right for a button that is supposed to always stay in the bottom right corner of a window. A text box, that should always fill the window from left to right would use Left and Right.
Similar things can be achieved utilizing Dock, but a docked control will always try to fill as much space as possible (there are different strategies available, like "fill everything from here and upwards) based on its container. Depending on your use case, this can however be a lot harder to control (and I usually only use it if I want a single control to fill a full window, e.g. a TextBox).
If you need more complex alignment, like widths scaled on some kind of ratio (e.g. 30%), then there are several different containers available.
I used many expander in the WPF application.. but I face some troubles:
When I try to put them below each others, the upper one expands automatically and makes it difficult to put the net one below it.. So I should separate the upper one in any place until I put the lower one then move back the upper one again. Can I keep expander unexpanded to make it easy to put any controls below it?
When I press ctrl+f5 and expand one of them, I see it has a transparent background and makes interruption with the lower ones - how can I avoid that?
I used scroll bar inside expander, but it doesn't work when i press ctrl+f5. I have an inactive scroll bar. How can I make link between scroll bar and expander to be able to move items inside expander up and down?
This is a picture to explain what I mean.
have a look at ths tutorial, it covers stuff like this, The Expander can be a tricky control to deal with sometimes, but once you understand the the expanders layout it becomes a bit easier.
http://blogs.msdn.com/b/wpfsldesigner/archive/2010/02/03/taming-the-wpf-expander-control.aspx
I just wasted my entire evening on something which I thought would be very simple but it seems WPF and Google are letting me down completely.
I need a grid, 6x6 of which I fill every row and column with a custom control. I want to be able to navigate through this grid via the keyboard (I can get those events, no problem) but I cannot seem to find how I can always have the selected grid row/column in the center of my window.
I found some carousel alike implementations, but most of them only work in a single direction and I want two way navigation, yet none seem to support this nor can I extend them to do this.
I essentially want to create a PSP alike grid navigation.
One easy way is to do this:
Create a scrollable form.
Add a 6x6 grid of child controls.
In the GotFocus (or similar) event for all the controls, set the parent form scroll offset to an appropriate position to centre the child.
This is pretty straight-forward thing to implement, with a little bit of maths to work out how to centre the x,y position of a control by setting the scroll offsets (it can be tricky/confusing, but as long as you understand the coordinate systems used for scrolling, not too bad)
Or, another approach that avoids scrolling via the windows APIs and using custom controls:
Create a form
Override OnPaint to draw your grid of 6x6 "controls" as simple graphical shapes or bitmap images centred on the selected "control".
Handle keyboard (KeyDown/Up) and mouse handling (MouseDown/Up) events to make the 36 areas of the graphic respond to user inputs in the way you desire. You'll have to track the selected item and force the window to redraw its graphics to show the new state. Enable double buffering to stop it flickering.
The first approach gives you a lot of windows-based handling for free (tabbing between controls, remembering where the input focus is, and directing events to separate classes for each "control", for example). The second approach strips away all this "help" but gives you complete control over everything, which can often help avoid unintended behaviours (e.g. it won't move the input focus when the user presses Tab unless you specifically write the code to make it do that).
The closest I can think of using is the GroupBox control which has a custom drawing at the top identifying the panel.
Is it doable? I have done independent custom controls like buttons, sliders, color pickers, but not totally sure if this sort of drawing can be done on a GroupBox?
I would need the grouping of a GroupBox or a TabPanel.
Are there any alternatives on the net that I can use?
Just exploring the alternatives before I start doing it.
A technique we used was to create multiple panels docked to the top of a frame and set their height to zero. Then when we wanted to display a panel we set its height correctly. Winforms automatically reflows other panels to accommodate the new one.
You can also create a recurring timer to trigger every few hundred milliseconds that increases the panel's height by a few pixels until it reaches full size. This creates a nice animation of the panel expanding into place.
See how others have done this. Code Project's got a bunch. Try searching there.
I used this one a while ago and liked it:
Windows XP style Collapsible Panel Bar
Why not just create a composite control? Something to the effect of.. 2 panels or a label and a panel or whatever suits your needs. Drawing it wouldn't be all that difficult but seems overly complicated for your desired functionality. Am I completely missing the mark?