How to create the following user interface? - c#

A customer has asked for a user interface which combines a number of different elements. It's basically a list. Selecting an entry in the list causes a dialog to expand in-place:
Item 1
Item 2
Item 3
After selecting Item 2
Item 1
------------------------------------
| Item 2 |
| text box button |
| button |
| |
| text box button |
------------------------------------
Item 3
I know you can make some fairly complex listviews http://www.codeproject.com/KB/list/ObjectListView.aspx
How would some of you GUI experts do this? Is there a name for this type of layered interface that I could just search on to learn more about it? Can I just extend listviewitem with my in-line form? I think I just need a pointer as to how to start. I've done some forms programming but this is beyond my current knowledge.
Thanks
Edit --
Dash's comment set me on the right track as I think it's an accordion control that I'm looking for. Since he didn't provide an answer I don't know how to mark this as answered...

If you're using WinForms, there's an implementation called DropDownPanel on CodeProject that looks like what you want.
This answer to a similar question describes a possible solution using TableLayoutPanel, which you may also be interested in.

I suggest TableLayoutPanel with 6 rows and 1 column with this orientation:
Row1: Flat button with text=Item1
Row2: A panel corresponding Item1(visible false else button in row1 pressed)
....
and so on.
Note:
First row2,4,6 visible=false
When any button in row1,3,5 is pressed depend on position single row 2,3,4 visible =true else visible=false.

Have you looked at the WPF expander control? You could incorporate this into your list to create a composite control which would satisfy the 'layering' you wish to create.

Related

How to hold state of label (color, location)

In Window Forms I have TabControl with 2 tabs. On second tab I add dynamically in for loop labels from xml file based on cords in xml file. When I click on whichever label shows up new Form with three buttons (Important, Total, Address). When I choose for example important label must change color on Orange (I can handle that). My problem is how to save state (color, location) of these label which was clicked. I need that, because state of these labels which was clicked go to database. I have no idea how to save or hold it this state.
You have to make your labes referrable in code. For example by giving them unique names once you create them from XML, like "lblNode141".
Next, if you say, they "go to database" you should have a place there where you can store that information. For example, you could create a table like this:
LabelName | X | Y | Color
-----------------------------
lblNode141 | 20| 30| #577ae4
lblNode142 | 20| 60| #ff8000
lblNode143 | 20| 90| #14bfb2
Now, the next time you create your labels from the same XML, you can retrieve the chosen values from the database. Just query over the name, given that it is unique. You may need to extend those names to get them really unique, I don't have enough information about that.
Note, this is ONE possible solution - depending on what you really want to achieve, this might not perfectly fit your needs.
Solved:
In for loop I've add each one label to List, and in other Button I've check in foreach which label has color and location I needed.

WPF Bind to list of different types

I am running into an interesting challenge related to WPF Data Binding.
I have a form where I want to show a few different options. I am using radio buttons and showing these four items is working great:
Not Selected | No Agreement | Joint Custody | Sole Custody
In the case that Sole Custody is selected, I have a combo box with a list of parents in it and the user picks the parent. This is also working find.
Now, I want to change things so that the "Sole Custody" radio button does not show and, instead, the list of parents are shown as radio buttons, that way I have something like:
Not Selected | No Agreement | Joint Custody | Bob Smith | Jane Doe
I am having a hard time figuring out how to make this happen. Does any body have any examples?
Thanks!
You have several options to make it. I would mention the most two reasonable solutions for me.
You should create a collection which includes all possible selections ( Not Selected | No Agreement | Joint Custody | Bob Smith | Jane Doe )
Create MultiValueConverter that takes (Not Selected | No Agreement | Joint Custody) and parent names and returns a combined collection
Than, put a ListBox in xaml without any UI ( as proposed by ganchito55 ) and bind the collection to ListBox.

Get the selected subitem in a listview

I am trying to find the selected SubItem of a ListView.
I have a ListView with the following properties
View = Details
FullRowSelect = True
GridLines = True
ShowItemToolTips = True
MultiSelect = False
I then add 3 columns and multiple rows, each with 2 subitems to populate each of the columns. I end up with a ListView looking something like this
Header1 | Header2 | Header3
==========+============+===========
Item 1 | Sub1Item1 | Sub2Item1
Item 2 | Sub1Item2 | Sub2Item2
Item 3 | Sub1Item3 | Sub2Item3
If I hover over a particular item, say Sub2Item2 it will give me the appropriate ToolTip "Sub2Item2". However I want to catch an event either a mouse click or a mouse hover and get the associated SubItem so I can use it's Tag property to do further processing.
I have checked the args for ItemMouseHover() event and can't find anything to do this, nor can I after searching around online.
[Edit to clarify] I am trying to hook an event such as SelectedIndexChange or MouseUp (any mouse click related event is fine) and get the current selected SubItem. Think of it like a spreadsheet, when I click a cell (SubItem) I want to get the cell itself (SubItem) not the entire row (ListViewItem)
I think the ListView.HitTest method is what you're looking for.
In your case SelectedItems property should work until Hover comes into consideration. for hover event there is a property called HoverSelection.

sorting subset of rows in datagridview

I'm trying to hack together a datagridview in c# that can handle hierarchical data (currently just 2 levels) since I couldn't find a 3rd-party control that worked and looked exactly as I needed it to.
I've managed to get expand/collapse and global sorting working (sort by top level group, then sort within each group) but I want to add a feature where you can sort just within a top level group. so imagine a 2-column example, e.g.
column1 | column2
group 1 | 6
group 1 a | 1
group 1 b | 2
group 1 c | 3
group 2 | 15
group 2 a | 4
group 2 b | 5
group 2 c | 6
I want the user to be able to double click the "15" cell, and have it sort just the "group 2 X" rows, with all other rows staying exactly where the are. each cell's tag tells it what it's parent is, so I know whether the given pair of rows are part of the same sub-group. I can't quite figure out the logic though. I tried setting SortResult = 0 for any pair of rows not in the same group, but I still have to handle cases where one row is in the subgroup and one isn't. any ideas?
You can place a datagrid inside a column. I think this will achieve what you are aiming for
figured it out - I had an && condition where I should have had an ||...
basically if the either of the pair of rows to be compared are not in the same subgroup, simply set SortResult to reflect which one is currently displayed before the other, making sure to flip the result depending on an ascending or descending sort. if both rows are within the same subgroup, then sort the as usual. now to clean up my messy code :)

Same asp:GridView in different ajaxToolkit:TabPanel

I have to filter GridView data based on the Tab Panel selected,
Here is the scenario:
I have the following tabs
All | Tab A | Tab B | Tab C
When I click on "All" tab, I get 10 records and my GridView contains 10 records,
But when I click on Tab A, my GridView need to filter and show 5 records
Right now, I am using the separate GridView for each tab and binding to same DataSourceID.
And using OnActiveTabChanged event to filter the data, but this is invoking underlying method to-execute 4 times (because of 4 tab panels), no problem with the user experience but
there is performance issue...
I am trying to see, if I can use the :
Same GrigView in all the Tab Panels for this type of scenario
Any help is much appreciate, thanks!!
If you want to use a single GridView on all tabs, try invoking the underlying method (that populates the GridView) in OnPreRender instead of OnActiveTabChanged. Make it conditional on which tab is active, and filter accordingly.
You can use the RowFilter property on a DataView and have each tab apply the one you need.
ie DataView1.RowFilter = "Column='ColumnValue'" then set the datasource/databind.

Categories