We Keep Coding

C# WinForms Panel Child Positioning Being Very Wonky?

Here is the problem. If you dynamically place controls in a panel, it works fine, but only until the vertical scrollbar appears. Once there is enough content for this to happen, it starts positioning controls nonsensically.
In my window, you can click a button to add another row of controls inside the panel, which represent options for an item in a list. If you scroll the vertical scrollbar on the panel all the way down and click the button again, the new row of controls will be positioned below the bottom edge of the panel out of view. If you scroll down, there is a huge gap between the new row and the previous row of controls. This should not happen. The positioning code is working flawlessly, as proven by debug output. As far as I can tell, the problem is the stupid anchoring system, however disabling anchoring on these controls does not fix the problem as one might expect. Instead, it just makes it position them wrong in a different manner. This makes no sense at all, and is super annoying!
I tried disabling Autoscroll in code before controls are added to the panel. No change. So I modified that code to disable both the vertical scroll bar and Autoscroll and set the scrollbar to not visible before controls are added. No change again, except that the now disabled vertical scrollbar still manages to appear usable when there is enough content in the panel in spite of it being disabled and set not visible!? That's not supposed to happen when I disabled and made it invisible! With anchoring disabled on the controls being added to the panel and once the vertical scrollbar has appeared, clicking the button to add a few more rows of controls now causes them to be indented a bit for no reason and positioned overlapping each other a bit vertically! It's as if the coordinate system in the panel has somehow arbitrarily changed, because of the presence of a vertical scrollbar and anchoring being disabled on the controls? The debug code shows that the controls are all being placed at correct coordinates, yet they appear positioned very wrongly. So my code is working perfectly, and therefore something else is the problem here.
Everything behaves exactly as expected up until the vertical scrollbar appears. This is so bizarre. Does anyone have any idea what on earth is going on with this stuff? Apparently it is far easier to make it do stupid stuff than to get it working properly.

Thanks again! I got it working. I went with TaW's solution first since it seemed like the simplest solution. Incidentally, I already tried TaW's approach days ago when I was fighting with it, but I had naturally subtracted the AutoScrollPosition value rather than add it, because I didn't expect it to be a negative value!
It seems very odd that control positioning is relative to the current AutoScrollPosition, as absolute coordinates seems like a much more natural, intuitive approach than having negative numbers. I guess that would make it slightly harder to place a control in the currently visible area, but I suppose that's not a big deal as most scrollable interfaces are probably initialized ahead of time and don't need to do that anyway.

How to set "keyboard tab borders" not to cover the rest of the UI?

I'm working on a UWP app and I'm having some trouble with the visual states of some UI controls, specifically with buttons and toggle buttons.
Basically, I'd like the borders that become visible when you press the TAB key (to navigate using the keyboard) to have the same ZIndex of the rest of the control, ie. if part of the control is covered, they should be covered too in the same way. But, it looks like these borders are always displayed on top of the UI, no matter what. Here's a screen:
You can see the border going over the rest of the UI, while the rest of that toggle button is correctly covered. The same happens for buttons as well (not only toggle buttons), see here:
I've looked at the template for these controls, but I couldn't find anything related to these specific borders, nor to anything like an explicit Canvas.ZIndex setting or something like that.
I guess this behavior is on purpose, but is there a way to change this and make those borders behave like the rest of the UI?
Thanks!
EDIT: here you can see how a reveal highlight effect is correctly covered by the shadow and the other UI elements on the right, but the TAB border ignores that and is displayed on top of them.

I have noticed similar behavior was previously present in the Start menu as well (although it wasn't with focus border, but with the reveal effect clearly "continuing" into the cut-off portion of the button.
One workaround that comes to mind is to observe the state of the SplitView and when it is closed to actually change the width of the buttons (for example via a StateTrigger). This way the button's area will no longer be "hidden" and the focus border will work properly, as the buttons will end where they should.

Winrt advanced scroll viewer content

I have the need to make a control that allows for multi directional scrolling, but only for specific elements within the scollviewer.
Something like this:
The control is split into 4 parts.
Top left is a static header, it will not move when scrolling.
Bottom left works like a listbox, only scrolls up and down.
Bottom right can scroll in all directions but needs to be in sync with the scrolling of the bottom left area.
Top right is the header for the content in the bottom right, and must be in sync as well.
There is an app on the Windows Store now called Project Timeline, and it appears they have done this with 1 ScrollViewer, but im not entirely sure how.
I've implemented a solution with 2 scrollviewers, but between the 2 scrollviewers there is scroll tearing on slower devices, and this is unacceptable.
Anyone have any ideas how this can be done with 1 scrollviewer?
PS, I'm looking for a XAML solution, not a WinJS solution.
Thanks.

Looking for days, didnt find anything, then as soon as I post this question i figure it out... typical right?
This is accomplished with:
ScrollViewer.TopLeftHeader
ScrollViewer.TopHeader
ScrollViewer.LeftHeader
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.topleftheader

Define a dashboard panel with child resize logic

I am trying to write a XAML UI in WPF where the main window container (a panel) would host children.
The tricky part is I want the children to resize when the window resizes (e.g. when it's being maximized on a screen) and I want them to occupy the maximum of the available space without stretching.
But at the same time I would like them to be allowed to wrap like a wrap panel when possible.
I have designed a quick mockup for easier understanding.
Image mockup on Imgur (25.2KB)
The top one shows a panel hosting 3 elements which all share the same width and the same height. Two are on the first line, the third one takes advantage of the 2nd line to display.
If all were displayed on the first line, they would be of a smaller width.
The bottom one shows a panel hosting 8 elements which all share the same width and the same height (smaller than in the first mockup so they can fit in one screen). The first two lines have 3 elements each while the last line has only 2.
My initial idea was to use a Stackpanel but they strech your child elements and, as far as I know, they don't allow dynamic sizing of their children depending on the number of elements.
Then I had a look at the wrappanel which does the wrapping very nicely but requires you to set the children size in order to do its magic (I might have missed something but I couldn't find a way around it).
Do you have any idea how I could implement this behaviour while keeping my pannel flexible?
The application which is going to use it will have a different number of children to put in the panel depending on the user's settings.
Ah, I forgot to mention that there should obviously be no vertical scrolling, everything should fit on one screen like a dashboard. That's the point of this panel, make sure that everything fits but displays as big as possible, with no distortion.
If you have any question, just ask.
Thank you for your help.

How to reuse WPF ScrollViewer to create my own scrollable control?

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