Forums | NoesisGUI

Hey all,

I'm hoping someone can point me towards the right widgets to use to replicate behavior that exists in my current GUI. I'm trying to create a set of docked tabs on any side of the application interface, that the user can then click which will expand/reveal a tab filled with elements that can then be dragged and dropped on to a different canvas.

Explaining Ui interaction is tricky, so it's probably easiest to simply show a somewhat dated video tutorial on my current GUI: https://youtu.be/ANeBo-cII_o?t=6

I've seen some dock and tab widgets in noesisgui/wpf, but Imagine these might be largely static. Also the typical tab design in windows tends to be with fairly small text, and I'd like to have some sizable icons/text to make the tabs easy to use for touch.

I realize this is a pretty broad and open question, so I'm definitely not expecting exhaustive answers, just some advice and to be pointed in the right direction using NoesisGui.

I should note, re. drag and drop behaviors, I have seen this tutorial which looks like a great place to get familiar with drag and drop: https://github.com/Noesis/Tutorials/tre ... /Inventory
I do wonder if there are complications involved re. dragging and dropping elements from one canvas/parent to another.

Thanks in advance,
Gazoo

Minor update. I've made some head-way re. a slide in/out panel. I was hoping this could potentially be implemented in xaml only, but I've come to realize that the logic required for this to work properly is simply too complex for a mark-language like xaml (happy to hear counter points). I did find a pure xaml implementation of a button that slides a panel back and forth, however this leverages a toggle buttons checked/unchecked state to alternate behavior which is 'close but no cigar'. I want a series of tabs that either switch tabs (if not active) or slide the entire canvas in/out if the same tab is clicked. Source for toggle slide / in out xaml only example: https://www.geekinsta.com/creating-a-sl ... el-in-wpf/

I also found this possible inspirational source for the panel I wish to create:
https://stackoverflow.com/questions/518 ... t-slide-in

I believe a UserControl that contains the elements I need is the right way to go - happy to hear counter points.

One behavior I wish to implement is still a massive question mark to me - specifically, dragging a widget and have it be replaced with a different widget while being dragged. I realize that it's possible to simply have one widget change states while being dragged, but this would require some complicated widget design housing two different sets of code and I'd much prefer replacing a widget 'mid-drag'. I'm guessing it's possible to replace a widget in active xaml, but is it also possible to transfer any interactions between the widget being replaced, and the new widget replacing it?

Cheers,
Gazoo

To do the slide in/out you can use animations and just have a template for the tab header to launch the appropriate animation. It can be done entirely in xaml (see the following xamltoy), but it can probably be simplified with a UserControl with some code-behind to handle when to show or hide the tab control.



Regarding the dragging you should take a look at our Inventory sample. The key is to use a behavior in your items to enable and start the drag operation. While dragging, you will need to render a different element on the screen that will be moved with the mouse (in our sample we keep track of the element position with DragAdornerBehavior). And finally, in the destination area you will need another behavior to register the drop action and proceed accordingly with the item data received, creating a new item to be shown in that panel.

Please let us know if you need more help with this.

Hey @sfernandez

Wow - This is amazing! Thank you so much for putting together this example. It does indeed look like the type of design I was looking for. I'll make sure to study closely.

I'll let you know how I get on.

Hello again @sfernandez, and again I want to express my gratitude for you putting together this excellent example.

I'm still looking over the code and trying my best to understand how it fits together. I have high level questions regarding customizing this type of slide in/out tabbed panel. So in my use case I expect to have this sort of tab both on the top- and right-hand side of my application, with a varying set of tabs and content for each.

My hope is that using the implementation can look something like this psuedo code: I've considered two approaches:

* User Control: I don't think this is flexible enough if I want to vary the content in the different tabs. I feels more appropriate for tightly knit assembling of elements that are always used together again and again, but perhaps with slight property changes.
* Custom Control: I think this is probably the way to go and I've looked a bit at the NoesisGui example.

I'm wondering about a few high level concepts:

1. I've search a bit about how to pass on other elements into a custom control and happened upon this stackoverflow question - https://stackoverflow.com/questions/463 ... nt-support - Does this seem like the right direction to head in?

2. The example you provide denotes this property for each TabItem - "HeaderTemplate="{StaticResource TabHeader}"" - Is it possible to have the custom control 'assign' this to any tabitems used in its content?

I'll make sure to investigate the drag and drop example you mention. Really appreciate all the help so far...!

Thanks in advance,
Gazoo

Hi,

Having a simple UserControl that exposes a property to bind the collection of tabs I think will work. And as I said, maybe another property that indicates if it is hidden or expanded to handle the expand/collapse animations easier.

You will be able to use it like this, assuming your data context exposes a collection of data for each of the tabs. The user control will use that collection to bind to its internal TabControl: Then you can customize in the user control the tab control template, item template and item container style to define the look and the animations you need (similar to my previous example).

Hey @sfernandez,

Apologies for my continued ignorance, but I'm still not clear on whether it's actually possible to defined the tabitem tags outside of the default tabcontrol tags, but within the xaml?

You denote exposing a collection for each of the tabs, and while I've found some examples of defining data both in the code, as well as in the xaml, I've yet to find out if it's actually possible to simply straight-up define the tabitem tags and their content and 'import' those.

Is this a possibility?

The closest example I've come across is this one: https://stackoverflow.com/questions/244 ... ly-in-xaml

Cheers,
Gazoo