pivot-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Noel Grandin <noelgran...@gmail.com>
Subject Re: The patchwork that is Pivot layout
Date Fri, 18 Mar 2011 08:47:50 GMT

If we focus on the use-case at hand, I can see two things that could be improved in Pivot.

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
(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 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?

View raw message