I'm creating a graph with a TreeView. Below is a screen shot. So far everything is done with styling. I'm setting the TreeView's ItemsPanel to a horizontal StackPanel. (The paper clips are just place holders for items without an image.)
Notice the bottom level children are Leaves. They do not have any children themselves.
Here is the question: I want those items to go into a separate WrapPanel. The problem is an item can obviously have children with children and children without children (Branches and Leaves). The ItemsPanel still needs to be a StackPanel so you get a nice horizontal layout. But the last control in the StackPanel needs to be a WrapPanel with all of the childless children.
This is a screen shot I pieced together to show the Leaves in a WrapPanel.
Things I have tried
I've tried to create my own items panel converter, but that converts the entire items panel to a wrap panel.
I've tried to just add a separate tree view to the ItemTemplate and bind it to a separate collection, but that is not the correct look.
Something I haven't tried
The WrapPanel I'm talking about is almost like a branch. But the branch itself is empty, but contains children. Maybe I could change the style of the node based on a property. Then instead of showing a picture or whatever, it's data template would be a WrapPanel
I figured it out.
I looped through my hierarchical data set and made some changes. For each branch, I removed its leaves and added them to a new node. Then I add the node back to the branch. It sort of creates a place holder.
The node contains a property called "IsLeafCollection". It just verifies that each of its children do not have any children.
I have a data trigger that binds to IsLeafCollection. If it is true, then it changes the items panel to a wrap panel.
Below is a screen shot of the final outcome.
Related
I am using c# and i am creating a simple design where i have a user control and some components inside it like treeviews and buttons. I am trying to fill a treeview with some nodes and drag-drop these nodes to other treeview and use the buttons to also copy nodes from side to another.
The problem i am having is that when i maximize the window containing this user control there is no effect on the inside components.
I have set the Dock property of the user control to Fill.
I have changed the anchor properties of the buttons and treeview inside the user control but the behavior wasn't as expected. For example i have tried to set the anchor property for the right treeview to be Top,Bottom,Left => and the result was a disaster
I have also done a lot of combinations for the anchor property of all the buttons but nothing gave me the right behavior. I just only need to maximize the window form and the controls will be maximized with the same proportion.
It sounds like you want a "3 column" interface where you have a TreeView on either side and Buttons in the middle to allow movement between the two. Assuming this is correct, you can accomplish your automatic resizing by using a TableLayout.
Essentially, it would be like this:
Add a TableLayout and edit the rows/columns such that there is a single row with 3 columns:
The first and last column would be sized at 50% (and would hold your TreeViews).
The middle would be an absolute size of (for example) 120. This would hold your Buttons.
Set the properties of this new TableLayout to Dock -> Fill the form. This will size the entire table to grow with your form.
Add your TreeView controls to the left/right columns and set them to Dock -> Fill the respective columns. Since these columns are dynamically sized, they will grow with the form.
In your middle column, add a Panel and set it to Dock -> Fill. We add a Panel here to hold the multiple Buttons you use for movement. This Panel will not grow in size because the middle column is sized absolutely.
Add your Buttons to the middle Panel.
Without a screenshot, I'm not completely sure what you are trying to achieve but I believe this is along the lines of it. The nice thing about this setup is there is zero code involved.
I've inherited a silverlight app that now needs extending. The app sits on a map and originally had 1 text block item and a single accordion control of options. This has been extended so that the text block becomes an accordion item and further accordion item has been added with 2 sets of controls.
So my plan started along the lines of
<accordionMain>
<accordionMainItem1>
<accordion1>
<accordion1Item>
<controls>
</accordion1Item>
<accordion1Item2>
<controls>
</accordion1Item2>
</accordion1>
<accordionMainItem1>
<accordionMainItem2>
<accordion2>
<accordion2Item>
<controls>
</accordion2Item>
<accordion2Item2>
<controls>
</accordion2Item2>
</accordion2>
<accordionMainItem2>
</accordionMain>
This would hopefully give me the structure that I needed to add controls to.
Being new to Silverlight but having done a bit of XAML I made some progress but have hit a problem.
The StackPanel and Canvas that the whole thing sits on does not resize automatically as I would like. I'm unsure how to go about this but have tried Height="Auto" with no luck. What I would like would be when the 2nd accordion is expanded the panel and border underneath auto size as needed.
I have attached the full XAML here
Personally, I avoid the StackPanel for non-trivial layout of controls. I find a Grid is much more flexible when it comes to filling available space and resizing, which is normally what I want when designing an interface that will grow and shrink.
So my first step with your example would be to define a couple of rows for your grid, and place your expanding elements into a row each. Looking back at your example I see there is actually only one expanding thing: the AccordianMain, so make sure that is in a Row where Height="Auto".
What are you using the Canvas for incidentally? And why is the Grid that contains the accordians on the Canvas, and the only item in the StackPanel the Canvas?
Try and simplify your layout, I don't see why your inner Grid can't be directly placed into your Border and so can't see what the StackPanel or Canvas are bringing to the party. But maybe I'm missing something.
I have created a user control in which I have a datagrid along with other items.
One of the functionalities of these control is that through two buttons I can add or remove columns from the DataGrid.
Multiple of these controls are placed inside a WrapPanel, to display in my main application.
Now while running my application and I press the button to add a new column to the datagrid, the datagrid changes size and as result the initial user control becomes wider, which means that one of the childs of the wrappanel is wider than the other ones.
If I add multiple new lines and the user control reach the width of the application window then a scrollbar apprears below the datagrid so I can scroll and see all the contents in the datagrid.
Is there any way to prevent this behaviour?
Ideally I am looking for my wrappanel child to have a constant size, and my datagrid directly to present the scrollbar upon addition of a new column in it. Thus all the wrappanel childs have the same width.
I dont want to place a specific constant size to my user control if that is possible.
It is possible to achieve the same result with a Grid than with a WrapPanel, just a little bit less handy.
Starting from a grid you can set Width/MinWidth/MaxWidth (with star notation) and Height/.../... to get the behaviour you want.
I am making a WP7 app which has a Listbox of UserControls. Each UserControl has an ItemsControl and Button(for getting more results). On click of the button the ItemsControl items will be increased by 5 or 10.
Now on clicking on the GetMore button of any of the usercontrols except the first or last, there will be an increase in Scrollable height(Total height of the listbox) of the ListBox but the VerticalOffset(position of scrollbar from top) of the ListBox remains same. Now the problem I am facing is that the Vertical Offset is not absolute but relative to Scrollable Height. So the content being viewed till then will be changed basing on the new value of ScollableHeight.
I want to know the relation between them, so that I can do some math and set the VerticalOffset value.
I have added some dependency properties on VerticalOffset and ScrollableHeight through which I can get the events when any of them is changed. Trying to use ScrollIntoView for readjusting the Vertical Offset
Any suggestions or corrections are highly appreciated.
I am not able to find the calculation. But what can be done is listbox can be replaced by a scrollviewer which has itemsControl inside it. But the disadvantage of this is virtualisation is disabled, so will need to check on this.
But, overall this is going to give a bad experience on using such a UserControl in Listbox. So using templated list box given in WP7 toolkit is an option but it is gonna hang a bit since ListBox is not optimized for multi templated virtualization. So I started showing writing listbox item template in such a way it contains all the possible layouts which will enabled from a condition.
I'd like to change the focused node in my TreeListControl via code. For the sake of simplicity, I have this example:
A grid has two columns, left we have a TreeListControl, and at right there is a Canvas.
The TreeListControl is populated with nodes corresponding to some shapes in the Canvas (such as the shapes name, etc.).
What I already have done, is to highlight the shape in the Canvas by selecting the corresponding node in the TreeListControl.
Now what I'd want to do is the other way around: to change the focused node in the TreeListControl by clicking on a shape in the canvas.
Thanks in advance
You should set the TreeListControl's FocusedRow property to the instance of business object. In this case, everything should work properly.