WPF Wrapping Troubles

Magus

I have some things on a screen:

|[Name][OtherThing]                |

What I want is:

|[Name]                [OtherThing]|

Except that if the window is narrow, I want:

|[Name]           |
|     [OtherThing]|

So basically, I can't use a grid, because that won't wrap. A dockpanel seems like what I need, but doesn't seem to reflow. A wrap panel can't fill an area without some invisible kludge object.

Anyone know enough about this kind of thing?

loose

Are we talking HTML? 'Cos

<html>
<div style="position:relative;">
	<div style="float:left;display:inline;">
		Thing
	</div>
	<div style="float:right;display:inline;">
		really long texty <b>Other thing</b> because browser window minimum width wider that test screen
	</div>
</div>
</html>

Maciejasjmj

@loose said:

Are we talking HTML?

@Magus said:

WPF Wrapping Troubles

I'm gonna say... probably not.

Maciejasjmj

@Magus said:

A wrap panel can't fill an area without some invisible kludge object.

Can't you set something like align:right on the other element? I haven't really ever used anything other than a grid, but intuitively it should work...

loose

@loose said:

Are we talking HTML? 'Cos

Up until today I have not been exposed to WPF. For all I knew WPF could mean (in this community of acronym abusing Belgium) anything. I tried to determine a context meaning from the post, and my best guess was that it might be HTML because I seen to remember (rightly or wrongly) that @Magus works "front end". So am I supposed to know everything? Am I to assume that every word in a Title is relevant (when the community is not abusing acronyms, it is abusing titles)?

Yes, out of pure ignorance I got it wrong. HENCE the quote. But here is a THING a technique is a techniuqe. Trying to achieve what @Magus wants to achieve in HTML is not trivial and it is certainly not intuitive, well it is if you really understand and the medium your working in. In fact, my first *intuative" solution Got It Wrong™

I have since "researched" WPF, anbd intersetinly:

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control

I have Office 365, If I get time I may experiment, but @magus may have a solution by then.

INB4 I know this is "Coding Help", but since when has a Category stopped abuse.
Also INB4, If anybody wants to create or pontificate about a rule and behaviour then they should ensure (at least from that point forward) that they obey such a rule.

Magus

I wish. Essentially, WrapPanels are awesome and let you wrap content that overflows in a direction, but you can't fill in the area between controls in them without adding some kind of control to fill the space. Setting alignment works well in most other panel types, but only WrapPanel wraps. I was just hoping someone had come up with something.

@loose said:

I have Office 365

Normally you'd just use Visual Studio.

Anyway, someone at work built a thing that does it, and there are things on codeproject that appear to do it, but I hate that site. The one we have does things with heavily templated ItemsPanels, somehow. Which scares me.

coldandtired

You could use a trigger to add a top margin when the width is below a certain threshold.

If you can update to a Universal App I think the VisualStateManager (or whatever it's called now) can handle this.

Magus

Windows Universal has access to newer, better XAML. I wish I had some of that.

mott555

You might be able to do something with a horizontal StackPanel, but it's been a while since I've done any heavy work in WPF.

Magus

We're probably going to end up making a custom control, but the gist of what we've done in other places is:

<Grid>
  <WrapPanel
    Orientation="Horizontal"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
  >
    <TextBlock Text="Blah" />
    <Rectangle
      Width="{Binding Width, ElementName=SecondThing}"
      Height="{Binding Height, ElementName=SecondThing}"
    />
  </WrapPanel>
  <TextBlock
    x:Name="SecondThing"
    Text="Woo!"
    VerticalAlignment="Bottom"
    HorizontalAligmnent="Right"
  />
</Grid>

Which seems to make enough sense I guess...