Hi
If we focus on the use-case at hand, I can see two things that could be
improved in Pivot.
BoxPane
---------------
I think part of the problem here is just the way BoxPane works.
At the moment, the "fill" style of BoxPane is doing double duty.
It means two things for a vertical boxpane
(1) make the component fill the available width if the component is smaller
than the boxpane width
(2) if the components preferred width is greater than the available width, cut
off the component.
I'm not sure about the rationale for doing (2) - Greg, can you remember why we
do that?
Either way, it would be beneficial for split (1) and (2) into separate styles.
Border
-------------
Border could do with having alignment and fill styles, which is a fairly
straightforward change and would make this
class more useful.
Regards, Noel.
Bill van Melle wrote:
> Has there been any thought to regularizing the patchwork of layout properties
> in Pivot? I'll say more about what I
> mean below, but first an example that prompts my message, my nth frustrating
> instance of "figuring out how to do
> layout in bxml":
>
> Suppose I want to display a photo centered in a pane, and put a paragraph of
> text under it. I want the photo to
> display in a 150x150 square, no matter what its original size or shape was:
>
> <BoxPane orientation="vertical" styles="{fill:true}">
> <ImageView bxml:id="imgPhoto"
> preferredWidth="150" preferredHeight="150"
> styles="{fill:true, horizontalAlignment:'center'}" />
> <Label styles="{wrapText:true}" text="...Some long paragraph..." />
> </BoxPane>
>
> So far, so good. Now I decide I'd like the photo to have a nice border
> around it, so I try:
>
> <BoxPane orientation="vertical" styles="{fill:true}">
> <Border styles="{color:'gray', thickness:4, cornerRadii:10,
> horizontalAlignment:'center'}">
> <ImageView bxml:id="imgPhoto"
> preferredWidth="150" preferredHeight="150"
> styles="{fill:true}" />
> </Border>
> <Label styles="{wrapText:true}" text="...Some long paragraph..." />
> </BoxPane>
>
> This fails two ways: Border doesn't have a horizontalAlignment style, and the
> fill:true on the BoxPane (needed in
> order for the text to wrap), results in the preferredWidth being ignored
> (whether I put it on the ImageView or on the
> Border). So I end up wrapping the whole thing in another non-filled BoxPane:
>
> <BoxPane orientation="vertical" styles="{fill:true}">
> <BoxPane styles="{horizontalAlignment:'center'}">
> <Border preferredWidth="150" preferredHeight="150"
> styles="{color:'gray', thickness:4, cornerRadii:10}">
> <ImageView bxml:id="imgPhoto" styles="{fill:true}" />
> </Border>
> </BoxPane>
> <Label styles="{wrapText:true}" text="...Some long paragraph..." />
> </BoxPane>
>
> Bleah. And now suppose I want to put a button centered below the text.
> Buttons don't have a horizontalAlignment,
> either, and the BoxPane's fill style would make it grotesquely wide anyway,
> so I have to do the same BoxPane trick
> with it:
>
> ...
> <BoxPane styles="{horizontalAlignment:'center'}">
> <PushButton buttonData="Press Me" />
> </BoxPane>
> ...
>
> Am I missing something? Is there an easier way?
>
> This is an area where WPF seems much more organized to me. Instead of
> Pivot's incomplete set of choices of which
> components have alignment properties, and how you specify that a component
> should fill the available space, *all*
> visual components have HorizontalAlignment and VerticalAlignment properties.
> The possible values are Left (Top),
> Center, Right (Bottom), and Stretch. Stretch is the default, and says that
> the component should consume all the space
> given by its parent in the indicated dimension. See
> http://msdn.microsoft.com/en-us/library/ms751709.aspx for more.
>
> So the WPF for this example is simply
>
> <StackPanel Orientation="Vertical">
> <Rectangle x:Name="imgPhoto" Stroke="Gray" StrokeThickness="4"
> Height="150" Width="150" RadiusX="10" RadiusY="10"
> HorizontalAlignment="Center" />
> <TextBlock TextWrapping="Wrap" Text="...Some long paragraph..." />
> <Button HorizontalAlignment="Center" Content="Press Me" />
> </StackPanel>
>
> (The photo would be shown as a background "image brush" on the Rectangle.)
>
> All WPF elements also have a Margin property, which Pivot calls padding.
> Lots of Pivot components actually do have
> this property, but it's on a case-by-case basis, not a member of
> ComponentSkin.
>
> So you see I find the state of "fill" and "alignment" kind of problematic.
> Only 4 classes in Pivot have the fill
> property: ImageViewSkin, BoxPaneSkin, TerraFormSkin, TerraRollupSkin. The
> first means something a little different;
> the others are containers. Many containers seem to have an implicit
> fill=true, e.g., Border, GridPane, TablePane,
> Expander (in the horizontal dimension). Why is it implicit in Expander, but
> explicit in the very similar Rollup? I
> think it would be much less confusing if all containers implicitly filled
> where it made sense. BoxPane should fill in
> the orthogonal dimension; Form and Rollup should fill horizontally. Just
> doing that, of course, would leave me no
> workaround for the shortcomings I initially described. But I think those
> shortcomings ought to be addressed anyway.
> For example, I ought to be able to center (and not stretch) a button in a
> TablePane column without having to wrap it
> in a component that "turns off" the width information from above. Also, it's
> not clear to me what "preferredWidth" is
> really supposed to mean, if it's ignored when in a "filled" container. If I
> say preferredWidth=100, why should a
> wider container expand that width? Doesn't seem very "preferred" to me. I
> could see a narrower container shrinking
> it, but expanding is not so obvious.
>
> Unfortunately, just switching to the WPF scheme would be a breaking change
> (e.g., anyone using the "wrap it in a
> BoxPane" workaround for Pivot shortcomings would stop working), so I'm not
> sure what to recommend. I'd like to see
> horizontalAlignment and verticalAlignment (as well as padding) in
> ComponentSkin, since they pretty much make sense for
> any component. There ought to be a way in the skin implementations to have
> their use abstracted out in some common
> code (waves his hands). Adding a value STRETCH to the enumerations ought not
> break existing code, though it wouldn't
> necessarily make sense for all uses of the type (e.g., the
> HorizontalAlignment enum is also used by ScaleDecorator and
> by text.Block).
>
> Maybe an explicit preferredWidth or preferredHeight in a style should trump
> its parents "fill" behavior? Ditto for an
> explicit horizontalAlignment or verticalAlignment (but for that to work,
> you'd certainly need the STRETCH value to be
> the default, so you can tell it was explicit).
>
> Any thoughts from the folks who understand the internals of layout?
>
