Because of the way WPF works, I think this question is fine for SO and have voted to reopen it. There is a reasonable and easy answer to the question based on the technology it uses.
The best way is to use
DataTriggers on the parent element's
ActualWidth properties that sets child properties such as
DockPanel.Dock to position items based on the size of the parent element.
Another method I've used in the past is to hook into the
SizeChanged event of the parent, and alter the visibility (or other properties) of the child objects based on if they're completely or partially visible.
But I'm getting off track here.
I've made a fairly significant edit to your question in an attempt to get it reopened.
Originally, it appeared at first glance to be an extremely broad question, and that image wasn't helped by having multiple example scenarios, none of which were actual code you appear to be using.
I've edited it to remove much of the extra text, and reduced it down to just one of your example scenarios that seems to adequately describe your situation.
It should be answerable in its current form, and I've voted to reopen it. If its not reopened in a few days and the votes start to expire, you can flag it for a moderator and explain it's been significantly edited, and ask for it to be reopened.
And if it does get reopened, I'll see about writing a full answer about how easy it is to do fluid layouts in WPF.