Free Windows Forms Components Similar to jQuery UI Draggables - c#

EDIT:
So, I ended up making my own basic solution to this problem, and it can be found in my own answer to the question below. Or, here's a link.
Original Post
I'm doing some UI programming for a small .NET application. The application has some collections of items that need to be displayed in a grid sort of format (X columns by Y rows) and the grid elements need to be able to get dragged around to different grid locations, and possibly out of the grid all together.
The most comparable sort of UI design elements I can think of are the jQueryUI Draggables.
Do I have to roll my own or are there components people have already written to act like this? Even better, are there any free components? Or is there an easy way to do this that I just don't know about (don't do a lot of .NET UI programming..)
Also these "grid items" need to be able to include windows form components. The DataRepeater control is close to what I need, except it only supports horizontal or vertical alignments, not grids of items.
Here's a visual example of what I'm looking for:
I tried to stick with a halloween theme here.

Well I rolled my own solution and hosted it on GoogleCode:
draggableitemorderedpanel- A .NET Winforms Component... Kinda like jQuery UI Draggables (not really, maybe someday)
here's a screenshot:
(source: googlecode.com)
and another just resized:
(source: googlecode.com)
Hope this helps someone else out. Also it's super basic and pretty sucks right now but gets the job done.
Anyone that wants project access can have it.

The System.Windows.Forms.TableLayoutPanel control supports dragging and dropping, you just have to handle the right events. You could make your own "GridItem" user control, with the icon, caption, background color, etc displayed on a Panel, and then plop a bunch of them in the tablelayoutpanel, and wire up some event handlers. Here's something similar:
http://social.msdn.microsoft.com/Forums/en-US/Vsexpressvcs/thread/1cade626-b76d-40c5-9e5a-101cf2a5e412

Related

How to make custom form control in c#

I was trying to do something in visual studio the other day when I realized, if I could just make a form control to do it for me it would be allot easier, except I have no idea how to do that, I want the form control to have grids, each square having its own color property, if anyone knows how to make form controls, or even better knows how to make something like what I just described, I would be very happy :D
This MSDN article is a basic step by step outline of how you can write a customer control.
Unfortunatly MS has not figured out how to do avoid link rot -- so you may need to search creating custom winform controls to find this if you come in the future.
You are usually best servered by subclassing an existing control and customizing it.
You might also find some of the freely available winform control projects a gold-mine of useful info if you get serious about this.
However, it sounds likely what you should consider doing is creating a "User Control", this is usually simpler for a composite of few existing controls. This
article on the types of controls for winforms may be a useful overview for you.
Beyond that you really should use S/O if you are trying to resolve a specific problem you are having when you are coding. Google is a more appropriate tool for finding tutorials, etc.
1) Inside your project: Solution Explorer --> Right Click the .csproj --> Add UserControl
2) Drag and drop gridBox or any control you want into your custom control.
3) Check the ToolBox, your custom control should be located at the very first selection

WPF layout changes (Fill, Full, Snapped)

I am working on a Win8 app destined for the Windows Store. Hurdles I am trying to overcome is how to deal with the different ways an app can be displayed.
Currently, my main pages is a LayoutAwarePage so it has logic to handle different visual states. However, my question is more how to make my page render differently depending on its state.
I thought, initially, that you basically created a layout for each state that the application supports. But it seems like the VisualStateManager portion of the XAML is just an area where you make piecemeal modifications to the design (hide an element, change an alignment).
I am working with a grid that has many columns and rows to organize my controls and it looks great in fullscreen. However, this doesn't work at all in the snapped state, as most of my controls become hidden off screen. I could certainly add a ScrollViewer control, but this is basically a hack and a usability nightmare for a user.
Thanks for any insight!
It might be that your app doesn't lend itself to snapped view. You are allowed to simply display a message / image that states this. Alternatively, consider just showing the columns that are most important.
The standard MS way seems to be to replace horizontal oriented controls with vertical ones - maybe a listview or something would look better. You'll probably find your code easier to read if you have one control for snapped and another for full screen.
Not exactly related to your question, but Blend works very well with XAML to allow you to manipulate the grid or show the relevant control.
Here is a very good guide from Jerry Nixon.
http://blog.jerrynixon.com/2012/12/walkthrough-implementing-snapview-in.html

Switching controls based on Combo Box Value

I am looking into developing a GUI that will switch the controls based on the value of the selected combo box item.
I have tried adding a different canvas or grid to the gui designer in visual studio but it comes hard to manage as everything overlaps each other in the designer and is hard to know what's what.
Is there an easy way that I can do this, is there a particular control that makes this easy to achieve. I don't really want code the gui in c# and not use xaml.
What I was hoping to do is that all the controls are in there own panel and when the combo box value is changed one panel is removed or hidden and the other is shown.
How can something like this be achieved.
Thanks for any help you can provide
You could implement each different "mode" as a separate UserControl.
Then have a shell with the combobox, where the combobox OnChange will swap out what UserControl is plugged into the shell.
Any other totally common components such as OK/cancel buttons could be part of the shell.
A completely alternative implementation to consider is a tabbed approach, but that probably only flies if it makes sense for the user to act on several of them.
What will you do if the user selects A in the combo, makes changes in UserControlForA, and then selects B in the combo? Could be an annoying corner case, and if this is production code the sort of thing that you'll get future user requests to change how it works.
If you're sure of the design go for it. If not, I'd play around with a few apps and try to find a nice example of the same sort of thing, and consider how they approached it.
But techwise I think a UserControl is what you're describing.
(Edit: crud just saw the xaml/wpf in the question, not sure this is correct in that context, clueless there)
You can use DataTemplate for each different mode.See Different item template for each item in a WPF List for more information.

Developing wizard UI - WPF

All in WPF:
Developing a wizard application, user has to answer a number of simple questions before brought to the main app. The main app is then prefilled with the information obtained from the wizard.
I started with a Window which I then planned to add usercontrols to. The main window would have the user control in the first row, then Next and Previous buttons to control moving between the controls in the second row. This way I could easily control the logic to switch between screens like:
WizardControl1.IsVisible = false;
WizardControl2.IsVisible = true;
But for some reason, user controls do not have setter for IsVisible. Hurray.
So then I thought I would just use seperate windows for each section of the wizard. The problem with this approach is that now when stepping between, the window opens in random positions, and by steppign through the wizard with next, the next window pops up randomly which is really distracting and frustrating.
So how can I develop a wizard properly? I don't get why this is so hard...not exactly rocket science... replacing text and controls and storing input after pressing next/previous!
Thanks
Check this link:
http://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx
This is the article about building wizard in WPF by Josh Smith, it's seems to be nice pattern.
I found it's helpful for me, hope you'll too.
There is also an open source Avalon Wizard control on codeplex.
I'd probably aproach this using data binding and template selectors. Have the wizard form bind to a "WizardData" class, which exposes a list of "WizardPage" base classes.
The WizardData class can expose properties defining the correct info on the forms, and display a control for the main page that uses a template selector to determine the proper control to display based on the actual type of the particular wizard page.
It sounds like more work than it is, really. It also gives you the benefit of good separation between code and UI (all "work" is done by the WizardData and WizardPage classes), and the ability to test logic independent of the UI.
It's also a very WPF/MVVM way of approaching the problem.
I recognize this does not directly address your question, but I thought I'd mention it as a possible alternative. I've used Actipro's Wizard control with pretty good results, and when I have needed support, they have been very responsive. I am not affiliated with them in any way; I just like not having to write the plumbing to manage a wizard.
The property is called "Visibility".
I find that I do better when I dynamically add and removing controls rather than hide them.
I was looking for a Wizard solution too. I have the need to stick with stock WPF components so I implemented the wizard using a standard form and a tab control.
I only hide the tabs at runtime so there available in the IDE. At runtime just use Back, Next, Finish... to navigate thru the tab items
works good

How can I create a button with an embedded close button

I am trying to create a panel which will have a set of "buttons" on it.
These buttons should have the following behaviour:
Appear similar to a tag (with
rounded edges)
Contain a red
cross to remove the filter/tag from
the panel, similar to the way internet
explorer tabs have an embedded cross to close the individual tab.
allow the user to click
on the tag and respond like a normal
button (as long as the click is not
in the red cross)
Number 1 is no problem, this is just appearance, however, regarding numbers 2 and 3, I am not sure if there is already code out there do to something similar...and I dont really want to reinvent the wheel if I can avoid it!
My question is: Does anyone know if there is something out there in infragistics which will do this simply, or will I need to write this myself by subclassing winform buttons?
Thanks in advance!
Is this new development or maintenance of an existing project?
If it is maintenance, you have a somewhat tougher time ahead. You'll implement a UserControl, probably segmented into two buttons. Use docking to get the behavior as correct as possible. The far right button would contain your cross image; the left (which would need to auto-expand as you resize the control) would contain your primary button behavior. Play with the visual styles until you get them right (EG, removing borders, etc).
If this is new development, and you haven't gotten too far into it, you might consider using Windows Presentation Framework (WPF) instead of WinForms. It will be easier to build the control and get it to look exactly how you want it. WPF includes an extremely powerful control compositing system which allows you to layer multiple controls on top of each other and have them work exactly as you'd expect, and it carries the added advantage of allowing full visual control out-of-the-box.
Either way, this is more work than dropping in an external component ... I've used Infragistics for years, and I can't think of anything they have which is comparable. The closest, but only if you're building an MDI application and these controls are for window navigation, is the Tabbed MDI window management tools -- and there, only the tabs (which replace window title bars) have this behavior.
I don't think that infragistics can do something like this. The UltraButton control can't.
Implementing a own control wouldn't be that hard.
your probably going to have to make a costume control for this type of work.

Categories